*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#100E12;
  --ink-soft:#3A3742;
  --ink-mute:#7C7888;
  --ink-faint:#ADA89D;
  --cream:#EDE4D0;
  --cream-deep:#E4D8BE;
  --cream-pale:#F4EEDF;
  --paper:#FBF7EC;
  --line:#D9CDB2;
  --line-soft:#E2D8C2;
  --amber:#D4840A;
  --amber-lo:#E8A33C;
  --steel:#5C6F8A;
  --teal:#0E8C82;
  --violet:#7B3FF2;
  --rust:#C73E2F;
  --grad-amber:linear-gradient(118deg,#B8720A 0%,#E8A33C 100%);
  --grad-headline:linear-gradient(120deg,var(--steel),var(--amber));
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.2,1);
  --shadow:0 30px 80px -30px rgba(60,48,20,.4),0 10px 30px -15px rgba(60,48,20,.2);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Syne',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}

/* ---------- GRAIN OVERLAY ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:multiply;
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}16%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,3%)}66%{transform:translate(3%,1%)}83%{transform:translate(-1%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- PROGRESS BAR ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1100;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-amber)}

/* ---------- CUSTOM CURSOR ---------- */
.cur-dot{position:fixed;top:0;left:0;z-index:9999;width:5px;height:5px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .25s,background .25s}
.cur-ring{position:fixed;top:0;left:0;z-index:9998;width:40px;height:40px;border-radius:50%;border:1px solid var(--ink-mute);transform:translate(-50%,-50%);pointer-events:none;transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s,opacity .3s,background .3s}
.cur-label{position:fixed;top:0;left:0;z-index:9999;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .25s}
body.hov-link .cur-ring{width:64px;height:64px;border-color:transparent;background:var(--ink)}
body.hov-link .cur-dot{opacity:0}
body.hov-link .cur-label{opacity:1}
body.hov-soft .cur-ring{width:56px;height:56px;border-color:var(--amber)}

/* ---------- LAYOUT ---------- */
.shell{max-width:1480px;margin:0 auto;padding:0 56px;position:relative}
section{position:relative;z-index:1}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .4s var(--ease-out),box-shadow .4s,padding .4s}
.nav-in{max-width:1480px;margin:0 auto;padding:26px 56px;display:flex;align-items:center;justify-content:space-between;transition:padding .4s var(--ease-out)}
nav.scrolled{background:rgba(237,228,208,.78);backdrop-filter:blur(20px) saturate(1.2);box-shadow:0 1px 0 var(--line-soft)}
nav.scrolled .nav-in{padding:16px 56px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{width:30px;height:30px;flex-shrink:0}
.brand-txt{font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;letter-spacing:4px;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:38px;list-style:none}
.nav-links a{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-mute);text-decoration:none;position:relative;transition:color .3s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--amber);transition:width .35s var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--cream)!important;padding:11px 22px;border-radius:100px;font-family:'Space Mono',monospace;font-size:.68rem!important;letter-spacing:1px;text-transform:uppercase;transition:transform .3s var(--ease-out),background .3s}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--amber);transform:translateY(-2px)}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:none;padding:6px}
.burger span{display:block;width:26px;height:2px;background:var(--ink);transition:.3s}

/* ---------- MOBILE MENU ---------- */
.mob{position:fixed;inset:0;z-index:1050;background:var(--cream);transform:translateY(-100%);transition:transform .6s var(--ease-out);display:flex;flex-direction:column;justify-content:center;padding:0 40px}
.mob.open{transform:translateY(0)}
.mob a{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.2rem,9vw,3.6rem);letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:10px 0;display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line-soft)}
.mob a span{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--amber);letter-spacing:1px}
.mob-close{position:absolute;top:24px;right:36px;background:none;border:none;font-size:1.6rem;color:var(--ink);cursor:none}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr}}

.eyebrow{display:inline-flex;align-items:center;gap:11px;padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:100px;background:rgba(251,247,236,.5);width:fit-content;margin-bottom:36px;opacity:0;transform:translateY(20px);animation:rise 1s var(--ease-out) .2s forwards}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);position:relative}
.eyebrow-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--amber);animation:pulse 2.2s var(--ease-io) infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
.eyebrow-txt{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}

