/* ============================================================
   ALTE — Alternative Technologies · Website Prototype
   Brand system (Brand Book v2): Ink Blue / Warm Cream / Coral / Plum
   Type: Sora (headings) × Inter (body/UI). Flat color, premium restraint.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Core */
  --ink-deep:#0A1426;
  --ink:#14213D;
  --ink-mist:#4A5878;
  --cream:#F4F1EA;
  --cream-2:#ECE7DC;     /* slightly deeper cream for panels */
  --cream-3:#E3DCCC;     /* hairline / borders on cream */
  --coral:#FF7849;
  --coral-soft:#FF9670;
  --plum:#4A3A5C;
  --plum-soft:#6E5C82;

  --line:rgba(20,33,61,.14);
  --line-soft:rgba(20,33,61,.08);

  --sora:'Sora',system-ui,sans-serif;
  --inter:'Inter',system-ui,sans-serif;

  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.6,0,.4,1);
  --r:14px;
  --r-lg:22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:var(--inter);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--coral);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--sora);font-weight:600;line-height:1.06;letter-spacing:-.02em;color:var(--ink-deep)}
.display{font-size:clamp(40px,5.6vw,78px);font-weight:600;line-height:1.0;letter-spacing:-.035em}
.h1{font-size:clamp(36px,5vw,66px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.h2{font-size:clamp(28px,3.6vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.025em}
.h3{font-size:clamp(20px,2vw,27px);font-weight:600;line-height:1.18;letter-spacing:-.018em}
.lead{font-size:clamp(17px,1.5vw,22px);font-weight:300;line-height:1.5;color:var(--ink)}
.body{font-size:16px;line-height:1.65;color:var(--ink-mist)}
.eyebrow{font-family:var(--inter);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--coral)}
.eyebrow.muted{color:var(--ink-mist)}
.mono{font-family:'Sora',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,8vw,128px)}
.section.tight{padding-block:clamp(48px,5vw,80px)}
.grid{display:grid;gap:24px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.gap-s{gap:10px}.gap-m{gap:18px}.gap-l{gap:32px}
.center{text-align:center}
.measure{max-width:62ch}
.measure-s{max-width:48ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--inter);font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:15px 26px;border-radius:100px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .45s var(--ease);
  will-change:transform;white-space:nowrap;
}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 1px 0 rgba(20,33,61,.04)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(255,120,73,.7)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink-deep);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn-primary:hover::before{transform:translateY(0)}
.btn-ink{background:var(--ink-deep);color:var(--cream)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(10,20,38,.6)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.btn-sm{padding:11px 18px;font-size:13px}
.btn-lg{padding:18px 32px;font-size:15px}
.btn-block{width:100%;justify-content:center}
.on-ink .btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.25)}
.on-ink .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cream)}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink);position:relative}
.link-arrow .arr{transition:transform .45s var(--ease)}
.link-arrow::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:0;background:var(--coral);transition:width .4s var(--ease)}
.link-arrow:hover::after{width:100%}
.link-arrow:hover .arr{transform:translateX(4px)}
.link-arrow.coral{color:var(--coral)}

