/* ============================================================
   HAKAMA — Swiss Design Gráfico
   Shared design system. Light-only. International Typographic Style.
   ============================================================ */

/* ---- TOKENS ---- */
:root{
  --signal-red:#D82C2C;
  --signal-red-dark:#B21F1F;     /* hover: ~8% darken */
  --black:#1A1A1A;               /* off-black — never #000 */
  --white:#FFFFFF;
  --cool-grey:#A9B2B1;
  --deep-blue:#0033A0;
  --light-grey:#F2F2F2;
  --hairline:#E4E4E4;

  --ink:#1A1A1A;
  --ink-2:#5A5F5E;               /* secondary text */
  --ink-3:#8A908F;               /* tertiary text */

  --grid-gap:20px;
  --container:1280px;
  --pad:1.5rem;

  --radius:.5rem;
  --shadow-card:0 2px 12px rgba(0,0,0,.06);
  --shadow-lift:0 6px 20px rgba(0,0,0,.08);

  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- RESET ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--white);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--signal-red);color:#fff}

/* ---- TYPE SCALE ---- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--black)}
.hero-h1{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.025em}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.015em}
h3{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
h4{font-size:1.125rem;font-weight:600;letter-spacing:0}
p{max-width:72ch}
.mono{font-family:var(--mono)}

.eyebrow{
  font-family:var(--font);
  font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-red);
  display:inline-block;margin-bottom:1rem;
}
.eyebrow.muted{color:var(--ink-2)}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);line-height:1.7;font-weight:400}

/* ---- LAYOUT ---- */
.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-block:clamp(4rem,8vw,8rem)}
.section--tight{padding-block:clamp(3rem,5vw,4.5rem)}
.section--grey{background:var(--light-grey)}
.section--ink{background:var(--black);color:#fff}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.grid{display:grid;gap:var(--grid-gap)}
.rule{height:1px;background:var(--hairline);border:0}
.section--ink .rule{background:rgba(255,255,255,.16)}

/* index numeral (Swiss signature: numbered sections) */
.idx{font-family:var(--mono);font-size:.8rem;color:var(--signal-red);font-weight:500;letter-spacing:.05em}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.95rem;font-weight:600;letter-spacing:.005em;
  padding:.8rem 1.4rem;border-radius:var(--radius);
  border:1.5px solid transparent;
  transition:background .2s var(--ease),transform .12s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--signal-red);color:#fff}