.hero h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.9rem,6.4vw,6.4rem);line-height:.97;letter-spacing:-.04em;color:var(--ink)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln > span{display:block;transform:translateY(105%);animation:lineUp 1.1s var(--ease-out) forwards}
.hero h1 .ln:nth-child(1) > span{animation-delay:.35s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.46s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.57s}
@keyframes lineUp{to{transform:translateY(0)}}
.hero h1 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:var(--grad-headline);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-right:.06em}
.serif-mark{font-family:'Instrument Serif',serif;font-style:italic;color:var(--amber)}

.hero-sub{max-width:480px;font-size:1.08rem;line-height:1.7;color:var(--ink-soft);margin-top:34px;opacity:0;transform:translateY(20px);animation:rise 1s var(--ease-out) .8s forwards}
.hero-sub strong{color:var(--ink);font-weight:700}

.hero-cta{display:flex;gap:14px;margin-top:42px;flex-wrap:wrap;opacity:0;transform:translateY(20px);animation:rise 1s var(--ease-out) .95s forwards}

.btn-pri{position:relative;display:inline-flex;align-items:center;gap:10px;padding:17px 32px;border-radius:100px;background:var(--ink);color:var(--cream);font-family:'Syne',sans-serif;font-weight:700;font-size:.92rem;text-decoration:none;overflow:hidden;transition:transform .35s var(--ease-out);will-change:transform}
.btn-pri span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px}
.btn-pri::before{content:'';position:absolute;inset:0;background:var(--grad-amber);transform:translateY(101%);transition:transform .45s var(--ease-out);z-index:1}
.btn-pri:hover::before{transform:translateY(0)}
.btn-pri svg{transition:transform .35s var(--ease-out)}
.btn-pri:hover svg{transform:translate(4px,-4px)}

.btn-sec{display:inline-flex;align-items:center;gap:10px;padding:17px 32px;border-radius:100px;border:1.5px solid var(--line);background:rgba(251,247,236,.4);color:var(--ink);font-family:'Syne',sans-serif;font-weight:700;font-size:.92rem;text-decoration:none;transition:border-color .35s,transform .35s var(--ease-out),background .35s}
.btn-sec:hover{border-color:var(--ink);transform:translateY(-2px);background:var(--paper)}

/* ---------- HERO BLUEPRINT ---------- */
.hero-art{position:relative;justify-self:center;width:100%;max-width:560px;opacity:0;animation:fadeIn 1.4s var(--ease-out) .6s forwards}
@media(max-width:1080px){.hero-art{display:none}}
.hero-art svg{width:100%;height:auto;overflow:visible}
.bp-line{fill:none;stroke:var(--steel);stroke-width:.9;stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 3s var(--ease-out) 1s forwards}
.bp-line.d2{animation-delay:1.4s}
.bp-line.d3{animation-delay:1.8s}
.bp-acc{fill:none;stroke:var(--amber);stroke-width:1.3;stroke-dasharray:800;stroke-dashoffset:800;animation:draw 2.4s var(--ease-out) 2s forwards}
.bp-fill-steel{fill:var(--steel);fill-opacity:0;animation:fillIn 1.5s ease-out 2.6s forwards}
.bp-fill-amber{fill:var(--amber);fill-opacity:0;animation:fillIn 1.5s ease-out 2.9s forwards}
.bp-node{fill:var(--paper);stroke:var(--amber);stroke-width:1.5;opacity:0;animation:popIn .6s var(--ease-out) forwards}
.bp-dash{fill:none;stroke:var(--ink-faint);stroke-width:.6;stroke-dasharray:4 4;opacity:0;animation:fadeIn 1s ease-out 3.2s forwards}
.bp-txt{font-family:'JetBrains Mono',monospace;font-size:8.5px;fill:var(--ink-mute);opacity:0;animation:fadeIn 1s ease-out 3.4s forwards}
.bp-txt-acc{font-family:'JetBrains Mono',monospace;font-size:8.5px;fill:var(--amber);font-weight:700;opacity:0;animation:fadeIn 1s ease-out 3.5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillIn{to{fill-opacity:.07}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

.scroll-cue{position:absolute;bottom:38px;left:56px;display:flex;align-items:center;gap:14px;opacity:0;animation:fadeIn 1s ease-out 1.6s forwards}
.scroll-cue .track{width:30px;height:46px;border:1.5px solid var(--line);border-radius:100px;position:relative}
.scroll-cue .track::after{content:'';position:absolute;left:50%;top:8px;width:3px;height:8px;border-radius:3px;background:var(--amber);transform:translateX(-50%);animation:scrollDot 1.8s var(--ease-io) infinite}
@keyframes scrollDot{0%{opacity:0;top:8px}40%{opacity:1}100%{opacity:0;top:28px}}
.scroll-cue span{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- SECTION HEADERS ---------- */
.sec-label{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;align-items:center;gap:14px;margin-bottom:24px}
.sec-label::before{content:'';width:30px;height:1px;background:var(--amber)}
.sec-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);max-width:18ch}
.sec-title em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:var(--grad-headline);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}

