/* GoBuild marketing — shared design system.
   "Paper · Ink · Flame" with a blueprint accent. Editorial, builder-grade,
   premium. Tailwind (CDN) handles utilities; this file owns the custom
   components: nav, device mockups, blueprint motifs, reveals, marquee. */

:root{
  --ink:#111114;
  --paper:#f6f2ea;
  --paper-2:#efe9dd;
  --flame:#f5470c;
  --flame-2:#ff7a3c;
  --blue:#15598c;        /* blueprint steel */
  --line:rgba(17,17,20,.08);
}

html{scroll-behavior:smooth;background:var(--paper)}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);overflow-x:hidden;max-width:100vw}
.display{font-family:'Archivo','Space Grotesk',Inter,sans-serif;letter-spacing:-.022em;font-weight:800}
h1.display{font-weight:900;letter-spacing:-.032em}
h2.display,h3.display{font-weight:800;letter-spacing:-.022em}
.display.font-black{font-weight:900}
::selection{background:var(--flame);color:#fff}

/* --- type helpers --- */
.flame-text{background:linear-gradient(100deg,#ff8a3d,#f5470c 55%,#ff8a3d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.kicker{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:14px;font-weight:600;
  padding:.85rem 1.4rem;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
  line-height:1;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-flame{background:var(--flame);color:#fff;box-shadow:0 14px 34px -12px rgba(245,71,12,.6)}
.btn-flame:hover{background:#e23d06}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(17,17,20,.04)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-light:hover{background:rgba(255,255,255,.18)}

/* --- nav --- */
.nav-wrap{position:fixed;top:0;inset-inline:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:58px;
  padding:0 .8rem 0 1.1rem;border-radius:18px;background:rgba(246,242,234,.7);
  backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 8px 30px -18px rgba(0,0,0,.25)}
.nav.on-dark{background:rgba(20,20,24,.55);border-color:rgba(255,255,255,.1)}
.brand-dot{display:inline-block;width:26px;height:26px;border-radius:8px;background:var(--flame);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}

/* --- blueprint motifs --- */
.blueprint{background-color:#0f2436;background-image:
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:28px 28px}
.grid-dots{background-image:radial-gradient(circle at 1px 1px,rgba(17,17,20,.10) 1px,transparent 0);
  background-size:30px 30px}
.grid-dots-light{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 0);
  background-size:30px 30px}
.mesh{position:absolute;inset:-25% -10%;z-index:0;filter:blur(70px);opacity:.5;pointer-events:none;
  background:
    radial-gradient(38% 48% at 18% 22%,#ff7a3c 0%,transparent 60%),
    radial-gradient(34% 44% at 82% 16%,#f5470c 0%,transparent 60%),
    radial-gradient(42% 52% at 72% 82%,#15598c 0%,transparent 62%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(0,-3%,0) scale(1.1)}}

/* --- cards --- */
.card{background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 50px -38px rgba(0,0,0,.4)}
.card-dark{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:22px}

/* --- reveal on scroll --- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.reveal.show{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* --- marquee --- */
.marquee{display:flex;gap:3rem;width:max-content;animation:scroll 30s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}

/* --- float --- */
.float{animation:float 6s ease-in-out infinite}
.float-slow{animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ===========================================================
   iPhone-style device mockup
   =========================================================== */
.device{position:relative;width:300px;aspect-ratio:9/19.5;border-radius:46px;
  background:linear-gradient(#1b1b1f,#0a0a0c);padding:12px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.6),0 0 0 2px #2c2c31,0 0 0 7px #1a1a1d;}
.device::before{content:"";position:absolute;right:-3px;top:120px;width:3px;height:62px;border-radius:0 3px 3px 0;background:#2c2c31}
.device::after{content:"";position:absolute;left:-3px;top:96px;width:3px;height:34px;border-radius:3px 0 0 3px;background:#2c2c31;box-shadow:0 50px 0 #2c2c31,0 96px 0 #2c2c31}
/* Device screens render the dark field app by default; the .screen-light class
   opts a frame back to white. (Specificity here beats Tailwind's bg-* utility,
   which was being overridden by the old #fff default — the "white screen" bug.) */
.device .screen{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden;background:#0a0e14}
.device .screen.screen-light{background:#fff}
.device .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:92px;height:25px;
  background:#000;border-radius:14px;z-index:40}
.device .statusbar{position:absolute;top:0;inset-inline:0;height:46px;z-index:30;display:flex;
  align-items:center;justify-content:space-between;padding:16px 22px 0;font-size:12px;font-weight:600}
.device .scr-body{position:absolute;inset:0;padding-top:46px;padding-bottom:52px;overflow:hidden}
/* Field-app bottom tab bar inside the phone mockups — mirrors the real app
   (TODAY · SITES · ＋ · CLOCK · MORE, cyan active). */
.device .fs-tabbar{position:absolute;left:0;right:0;bottom:0;z-index:36;display:grid;
  grid-template-columns:repeat(5,1fr);align-items:end;background:rgba(10,14,20,.88);
  backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08);padding:0 6px 7px}
.device .fs-tabbar .t{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding-top:7px;font-size:15px;line-height:1;color:#64748b}
.device .fs-tabbar .t i{font-style:normal;font-size:7.5px;letter-spacing:.08em;font-weight:700}
.device .fs-tabbar .t.on{color:#22d3ee}
.device .fs-tabbar .cap{justify-self:center;margin-top:-16px;width:44px;height:44px;border-radius:9999px;
  background:linear-gradient(135deg,#ff7a3c,#f5470c);display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;box-shadow:0 8px 22px -6px rgba(249,115,22,.7)}
.device-sm{width:240px}
.device-lg{width:330px}
/* keep phones inside the viewport on small screens (≤380px) */
@media (max-width:380px){
  .device{width:262px}
  .device-sm{width:220px}
}

/* mobile nav dropdown panel */
.mobnav a{display:block;padding:.7rem 1rem;border-radius:12px;font-weight:500}
.mobnav.light a:hover{background:var(--paper-2)}
.mobnav.dark a:hover{background:rgba(255,255,255,.06)}

/* tiny app-ui helpers used inside screens */
.app-grad-ink{background:linear-gradient(135deg,#15598c,#0e2c45)}
.app-grad-flame{background:linear-gradient(135deg,#ff7a3c,#f5470c)}
.app-grad-green{background:linear-gradient(135deg,#34d399,#059669)}
.pill{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.2rem .6rem;font-size:11px;font-weight:600}

/* --- authentic GoBuild Field (dark tactical) screen styling for device mockups.
   Mirrors the real app: ink bg, cyan "tac" accent, mono readouts, faint grid. --- */
.fs-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.fs-grid{background-image:
  linear-gradient(rgba(34,211,238,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(34,211,238,.06) 1px,transparent 1px);
  background-size:26px 26px}
.fs-edge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.fs-pulse{position:relative}
.fs-pulse::before{content:"";position:absolute;inset:-5px;border-radius:9999px;
  background:currentColor;opacity:.3;animation:fspz 1.9s ease-out infinite}
@keyframes fspz{0%{transform:scale(.6);opacity:.45}100%{transform:scale(1.7);opacity:0}}

/* ===========================================================
   Browser-window mockup (for the desktop dashboard showcase)
   =========================================================== */
.win{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 50px 110px -40px rgba(15,23,42,.55),0 12px 30px -18px rgba(15,23,42,.3)}
.win-bar{display:flex;align-items:center;gap:.6rem;height:44px;padding:0 14px;
  background:#ece7dd;border-bottom:1px solid rgba(0,0,0,.06)}
.win-dot{width:12px;height:12px;border-radius:50%}
.win-url{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:8px;height:27px;
  padding:0 12px;font-size:12px;color:#64748b;max-width:430px;margin:0 auto}
.win-screen{background:#f8fafc;overflow:hidden}

/* compact app sidebar inside windows (Notion-style, like the real app) */
.aw-side{background:#f8fafc;border-right:1px solid #e7ecf2}
.aw-nav{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:9px;
  font-size:13px;color:#64748b;font-weight:500}
.aw-nav.active{background:#fff4ed;color:#c2410c}
.aw-kpi{background:#fff;border-radius:16px;padding:16px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -24px rgba(15,23,42,.5);border:1px solid #eef2f6}

/* --- footer --- */
.foot a{transition:color .2s}.foot a:hover{color:var(--flame)}

/* --- "A day made calm" — outcome-voice helpers (shared across pages) --- */
.moment-time{display:inline-flex;align-items:center;gap:.6rem;font-family:'JetBrains Mono',monospace;
  font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--flame);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:.42rem .9rem;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -26px rgba(0,0,0,.5)}
.moment-time.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--flame-2)}
.moment-time .dot{width:7px;height:7px;border-radius:50%;background:var(--flame);box-shadow:0 0 0 4px rgba(245,71,12,.14)}
.moment-time .lbl{color:var(--ink);opacity:.5;font-weight:600;letter-spacing:.13em;text-transform:uppercase;font-size:.62rem}
.moment-time.on-dark .lbl{color:#fff;opacity:.55}
.gain-tag{display:inline-flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--flame)}
.gain-tag::before{content:"";width:14px;height:1.5px;background:var(--flame);display:inline-block}
.proof{border-left:2px solid var(--line);padding-left:.9rem;color:rgba(17,17,20,.45);font-size:.85rem;line-height:1.6}
.proof b{color:rgba(17,17,20,.62);font-weight:600}
.proof.on-dark{border-color:rgba(255,255,255,.18);color:rgba(246,242,234,.5)}
.proof.on-dark b{color:rgba(246,242,234,.78)}

/* --- misc --- */
.hr-line{height:1px;background:var(--line)}
[x-cloak]{display:none}