.btn--primary:hover{background:var(--signal-red-dark)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.section--ink .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.section--ink .btn--ghost:hover{background:#fff;color:var(--black)}
.btn--blue{background:var(--deep-blue);color:#fff}
.btn--blue:hover{background:#002a85}

/* ---- BADGE ---- */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:.3rem;border:1px solid;
  white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--live{color:#1A6B3C;border-color:rgba(26,107,60,.35);background:rgba(26,107,60,.08)}
.badge--validation{color:#9A6A00;border-color:rgba(154,106,0,.35);background:rgba(200,149,42,.1)}
.badge--available{color:var(--deep-blue);border-color:rgba(0,51,160,.3);background:rgba(0,51,160,.06)}
.badge--soon{color:var(--ink-3);border-color:var(--hairline);background:var(--light-grey)}
.badge--confirmed{color:#1A6B3C;border-color:rgba(26,107,60,.35);background:rgba(26,107,60,.08)}

/* ---- CARD ---- */
.card{
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:1.6rem;
}

/* ---- TOOL CARD (signature: compliance state bar) ---- */
.tool{
  position:relative;background:var(--white);
  border:1px solid var(--hairline);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tool:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.tool__bar{position:absolute;top:0;left:0;height:3px;width:0;background:var(--signal-red);transition:width 1.2s var(--ease)}
.tool__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.7rem}
.tool__name{font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
.tool__desc{font-size:.9rem;color:var(--ink-2);line-height:1.6}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--hairline)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.01em;font-size:1.05rem}
.brand svg{width:26px;height:30px}
.nav__links{display:flex;align-items:center;gap:1.6rem;font-size:.9rem;font-weight:500}
.nav__links a{color:var(--ink-2);transition:color .15s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:.7rem}
.nav__cta .btn{padding:.55rem 1rem;font-size:.85rem}
.nav__burger{display:none;background:none;border:0;padding:.4rem}
.nav__burger svg{width:26px;height:26px}

/* mega-menu */
.has-mega{position:relative}
.mega-trigger{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;color:var(--ink-2);font:inherit;font-weight:500;background:none;border:0}
.mega-trigger svg{width:14px;height:14px;transition:transform .2s}
.has-mega:hover .mega-trigger,.has-mega:focus-within .mega-trigger{color:var(--ink)}
.has-mega:hover .mega-trigger svg{transform:rotate(180deg)}
.mega{
  position:absolute;top:calc(100% + 10px);left:0;transform:translateY(8px);
  width:min(860px,92vw);background:#fff;border:1px solid var(--hairline);
  border-radius:var(--radius);box-shadow:var(--shadow-lift);
  padding:1.4rem;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:1rem;border-bottom:1px solid var(--hairline);margin-bottom:1rem}
.mega__head small{color:var(--ink-2);font-size:.85rem}
.mega__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.mega__col h5{font-size:.95rem;font-weight:700;margin-bottom:.2rem}
.mega__col span{font-size:.8rem;color:var(--ink-2);display:block}
.mega__col a{display:block;padding:.5rem;margin:-.5rem;border-radius:.4rem;transition:background .15s}
.mega__col a:hover{background:var(--light-grey)}
.mega__foot{display:flex;gap:1.4rem;flex-wrap:wrap;padding-top:1rem;margin-top:1rem;border-top:1px solid var(--hairline);font-size:.85rem;font-weight:500}
.mega__foot a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2)}
.mega__foot a:hover{color:var(--signal-red)}
.mega__foot svg{width:15px;height:15px}

/* ---- MOBILE DRAWER ---- */
.drawer{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(26,26,26,.45);opacity:0;transition:opacity .25s var(--ease)}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;transform:translateX(100%);transition:transform .3s var(--ease);overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.drawer__close{background:none;border:0;padding:.3rem}
.drawer__close svg{width:26px;height:26px}
.drawer a{padding:.7rem .2rem;font-size:1rem;font-weight:500;border-bottom:1px solid var(--hairline)}
.acc__btn{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--hairline);padding:.7rem .2rem;font:inherit;font-size:1rem;font-weight:500;text-align:left}
.acc__btn svg{width:18px;height:18px;transition:transform .2s}
.acc__btn[aria-expanded=true] svg{transform:rotate(180deg)}
.acc__panel{display:none;padding:.2rem 0 .6rem .8rem}
.acc__panel.open{display:block}
.acc__panel a{font-size:.92rem;color:var(--ink-2);border-bottom:0;padding:.5rem .2rem}

/* ---- HERO ---- */
.hero{padding-block:clamp(3.5rem,7vw,6.5rem)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero__sub{margin-top:1.4rem;max-width:48ch}
.hero__cta{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero__aside{border-left:3px solid var(--signal-red);padding-left:1.4rem}

/* ---- METRICS STRIP ---- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.metric{padding:1.6rem 1.2rem;border-right:1px solid var(--hairline)}
.metric:last-child{border-right:0}
.metric__n{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.03em;color:var(--black);font-family:var(--mono)}
.metric__l{font-size:.82rem;color:var(--ink-2);margin-top:.4rem;line-height:1.45}

/* ---- THREE SHIFTS ---- */
.shift{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;padding:1.4rem 0}
.shift__from{color:var(--ink-2)}
.shift__from b{display:block;font-size:1.4rem;font-weight:400;color:var(--ink-2);letter-spacing:-.01em}
.shift__from span{font-size:.88rem}
.shift__arrow{color:var(--signal-red)}
.shift__arrow svg{width:30px;height:30px}
.shift__to b{display:block;font-size:1.4rem;font-weight:700;color:var(--black);letter-spacing:-.02em}
.shift__to b em{color:var(--signal-red);font-style:normal}
.shift__to span{font-size:.88rem;color:var(--ink-2)}

/* ---- MODULE CARDS ---- */
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.module{display:flex;flex-direction:column;gap:.6rem;background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);padding:1.5rem;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.module:hover{border-color:var(--ink);transform:translateY(-2px)}
.module__eyebrow{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--signal-red)}
.module h3{font-size:1.15rem;font-weight:600;line-height:1.3}
.module__link{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.35rem}
.module__link svg{width:15px;height:15px;transition:transform .2s}
.module:hover .module__link svg{transform:translateX(3px)}

/* ---- TABS (module selector) ---- */
.tabs__list{display:flex;gap:.4rem;flex-wrap:wrap;border-bottom:1px solid var(--hairline);margin-bottom:2rem}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:.7rem 1.1rem;font:inherit;font-size:.95rem;font-weight:600;color:var(--ink-3);margin-bottom:-1px;transition:color .15s,border-color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--black);border-bottom-color:var(--signal-red)}
.tabpanel{display:none}
.tabpanel.active{display:block}
.tabpanel__head{max-width:62ch;margin-bottom:2rem}
.tabpanel__head h3{font-size:clamp(1.4rem,2.4vw,1.875rem);font-weight:700;letter-spacing:-.015em;margin-bottom:.8rem}

/* ---- Q&A (security) ---- */
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}
.qa__q{font-size:1.05rem;font-weight:600;margin-bottom:.6rem;display:flex;gap:.6rem}
.qa__q .mono{color:var(--signal-red);font-size:.85rem;flex:none;padding-top:.15rem}
.qa__a{font-size:.92rem;color:var(--ink-2);line-height:1.65;margin-bottom:.9rem}

/* ---- TIMELINE ---- */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--grid-gap);counter-reset:step}
.step{border-top:3px solid var(--hairline);padding-top:1rem}
.step:first-child{border-top-color:var(--signal-red)}
.step__w{font-family:var(--mono);font-size:.75rem;color:var(--signal-red);font-weight:500}
.step__t{font-size:.9rem;color:var(--ink);margin-top:.5rem;line-height:1.55}

