/* ================================================================
   Lakeside Digital — shared design system + restrained motion
   Mature agency aesthetic: emerald + vanta-black + muted gold.
   ================================================================ */

:root {
  --base:#080D0A; --surface:#0E1512; --surface2:#141D18;
  --primary:#1DB87A; --gold:#C6A867; --ink:#EAEEE8; --muted:#8B968F;
  --line:rgba(234,238,232,0.10);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background:var(--base); color:var(--ink); font-family:'Inter',system-ui,sans-serif; overflow-x:hidden; }
.font-display { font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; letter-spacing:-0.01em; }

/* ---------- Big headline + colored accent word (Fraunces, matches brand) ---------- */
.display { font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; text-transform:none;
  line-height:1.03; letter-spacing:-0.01em; font-weight:500; }
.display .accent { color:var(--primary); }
.display .accent.gold { color:var(--gold); }

/* alternating section bands (rhythm without going bright) */
.band-dark { background:#060A07; }
.band-soft { background:var(--surface); }

/* mockup image frame (placeholder until real screenshots dropped in) */
.mock { position:relative; border-radius:1rem; overflow:hidden; border:1px solid var(--line);
  background:var(--surface2); box-shadow:0 40px 90px -40px rgba(0,0,0,.7); }
.mock-bar { display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; background:#0B120E; border-bottom:1px solid var(--line); }
.mock-dot { width:.55rem; height:.55rem; border-radius:9999px; }
.mock-ph { aspect-ratio:16/10; display:grid; place-items:center;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(29,184,122,.14), transparent 60%),
    linear-gradient(160deg, #101A15, #0B120E);
  color:var(--muted); }
.mock img { display:block; width:100%; height:auto; }

/* ---------- CMS image slots ----------
   An uploaded image fills its frame and covers the placeholder underneath.
   Until one is set, the <img> has no src and stays hidden, so the built-in
   placeholder shows through. */
.mock-ph { position:relative; }
.cms-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.cms-img:not([src]) { display:none; }
/* Logo: when an uploaded logo exists, hide the built-in emerald mark. */
.cms-logo { height:2.25rem; width:auto; border-radius:.5rem; display:block; }
.cms-logo:not([src]) { display:none; }
.cms-logo[src] ~ .logo-mark { display:none; }

/* trust bar chips */
.trust { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem 2.5rem; }
.trust-item { display:inline-flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; }

/* announcement bar (injected globally) */
.announce { position:fixed; top:0; left:0; right:0; z-index:60; background:linear-gradient(90deg,#0A5C36,#149A63);
  color:#EAF7F0; text-align:center; font-size:.82rem; padding:.5rem 1rem; }
.announce a { color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px; }

/* mobile sticky CTA (injected globally) */
.sticky-cta { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:45; display:none;
  align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.2rem; border-radius:9999px;
  background:var(--primary); color:#06140E; font-weight:700; font-size:.95rem;
  box-shadow:0 14px 34px -10px rgba(29,184,122,.7); }
@media (max-width:767px){ .sticky-cta{ display:flex; } }

/* before / after slider-ish reveal */
.ba { position:relative; border-radius:1rem; overflow:hidden; border:1px solid var(--line); }
.ba-label { position:absolute; top:.75rem; z-index:2; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.25rem .6rem; border-radius:9999px; backdrop-filter:blur(4px); }

/* rating badge */
.rating { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem; border-radius:9999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:.8rem; color:var(--muted); }
::selection { background:rgba(29,184,122,0.28); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--primary); outline-offset:3px; border-radius:6px;
}

/* subtle page-grain / vignette so flat dark never feels empty */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(29,184,122,0.07), transparent 60%),
    radial-gradient(90% 70% at 0% 110%, rgba(198,168,103,0.05), transparent 55%);
}

/* ---------- Eyebrow ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.eyebrow::before { content:""; width:1.6rem; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:600;
  padding:.8rem 1.4rem; border-radius:9999px; cursor:pointer; transition:all .3s var(--ease);
  white-space:nowrap; }
.btn svg { transition:transform .35s var(--ease); }
.btn-primary { background:var(--primary); color:#06140E; }
.btn-primary:hover { background:#3FCB90; transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(29,184,122,.6); }
.btn-primary:hover svg { transform:translateX(3px); }
.btn-ghost { border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.02); }
.btn-ghost:hover { border-color:rgba(29,184,122,.5); background:rgba(29,184,122,.08); transform:translateY(-2px); }
.btn-ghost:hover svg { transform:translateX(3px); }

/* ---------- Hairline + cards ---------- */
.hairline { height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:1rem; transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.card-hover:hover { transform:translateY(-5px); border-color:rgba(29,184,122,.32); background:var(--surface2); }

/* ---------- Animated underline links ---------- */
.ul { position:relative; }
.ul::after { content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%;
  background:var(--primary); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.ul:hover::after { transform:scaleX(1); transform-origin:left; }

/* ---------- Scroll reveal (subtle, once) ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.40s } .reveal[data-d="6"]{ transition-delay:.48s }

/* clip-reveal for headings (elegant) */
.clip-line { display:block; overflow:hidden; }
.clip-line > span { display:block; transform:translateY(105%); transition:transform .9s var(--ease-out); }
.clip-line[data-d="1"] > span { transition-delay:.06s } .clip-line[data-d="2"] > span { transition-delay:.14s }
.clip-line[data-d="3"] > span { transition-delay:.22s }
.reveal.in .clip-line > span, .clip-line.in > span { transform:none; }

/* ---------- Header ---------- */
.site-header { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); border-bottom:1px solid transparent; }
.site-header.scrolled { background:rgba(8,13,10,0.72); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.navlink { color:var(--muted); font-size:.9rem; transition:color .25s var(--ease); position:relative; }
.navlink:hover, .navlink.active { color:var(--ink); }
.navlink.active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--primary); }

/* mobile menu (grid-rows technique — animates without layout thrash) */
.mobile-menu { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.mobile-menu.open { grid-template-rows:1fr; }
.mobile-menu > .mm-inner { overflow:hidden; min-height:0; }
.burger span { transition:transform .35s var(--ease), opacity .25s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Marquee ---------- */
.marquee { display:flex; gap:3.5rem; width:max-content; animation:marquee 34s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- Accordion (FAQ) — grid-rows technique ---------- */
.acc-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.acc.open .acc-body { grid-template-rows:1fr; }
.acc-body > div { overflow:hidden; min-height:0; }
.acc.open .acc-icon { transform:rotate(45deg); }
.acc-icon { transition:transform .35s var(--ease); }

/* ---------- Work filter ---------- */
.chip { transition:all .3s var(--ease); }
.chip.active { background:var(--primary); color:#06140E; border-color:var(--primary); }
.work-item { transition:opacity .45s var(--ease), transform .45s var(--ease); }
.work-item.hide { opacity:0; transform:scale(.96); pointer-events:none; position:absolute; visibility:hidden; }

/* ---------- Slow ambient gradient (hero only) ---------- */
.aurora-slow { background:conic-gradient(from 0deg at 50% 50%, transparent, rgba(29,184,122,.10), transparent 40%, rgba(198,168,103,.06), transparent 70%);
  filter:blur(60px); animation:spin 40s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* soft floating for accent shapes */
.float { animation:float 8s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal, .clip-line > span { opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee, .aurora-slow, .float { animation:none !important; }
  .btn, .card { transition:none; }
}