/* ---------- MANIFESTO ---------- */
.manifesto{padding:160px 0}
.manifesto-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start}
@media(max-width:980px){.manifesto-grid{grid-template-columns:1fr;gap:40px}}
.manifesto-statement{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:1.22;letter-spacing:-.02em;color:var(--ink)}
.manifesto-statement em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--amber)}
.manifesto-body{max-width:520px}
.manifesto-body p{font-size:1.06rem;line-height:1.75;color:var(--ink-soft);margin-bottom:22px}
.manifesto-body p strong{color:var(--ink);font-weight:700}
.manifesto-sign{display:flex;align-items:center;gap:16px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line-soft)}
.manifesto-sign .mk{width:42px;height:42px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.manifesto-sign .info b{display:block;font-family:'Syne',sans-serif;font-weight:800;font-size:.92rem;letter-spacing:.5px}
.manifesto-sign .info span{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- PRODUCTS INDEX ---------- */
.products{padding:60px 0 140px}
.products-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px;flex-wrap:wrap}
.products-head p{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-mute);max-width:24ch;text-align:right}
@media(max-width:720px){.products-head p{text-align:left}}

.prod-list{border-top:1px solid var(--line)}
.prod-row{position:relative;display:block;text-decoration:none;color:inherit;border-bottom:1px solid var(--line);padding:38px 0;transition:padding .5s var(--ease-out)}
.prod-row-in{display:grid;grid-template-columns:80px 1fr auto;gap:32px;align-items:center;position:relative;z-index:2;transition:transform .5s var(--ease-out)}
.prod-num{font-family:'Space Mono',monospace;font-size:.82rem;color:var(--ink-mute);transition:color .4s}
.prod-main{display:flex;flex-direction:column;gap:8px}
.prod-name{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--ink);transition:color .4s,transform .5s var(--ease-out);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.prod-badge{font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase;padding:5px 11px;border-radius:100px;border:1px solid var(--line);color:var(--ink-mute);transition:.4s;white-space:nowrap}
.prod-desc{font-size:.98rem;color:var(--ink-mute);max-width:46ch;transition:color .4s}
.prod-arrow{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.5s var(--ease-out);flex-shrink:0}
.prod-arrow svg{transition:transform .5s var(--ease-out)}

/* accent wash per product */
.prod-row::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease-out);z-index:1;pointer-events:none}
.prod-row[data-accent="steel"]::before{background:linear-gradient(90deg,rgba(92,111,138,.1),transparent 70%)}
.prod-row[data-accent="teal"]::before{background:linear-gradient(90deg,rgba(14,140,130,.1),transparent 70%)}
.prod-row[data-accent="rust"]::before{background:linear-gradient(90deg,rgba(199,62,47,.1),transparent 70%)}
.prod-row[data-accent="violet"]::before{background:linear-gradient(90deg,rgba(123,63,242,.1),transparent 70%)}