/* ---- INTEGRATION TIERS ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.tier{border:1px solid var(--hairline);border-radius:var(--radius);padding:1.5rem}
.tier--a{border-color:var(--signal-red);border-width:1.5px}
.tier--b{opacity:.9}
.tier--c{opacity:.7}
.tier__label{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--ink-3)}
.tier--a .tier__label{color:var(--signal-red)}
.tier h4{margin:.4rem 0 .6rem}
.tier p{font-size:.88rem;color:var(--ink-2)}

/* ---- standards strip ---- */
.standards{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.standards span{font-family:var(--mono);font-size:.8rem;color:var(--ink-2);padding:.35rem .7rem;border:1px solid var(--hairline);border-radius:.3rem}

/* ---- callout ---- */
.callout{border-left:3px solid var(--signal-red);background:var(--light-grey);padding:1.2rem 1.4rem;border-radius:0 var(--radius) var(--radius) 0}
.callout p{font-size:.92rem;color:var(--ink);max-width:80ch}

/* ---- FORM ---- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.field label .req{color:var(--signal-red)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.95rem;padding:.7rem .8rem;
  border:1px solid var(--hairline);border-radius:var(--radius);background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal-red);box-shadow:0 0 0 2px rgba(216,44,44,.18)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}

/* ---- FOOTER ---- */
.footer{background:var(--black);color:#fff;padding-block:3rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer h6{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cool-grey);margin-bottom:.9rem;font-weight:500}
.footer a{display:block;color:rgba(255,255,255,.78);font-size:.9rem;padding:.28rem 0;transition:color .15s}
.footer a:hover{color:#fff}
.footer__brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem;margin-bottom:.8rem}
.footer__brand svg{width:24px;height:28px}
.footer__legal{font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.6;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);max-width:90ch}

/* ---- MOTION (fade-up on scroll) ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- RESPONSIVE ---- */
@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__aside{border-left:0;border-top:3px solid var(--signal-red);padding-left:0;padding-top:1.2rem}
  .modules,.tiers{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav__links,.nav__cta .btn--ghost{display:none}
  .nav__burger{display:block}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
  .modules,.qa,.form-grid{grid-template-columns:1fr}
  .tabpanel .grid{grid-template-columns:1fr!important}
  .shift{grid-template-columns:1fr;gap:.6rem;text-align:left}
  .shift__arrow{transform:rotate(90deg);width:max-content}
  .tabs__list{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
}
@media(max-width:560px){
  .tiers,.timeline,.footer__grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--hairline)}
  .metric:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .tool__bar{transition:none}
}

/* ---- Demo modal overlay ---- */
.demo-overlay{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.demo-overlay.open{opacity:1;visibility:visible}
.demo-overlay__bar{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1.1rem;background:var(--black);flex-shrink:0;border-bottom:1px solid #333}
.demo-overlay__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;color:#ccc;text-transform:uppercase}
.demo-overlay__close{background:none;border:none;cursor:pointer;color:#ccc;padding:.2rem .6rem;font-size:1.05rem;line-height:1;font-family:var(--mono);transition:color .12s}
.demo-overlay__close:hover{color:var(--signal-red)}
.demo-overlay__iframe-wrap{flex:1;position:relative;background:#faf9f5}
.demo-overlay__iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.demo-trigger{display:block;font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-red);text-decoration:none;margin-top:.45rem;text-align:center;cursor:pointer;opacity:.9;transition:opacity .12s}
.demo-trigger:hover{opacity:1;text-decoration:underline}