/* ============================================================
   SKID — personal AI companion
   Display: Instrument Serif · Body: DM Sans
   Structure inspired by conversational-AI landing pages:
   giant hero wordmark, alternating full-bleed soft sections,
   voice mockup, QR download band, calm footer.
   ============================================================ */

:root{
  --ink:#131212;
  --ink-2:#4b4845;
  --ink-3:#7a756f;
  --paper:#fbf8f3;
  --mint:#e3f3ea;
  --peach:#fbe6d3;
  --cream:#f8f1e4;
  --lav:#f1e6fb;
  --line:rgba(19,18,18,.1);
  --r-pill:999px;
  --t:cubic-bezier(.22,.61,.36,1);
  --shell:1180px;
  --gut:32px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
h1,h2,p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
.sr,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{--sz:20px;width:var(--sz);height:var(--sz);flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{--sz:17px}

/* ── buttons: full pill, near-black, matches reference weight ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  font:600 15px/1 "DM Sans",sans-serif;white-space:nowrap;
  transition:transform .22s var(--t),background .22s var(--t)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#2b2926}
.btn--lg{padding:16px 32px;font-size:16px}
.btn--wide{width:100%;justify-content:center;margin-top:8px}

/* ── nav ─────────────────────────────────────────────── */
.nav{position:absolute;top:0;left:0;right:0;z-index:60}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:88px}
.logo{font-family:"Instrument Serif",serif;font-size:27px;letter-spacing:-.01em}
.logo--sm{font-size:20px}
.nav__links{display:flex;gap:6px;margin-right:auto;margin-left:44px}
.nav__links a{padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background .2s var(--t)}
.nav__links a:hover{background:rgba(19,18,18,.06)}
.nav__right{display:flex;align-items:center;gap:12px}
.burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;padding:13px 10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .3s var(--t)}
.burger[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}
.mobile{display:none;flex-direction:column;gap:2px;padding:14px var(--gut) 22px;background:#fff;border-bottom:1px solid var(--line)}
.mobile a:not(.btn){padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line)}