@media(hover:hover){
  .prod-row:hover{padding:52px 0}
  .prod-row:hover::before{opacity:1}
  .prod-row:hover .prod-row-in{transform:translateX(20px)}
  .prod-row:hover .prod-name{transform:translateX(4px)}
  .prod-row[data-accent="steel"]:hover .prod-name,.prod-row[data-accent="steel"]:hover .prod-num{color:var(--steel)}
  .prod-row[data-accent="teal"]:hover .prod-name,.prod-row[data-accent="teal"]:hover .prod-num{color:var(--teal)}
  .prod-row[data-accent="rust"]:hover .prod-name,.prod-row[data-accent="rust"]:hover .prod-num{color:var(--rust)}
  .prod-row[data-accent="violet"]:hover .prod-name,.prod-row[data-accent="violet"]:hover .prod-num{color:var(--violet)}
  .prod-row[data-accent="steel"]:hover .prod-arrow{background:var(--steel);border-color:var(--steel);color:#fff}
  .prod-row[data-accent="teal"]:hover .prod-arrow{background:var(--teal);border-color:var(--teal);color:#fff}
  .prod-row[data-accent="rust"]:hover .prod-arrow{background:var(--rust);border-color:var(--rust);color:#fff}
  .prod-row[data-accent="violet"]:hover .prod-arrow{background:var(--violet);border-color:var(--violet);color:#fff}
  .prod-row:hover .prod-arrow svg{transform:translate(3px,-3px)}
  .prod-row[data-accent="steel"]:hover .prod-badge{border-color:var(--steel);color:var(--steel)}
  .prod-row[data-accent="teal"]:hover .prod-badge{border-color:var(--teal);color:var(--teal)}
  .prod-row[data-accent="rust"]:hover .prod-badge{border-color:var(--rust);color:var(--rust)}
  .prod-row[data-accent="violet"]:hover .prod-badge{border-color:var(--violet);color:var(--violet)}
}

/* ---------- APPROACH / STATS ---------- */
.approach{padding:140px 0;background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.approach::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;opacity:.6}
.approach .shell{position:relative;z-index:1}
.approach .sec-label{color:var(--cream-deep)}
.approach .sec-label::before{background:var(--amber-lo)}
.approach .sec-title{color:var(--cream)}
.approach-intro{max-width:54ch;font-size:1.12rem;line-height:1.7;color:var(--cream-deep);margin-top:28px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:80px;border-top:1px solid rgba(237,228,208,.18)}
@media(max-width:880px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}
.stat{padding:40px 32px 40px 0;border-right:1px solid rgba(237,228,208,.12)}
.stat:last-child{border-right:none}
@media(max-width:880px){.stat:nth-child(2){border-right:none}.stat{border-bottom:1px solid rgba(237,228,208,.12)}}
.stat-num{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;letter-spacing:-.03em;background:linear-gradient(120deg,#E8A33C,#F4EEDF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-lab{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream-deep);margin-top:14px}

.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:90px;background:rgba(237,228,208,.12);border:1px solid rgba(237,228,208,.12)}
@media(max-width:820px){.principles{grid-template-columns:1fr}}
.principle{background:var(--ink);padding:38px 34px}
.principle .pn{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:1.5px;color:var(--amber-lo);margin-bottom:18px}
.principle h3{font-family:'Syne',sans-serif;font-weight:800;font-size:1.32rem;letter-spacing:-.01em;margin-bottom:12px;color:var(--cream)}
.principle p{font-size:.95rem;line-height:1.65;color:var(--cream-deep)}

/* ---------- CTA ---------- */
.cta{padding:160px 0}
.cta-box{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:90px 80px;overflow:hidden;box-shadow:var(--shadow)}
.cta-box::before{content:'';position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(212,132,10,.14),transparent 65%);pointer-events:none}
.cta-inner{position:relative;z-index:1;max-width:760px}
.cta h2{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin-bottom:26px}
.cta h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:var(--grad-headline);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta p{font-size:1.1rem;line-height:1.7;color:var(--ink-soft);margin-bottom:40px;max-width:52ch}
.cta-mail{display:inline-flex;align-items:baseline;gap:6px;margin-top:30px;font-family:'Instrument Serif',serif;font-style:italic;font-size:1.5rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .4s,color .4s}
.cta-mail:hover{color:var(--amber);border-color:var(--amber)}

/* ---------- FOOTER ---------- */
footer{padding:80px 0 44px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:60px;margin-bottom:70px}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:44px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .brand-txt{font-size:1.1rem}
.foot-brand p{font-size:.92rem;line-height:1.7;color:var(--ink-mute);max-width:30ch;margin-top:18px}
.foot-col h4{font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:22px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.foot-col a{font-size:.95rem;color:var(--ink-soft);text-decoration:none;transition:color .3s,padding-left .3s var(--ease-out)}
.foot-col a:hover{color:var(--amber);padding-left:6px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:32px;border-top:1px solid var(--line-soft)}
.foot-bottom span,.foot-bottom a{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}
.foot-pow strong{background:var(--grad-headline);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){.shell{padding:0 40px}.nav-in{padding:24px 40px}nav.scrolled .nav-in{padding:16px 40px}.scroll-cue{display:none}}
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .shell{padding:0 26px}.nav-in{padding:22px 26px}nav.scrolled .nav-in{padding:14px 26px}
  body{cursor:auto}.cur-dot,.cur-ring,.cur-label{display:none!important}
  .manifesto,.products,.approach,.cta{padding-top:90px;padding-bottom:90px}
  .cta-box{padding:54px 30px}
  .prod-row-in{grid-template-columns:1fr;gap:14px}
  .prod-num{display:none}
  .prod-arrow{display:none}
  .stat{padding:30px 0;border-right:none!important;border-bottom:1px solid rgba(237,228,208,.12)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .hero h1 .ln > span{transform:none}
}


/* ===== GRADX — STEEL THEME ===== */
/* Default product accent — svaka stranica prepisuje --accent / --accent-lo u svom inline :root bloku */
:root{--accent:var(--steel);--accent-lo:#7E90AB}
:root{--grad-prod:linear-gradient(120deg,var(--accent),var(--amber))}
.hero h1 em,.sec-title em,.cta h2 em{background:var(--grad-prod);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.eyebrow-dot{background:var(--accent)}
.eyebrow-dot::after{border-color:var(--accent)}
.nav-links a::after{background:var(--accent)}
.nav-cta:hover{background:var(--accent)}
.bp-line{stroke:var(--steel)}
.bp-acc{stroke:var(--amber)}
.bp-fill-steel{fill:var(--steel)}
.bp-fill-amber{fill:var(--amber)}
.bp-node{stroke:var(--amber)}
body.hov-soft .cur-ring{border-color:var(--accent)}

/* product hero dual CTA */
.hero-cta .btn-pri::before{background:var(--grad-prod)}

/* benefits grid */
.benefits{padding:140px 0}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
@media(max-width:980px){.ben-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.ben-grid{grid-template-columns:1fr}}
.ben-card{position:relative;background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;padding:34px 30px;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s}
.ben-card::after{content:'';position:absolute;left:0;top:0;height:3px;width:0;background:var(--grad-prod);transition:width .5s var(--ease-out)}
.ben-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line)}
.ben-card:hover::after{width:100%}
.ben-card.feature{background:var(--ink);border-color:transparent}
.ben-card.feature .ben-num{color:rgba(237,228,208,.4)}
.ben-card.feature .ben-title{color:var(--cream)}
.ben-card.feature .ben-desc{color:var(--cream-deep)}
.ben-card.feature .ben-ico{color:var(--amber-lo);border-color:rgba(237,228,208,.2);background:rgba(237,228,208,.05)}
.ben-num{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:1.5px;color:var(--ink-faint);margin-bottom:20px}
.ben-ico{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--cream-pale);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:22px}
.ben-ico svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ben-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:11px}
.ben-desc{font-size:.95rem;line-height:1.65;color:var(--ink-mute)}

/* for-who editorial list */
.forwho{padding:120px 0;background:var(--paper);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.fw-list{margin-top:56px;border-top:1px solid var(--line)}
.fw-item{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.fw-check{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;margin-top:3px}
.fw-check svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fw-item h3{font-family:'Syne',sans-serif;font-weight:800;font-size:1.22rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px}
.fw-item p{font-size:1rem;line-height:1.65;color:var(--ink-mute);max-width:62ch}

/* dual cta box */
.cta h2 em{background:var(--grad-prod);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-box::before{background:radial-gradient(circle,rgba(92,111,138,.14),transparent 65%)}
.login-note{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-mute);margin-top:24px;display:flex;align-items:center;gap:8px}
.login-note .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ============================================================
   DODATNE KOMPONENTE (stranice proizvoda dodate 30.07.2026)
   ============================================================ */

/* ---------- BREADCRUMB ---------- */
.crumbs{padding-top:118px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.crumbs li{font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint)}
.crumbs li+li::before{content:'/';margin-right:10px;color:var(--line)}
.crumbs a{color:var(--ink-mute);text-decoration:none;transition:color .3s}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink-soft)}

/* ---------- STATUS TRAKA (poštena napomena o stanju proizvoda) ---------- */
.status-note{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;padding:22px 26px;margin-top:40px;max-width:640px}
.status-note .sn-ico{flex-shrink:0;width:22px;height:22px;color:var(--accent);margin-top:2px}
.status-note p{font-size:.94rem;line-height:1.65;color:var(--ink-soft)}
.status-note b{color:var(--ink);font-weight:700}

/* ---------- SPEC LISTA ---------- */
.specs{padding:120px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:56px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(max-width:760px){.spec-grid{grid-template-columns:1fr}}
.spec-row{background:var(--paper);padding:26px 30px;display:flex;flex-direction:column;gap:7px}
.spec-row dt{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-faint)}
.spec-row dd{font-size:1rem;line-height:1.55;color:var(--ink);font-weight:600}
.spec-row dd span{display:block;font-weight:400;font-size:.9rem;color:var(--ink-mute);margin-top:4px}

/* ---------- CENOVNIK ---------- */
.pricing{padding:130px 0}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;margin-top:60px}
.price-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:38px 32px;display:flex;flex-direction:column;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent)}
.price-card.feat{border-color:var(--accent);border-width:1.5px}
.price-flag{position:absolute;top:-11px;left:32px;background:var(--accent);color:var(--paper);font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:1.4px;text-transform:uppercase;padding:5px 13px;border-radius:100px}
.price-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink)}
.price-tag{font-family:'Syne',sans-serif;font-weight:800;font-size:2.5rem;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:16px 0 6px}
.price-tag small{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:400;letter-spacing:1px;color:var(--ink-mute);text-transform:uppercase}
.price-sub{font-size:.9rem;line-height:1.6;color:var(--ink-mute);min-height:2.9em}
.price-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:26px 0 30px;padding-top:24px;border-top:1px solid var(--line-soft)}
.price-list li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;line-height:1.5;color:var(--ink-soft)}
.price-list svg{flex-shrink:0;width:15px;height:15px;color:var(--accent);margin-top:4px}
.price-card .btn-pri,.price-card .btn-sec{margin-top:auto;justify-content:center;width:100%;font-size:.86rem;padding:15px 24px}
.price-foot{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.8px;line-height:1.7;color:var(--ink-faint);margin-top:34px;max-width:64ch}