/* ---------- Tags / chips ---------- */
.tag{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px;font-size:12.5px;font-weight:500;background:var(--cream-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-soft)}
.tag.plum{background:rgba(74,58,92,.1);color:var(--plum)}
.tag.coral{background:rgba(255,120,73,.14);color:#d2552a}
.dot{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}

/* ---------- Cards ---------- */
.card{background:var(--cream);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:28px;transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .4s var(--ease)}
.card.pad-lg{padding:34px}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -28px rgba(20,33,61,.4)}
.card-ink{background:var(--ink-deep);color:var(--cream);box-shadow:none}
.card-ink h1,.card-ink h2,.card-ink h3{color:var(--cream)}
.card-plum{background:var(--plum);color:#efeaf2;box-shadow:none}
.card-plum h1,.card-plum h2,.card-plum h3{color:#fff}

.num{font-family:var(--sora);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---------- Surfaces ---------- */
.surface-ink{background:var(--ink-deep);color:var(--cream)}
.surface-ink .body{color:rgba(244,241,234,.66)}
.surface-ink h1,.surface-ink h2,.surface-ink h3{color:var(--cream)}
.surface-ink .eyebrow{color:var(--coral-soft)}
.surface-plum{background:var(--plum);color:#efeaf2}
.surface-plum .body{color:rgba(255,255,255,.66)}
.surface-plum h1,.surface-plum h2,.surface-plum h3{color:#fff}
.surface-plum .eyebrow{color:var(--coral-soft)}
.surface-cream2{background:var(--cream-2)}

/* hairline divider */
.hr{height:1px;background:var(--line);border:none}

/* ============================================================
   HEADER
   ============================================================ */
.appbar{position:sticky;top:0;z-index:60;background:rgba(244,241,234,.82);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease)}
.appbar.scrolled{border-color:var(--line);background:rgba(244,241,234,.92)}
.appbar.on-dark{background:rgba(10,20,38,.6);color:var(--cream)}
.appbar-inner{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--sora);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink-deep)}
.appbar.on-dark .brand{color:var(--cream)}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--ink-deep);display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.brand-mark::before{content:"";position:absolute;width:11px;height:11px;background:var(--coral);border-radius:2px;transform:rotate(45deg)}
.brand small{font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mist);font-family:var(--inter)}
.appbar.on-dark .brand small{color:rgba(244,241,234,.6)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-size:14px;font-weight:500;color:var(--ink);padding:9px 13px;border-radius:9px;position:relative;transition:color .3s,background .3s}
.appbar.on-dark .nav a{color:rgba(244,241,234,.82)}
.nav a:hover{background:var(--cream-2)}
.appbar.on-dark .nav a:hover{background:rgba(244,241,234,.1)}
.nav a.active{color:var(--coral)}
.appbar-cta{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .4s var(--ease),box-shadow .4s}
.icon-btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.menu-toggle{display:none}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink-deep);color:var(--cream);padding-block:72px 36px}
.footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer h4{font-family:var(--inter);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.5);font-weight:600;margin-bottom:18px}
.footer a{display:block;font-size:14px;color:rgba(244,241,234,.78);padding:6px 0;transition:color .3s,transform .3s var(--ease)}
.footer a:hover{color:var(--coral-soft);transform:translateX(3px)}
.footer-brand .brand{color:var(--cream);margin-bottom:18px}
.footer-tag{font-size:14px;color:rgba(244,241,234,.6);max-width:34ch;line-height:1.6}
.footer-bottom{max-width:var(--maxw);margin:48px auto 0;padding:24px var(--gut) 0;border-top:1px solid rgba(244,241,234,.12);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(244,241,234,.5);gap:16px;flex-wrap:wrap}

/* ============================================================
   REVEAL ANIMATIONS (scroll)
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}
.reveal-cut{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path 1s var(--ease),opacity .5s var(--ease)}
.reveal-cut.in{clip-path:inset(0 0 0 0);opacity:1}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-cut{opacity:1!important;transform:none!important;clip-path:none!important;transition:none}
}

/* ============================================================
   PAGE TRANSITION CURTAIN + View Transitions API
   ============================================================ */
.curtain{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;grid-template-rows:repeat(1,1fr);transform:translateY(0)}
.curtain .panel{background:var(--ink-deep);transform:scaleY(0);transform-origin:bottom}
.curtain .label{position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font-family:var(--sora);font-weight:600;font-size:clamp(28px,5vw,64px);letter-spacing:-.03em;opacity:0}

/* View Transition tuning */
::view-transition-old(root){animation:vt-out .42s var(--ease) both}
::view-transition-new(root){animation:vt-in .52s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px) scale(.992)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px) scale(.994)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* utility anims */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:none}}

/* ============================================================
   PLACEHOLDER (image slots)
   ============================================================ */
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:
   repeating-linear-gradient(135deg,var(--cream-2) 0 10px,var(--cream-3) 10px 20px);
   box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.ph.dark{background:repeating-linear-gradient(135deg,#16233f 0 10px,#1b2a47 10px 20px);box-shadow:inset 0 0 0 1px rgba(244,241,234,.1)}
.ph .ph-tag{font-family:var(--sora);font-size:12px;letter-spacing:.04em;color:var(--ink-mist);background:var(--cream);padding:6px 12px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line)}
.ph.dark .ph-tag{color:rgba(244,241,234,.7);background:rgba(10,20,38,.7);box-shadow:inset 0 0 0 1px rgba(244,241,234,.14)}

/* numbered list dots in process */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:28px 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{font-family:var(--sora);font-weight:600;font-size:15px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink-deep);color:var(--cream);flex:none;transition:background .4s var(--ease),transform .5s var(--ease)}
.step:hover .step-n{background:var(--coral);transform:scale(1.08)}

/* responsive */
@media (max-width:960px){
  .footer .wrap{grid-template-columns:1fr 1fr}
  .nav,.appbar-cta .btn{display:none}
  .menu-toggle{display:grid}
}
@media (max-width:640px){
  .footer .wrap{grid-template-columns:1fr}
}