/* ── global grain (adds paper/organic texture instead of flat digital gradients) ── */
body::before{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── hero ────────────────────────────────────────────── */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  background:linear-gradient(160deg,#dcf3e4 0%,#fbefc9 40%,#fbdfd5 72%,#eed7f3 100%)}
.hero__glow{position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(45% 42% at 20% 18%,rgba(122,196,173,.62),transparent 70%),
             radial-gradient(42% 38% at 80% 26%,rgba(240,140,190,.46),transparent 70%),
             radial-gradient(52% 48% at 50% 88%,rgba(180,132,240,.4),transparent 70%),
             radial-gradient(30% 26% at 70% 70%,rgba(232,192,100,.36),transparent 70%);
  filter:blur(10px)}
.hero__in{position:relative;z-index:1;display:grid;justify-items:center;padding-top:88px}
.wordmark{width:min(86vw,900px);position:relative}
.wordmark__svg{width:100%;height:auto;position:relative;z-index:1}
.wordmark__text{font-family:"Fraunces",serif;font-weight:900;font-size:230px}
.wordmark__text--grain{opacity:.5}
.wordmark__curl{width:70%;max-width:520px;margin:-10px auto 0;opacity:.75}
.hero__tag{margin-top:20px;font-size:clamp(17px,1.8vw,21px);color:var(--ink-2)}
.hero__cta,.hero .btn{margin-top:30px}
.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:44px;height:44px;border:0;background:rgba(255,255,255,.55);backdrop-filter:blur(4px);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ── feature bands ───────────────────────────────────── */
.feature{padding-block:150px;position:relative;overflow:hidden}
.feature--mint{background:linear-gradient(180deg,#dcf3e4,#fdf6ea)}
.feature--mint::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(38% 55% at 12% 30%,rgba(122,196,173,.55),transparent 72%),
             radial-gradient(30% 42% at 85% 70%,rgba(232,192,100,.32),transparent 72%);
  filter:blur(4px)}
.feature--peach{background:linear-gradient(180deg,#fbe0d0,#fbdce6)}
.feature--peach::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(40% 55% at 88% 32%,rgba(238,150,120,.5),transparent 72%),
             radial-gradient(30% 40% at 10% 74%,rgba(240,140,190,.34),transparent 72%);
  filter:blur(4px)}
.feature--cream{background:var(--cream)}
.feature--cream::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(34% 50% at 82% 20%,rgba(180,132,240,.22),transparent 72%);
  filter:blur(4px)}
.feature__in{max-width:520px;position:relative;z-index:1}
.feature__in--right{margin-left:auto;text-align:right}
.feature__copy h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(30px,3.6vw,42px);line-height:1.14;letter-spacing:-.01em;margin-bottom:16px}
.feature__copy p{font-size:16.5px;line-height:1.6;color:var(--ink-2)}

.feature__learn{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.cards{position:relative;height:300px;width:100%}
.card{position:absolute;width:230px;height:290px;border-radius:20px;box-shadow:0 30px 60px -28px rgba(19,18,18,.4),0 0 0 1px rgba(19,18,18,.04);overflow:hidden;display:flex;align-items:flex-end;padding:16px;background-size:cover;background-position:center}
.card::after{content:"";position:absolute;inset:0;pointer-events:none}
.card__cap{position:relative;z-index:1;background:rgba(19,18,18,.68);backdrop-filter:blur(3px);color:#fff;font-size:13px;font-weight:500;padding:8px 12px;border-radius:999px}
.card--a{left:0;top:6px;transform:rotate(-4deg);background-image:linear-gradient(155deg,rgba(122,196,173,.32),rgba(19,18,18,.12)),url("../img/card-travel.jpg")}
.card--b{left:130px;top:64px;transform:rotate(5deg);background-image:linear-gradient(155deg,rgba(238,150,120,.3),rgba(19,18,18,.14)),url("../img/card-books.jpg")}
.photo-credit{position:relative;z-index:1;text-align:center;margin-top:44px;font-size:11.5px;color:var(--ink-3)}

/* ── voice section ───────────────────────────────────── */
.voice{position:relative;padding-block:130px;text-align:center;overflow:hidden;background:var(--lav)}
.voice__blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.7}
.voice__blob--a{width:460px;height:460px;left:-150px;top:-90px;background:#7ac4ad}
.voice__blob--b{width:420px;height:420px;right:-130px;bottom:-110px;background:#f08cbe}
.voice__in{position:relative;z-index:1;display:grid;justify-items:center}
.voice h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(28px,3.2vw,38px);margin-top:44px;letter-spacing:-.01em}
.voice p{margin-top:12px;max-width:38ch;color:var(--ink-2)}

.phone{width:290px;background:#fff;border:8px solid var(--ink);border-radius:38px;padding:14px 12px 18px;box-shadow:0 40px 70px -30px rgba(19,18,18,.4)}
.phone__notch{width:70px;height:16px;background:var(--ink);border-radius:0 0 12px 12px;margin:-14px auto 16px}
.phone__bubble{background:var(--paper);border-radius:16px;padding:14px 16px;font-size:13px;line-height:1.5;color:var(--ink-2);margin-bottom:14px}
.phone__bar{display:flex;align-items:center;justify-content:space-between;background:#f1eee7;border-radius:999px;padding:10px 16px}
.phone__mic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff}

/* ── download / QR ───────────────────────────────────── */
.download{padding-block:120px;background:linear-gradient(155deg,#eaf7ee,#fdf6df 60%,#fdeee9)}
.download__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px}
.download__copy{max-width:480px}
.download__copy h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(28px,3vw,36px);letter-spacing:-.01em;margin-bottom:14px}
.download__copy p{color:var(--ink-2);font-size:16px;line-height:1.6}
.qr{width:132px;height:132px;padding:10px;background:#fff;border-radius:16px;box-shadow:0 20px 40px -20px rgba(19,18,18,.35)}

/* ── faq ─────────────────────────────────────────────── */
.faq{padding-block:120px}
.faq__in{max-width:720px}
.faq h2{text-align:center;font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(28px,3.2vw,36px);margin-bottom:44px}
.qa{border-bottom:1px solid var(--line)}
.qa__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;border:0;background:none;cursor:pointer;text-align:left;font:600 16.5px/1.4 "DM Sans",sans-serif;color:var(--ink)}
.qa__i{transition:transform .28s var(--t);color:var(--ink-3)}
.qa__q[aria-expanded=true] .qa__i{transform:rotate(180deg)}
.qa__a{padding:0 4px 22px}
.qa__a p{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:60ch}

/* ── about ───────────────────────────────────────────── */
.about{padding-block:110px;text-align:center;background:var(--cream)}
.about__in{display:grid;justify-items:center;max-width:560px;margin-inline:auto}
.about h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(28px,3.4vw,38px);margin-bottom:14px}
.about p{color:var(--ink-2);margin-bottom:28px}

/* ── footer ──────────────────────────────────────────── */
.foot{padding:36px 0;background:var(--peach)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.foot__links{display:flex;flex-wrap:wrap;gap:6px;margin-right:auto}
.foot__links a{padding:8px 12px;border-radius:999px;font-size:13.5px;color:var(--ink-2)}
.foot__links a:hover{background:rgba(19,18,18,.06);color:var(--ink)}
.foot__brand{font-family:"Instrument Serif",serif;font-style:italic;font-size:15px;color:var(--ink-2)}

/* ── reveal ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--t),transform .7s var(--t)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:900px){
  :root{--gut:22px}
  .nav__links{display:none}
  .burger{display:flex}
  .nav.is-open .mobile{display:flex}
  .wordmark__text{font-size:120px}
  .feature{padding-block:96px}
  .feature__in,.feature__in--right{max-width:100%;margin-left:0;text-align:left}
  .feature__learn{grid-template-columns:1fr;gap:36px}
  .cards{height:300px;width:100%;margin-inline:auto;max-width:340px}
  .voice{padding-block:96px}
  .download__in{flex-direction:column;text-align:center}
  .qr{margin-inline:auto}
  .about{padding-block:88px}
  .faq{padding-block:88px}
}
@media (max-width:560px){
  :root{--gut:18px}
  .hero{min-height:82vh}
  .wordmark__text{font-size:88px}
  .foot__in{flex-direction:column;align-items:flex-start}
  .foot__links{margin-right:0}
}