/* ---------- FAQ ---------- */
.faq{padding:130px 0;background:var(--ink);color:var(--cream)}
.faq .sec-label{color:var(--cream-deep)}
.faq .sec-label::before{background:var(--amber-lo)}
.faq .sec-title{color:var(--cream)}
.faq .sec-title em{background:linear-gradient(120deg,var(--accent-lo),var(--amber-lo));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.faq-list{margin-top:60px;border-top:1px solid rgba(237,228,208,.16)}
.faq-item{border-bottom:1px solid rgba(237,228,208,.16)}
.faq-item summary{list-style:none;cursor:pointer;padding:28px 60px 28px 0;position:relative;font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(1.02rem,1.9vw,1.28rem);line-height:1.4;letter-spacing:-.01em;color:var(--cream);transition:color .3s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--amber-lo)}
.faq-item summary::after{content:'';position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-7px;border-right:1.8px solid var(--amber-lo);border-bottom:1.8px solid var(--amber-lo);transform:rotate(45deg) translateY(-3px);transition:transform .35s var(--ease-out)}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-item[open] summary{color:var(--amber-lo)}
.faq-answer{padding:0 60px 30px 0;font-size:1rem;line-height:1.75;color:var(--cream-deep);max-width:74ch}
.faq-answer p+p{margin-top:16px}
.faq-answer a{color:var(--amber-lo);text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.faq-item summary{padding-right:44px}.faq-answer{padding-right:0}}

/* ---------- SRODNI PROIZVODI ---------- */
.related{padding:110px 0}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:48px}
.rel-card{display:flex;flex-direction:column;gap:9px;padding:28px 26px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-decoration:none;transition:transform .4s var(--ease-out),border-color .4s}
.rel-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.rel-card b{font-family:'Syne',sans-serif;font-weight:800;font-size:1.16rem;letter-spacing:-.01em;color:var(--ink)}
.rel-card span{font-size:.9rem;line-height:1.55;color:var(--ink-mute)}
.rel-card em{font-family:'Space Mono',monospace;font-style:normal;font-size:.58rem;letter-spacing:1.3px;text-transform:uppercase;color:var(--accent);margin-top:4px}