@font-face{font-family:'Frank';src:url('./fonts/FrankRuhlLibre.ttf') format('truetype');font-weight:300 900;font-display:swap}
@font-face{font-family:'Heebo';src:url('./fonts/Heebo.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Ktav';src:url('./fonts/KtavYadCLM-BoldItalic.ttf') format('truetype');font-display:swap}

:root{--navy:#041E43;--deep:#020F26;--cream:#FDFCF6;--sand:#F3EFE3;--mid:#3E4F70;--ice:#BFD0EA;--line:rgba(4,30,67,.16)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--navy);font-family:'Heebo',sans-serif;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.center{text-align:center}

/* foil logo: letterforms untouched, only the fill is treated */
.foil{display:block;aspect-ratio:1115/472;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
 background:linear-gradient(105deg,#8EA6CF 0%,#DCE7F7 18%,#FFFFFF 30%,#9BB3DA 42%,#6F8BBB 54%,#DCE7F7 68%,#F6FAFF 78%,#8EA6CF 100%);background-size:260% 100%;animation:foil 9s ease-in-out infinite}
.foil-xl{width:min(560px,80vw);filter:drop-shadow(0 8px 28px rgba(120,160,230,.25))}
.foil-sm{width:92px}
.foil-md{width:150px;margin:0 auto}
@keyframes foil{0%{background-position:100% 0}50%{background-position:0 0}100%{background-position:100% 0}}

/* nav */
.nav{position:fixed;top:0;inset-inline:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;transition:background .3s,box-shadow .3s}
.nav.solid{background:rgba(2,15,38,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(191,208,234,.15)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{color:#DCE5F4;text-decoration:none;font-size:16px;letter-spacing:.02em;padding:10px 2px;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{border:1px solid rgba(191,208,234,.5);border-radius:999px;padding:8px 22px!important}
.nav-cta:hover{background:rgba(191,208,234,.12)}

/* hero */
.hero{position:relative;min-height:min(100vh,940px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream);padding:120px 24px 100px;
 background:radial-gradient(ellipse 70% 55% at 50% 38%,#0E3470 0%,rgba(7,36,82,.6) 45%,transparent 75%),linear-gradient(180deg,#041E43 0%,#020F26 100%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.035;background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 4px);pointer-events:none}
.hero-frame{position:absolute;inset:22px;border:1px solid rgba(191,208,234,.22);pointer-events:none}
.hero-frame::after{content:"";position:absolute;inset:7px;border:1px solid rgba(191,208,234,.1)}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;animation:rise 1.2s ease both}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
.logo{line-height:0}
.orn{display:flex;align-items:center;gap:14px;margin:34px 0 22px;width:min(320px,70vw)}
.orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(191,208,234,.7))}
.orn i:last-child{background:linear-gradient(270deg,transparent,rgba(191,208,234,.7))}
.orn b{width:7px;height:7px;transform:rotate(45deg);border:1px solid #DCE7F7;background:transparent}
.tagline{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:17px;letter-spacing:.32em;color:#DCE5F4;font-weight:300}
.tagline em{font-style:normal;color:#8EA6CF;letter-spacing:0}
.slogan{font-family:'Frank',serif;font-weight:700;font-size:clamp(40px,6.6vw,76px);line-height:1.2;margin-top:78px;color:#fff}
.edit{position:relative;display:inline-block}
.edit del{text-decoration-thickness:3px;text-decoration-color:#9BB3DA;color:#9fb0cc}
.ins{position:absolute;bottom:100%;right:50%;transform:translateX(50%);font-family:'Ktav','Frank',cursive;font-weight:400;font-size:.5em;color:#BFD6FF;white-space:nowrap;line-height:1;padding-bottom:.28em}
.caret{position:absolute;top:100%;right:50%;transform:translateX(50%);font-size:.7em;line-height:.6;font-family:'Heebo',sans-serif;color:#BFD6FF}
.sub{font-family:'Frank',serif;font-size:21px;color:#C7D4EA;margin:34px auto 0;max-width:560px;font-weight:400}
.btn{display:inline-block;margin-top:40px;background:linear-gradient(135deg,#EEF4FF,#BFD0EA);color:var(--navy);text-decoration:none;font-weight:500;font-size:17px;padding:14px 46px;border-radius:999px;letter-spacing:.03em;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.btn-soft{background:transparent;border:1px solid var(--navy);box-shadow:none;cursor:default;color:var(--navy)}
.btn-soft:hover{transform:none;box-shadow:none}
.scroll{position:absolute;bottom:42px;left:50%;width:22px;height:36px;margin-left:-11px;border:1px solid rgba(191,208,234,.5);border-radius:12px}
.scroll span{position:absolute;top:7px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#DCE7F7;animation:dot 2s infinite}
@keyframes dot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* sections */
section{position:relative}
.eyebrow{font-size:14px;letter-spacing:.3em;color:var(--mid);margin-bottom:14px;font-weight:500}
.eyebrow.light{color:#9BB3DA}
h2{font-family:'Frank',serif;font-weight:700;font-size:clamp(30px,4.2vw,46px);line-height:1.25;margin-bottom:22px}
h2.light{color:#fff}
.about{padding:120px 0}
.about-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.about-fig{margin:0;position:relative}
.about-fig::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--navy);opacity:.35;z-index:0}
.about-fig img{position:relative;z-index:1;display:block;width:100%;height:440px;object-fit:cover;object-position:60% 60%;box-shadow:0 30px 60px -20px rgba(4,30,67,.35)}
.about-text p{color:#2B3C5E;margin-bottom:16px;max-width:520px}
@media(min-width:860px){.about-grid{grid-template-columns:1fr 1fr}.about-fig img{height:540px}}

.services{padding:110px 0;background:var(--sand);border-block:1px solid var(--line)}
.cards{display:grid;grid-template-columns:1fr;gap:24px;margin-top:56px}
@media(min-width:800px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--cream);padding:44px 34px 46px;border:1px solid var(--line);position:relative;transition:transform .3s,box-shadow .3s}
.card::before{content:"";position:absolute;top:0;inset-inline:34px;height:2px;background:var(--navy)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -18px rgba(4,30,67,.28)}
.num{display:block;font-family:'Frank',serif;font-size:15px;letter-spacing:.2em;color:var(--mid);margin-bottom:22px}
.card h3{font-family:'Frank',serif;font-size:30px;font-weight:700;margin-bottom:10px}
.card p{color:#3E4F70}

.sample{padding:110px 0;background:linear-gradient(180deg,#041E43,#020F26);color:var(--cream)}
.ba{display:grid;grid-template-columns:1fr;gap:22px;margin-top:50px}
@media(min-width:800px){.ba{grid-template-columns:1fr 1fr}}
.ba-col{border:1px solid rgba(191,208,234,.25);padding:34px 34px 38px;background:rgba(255,255,255,.03)}
.ba-after{border-color:rgba(191,208,234,.6);background:rgba(191,208,234,.08)}
.ba-label{display:inline-block;font-size:13px;letter-spacing:.3em;color:#9BB3DA;margin-bottom:14px}
.ba-col p{font-family:'Frank',serif;font-size:22px;line-height:1.7;color:#E8EEF8}
.ba del{text-decoration-thickness:2px;text-decoration-color:#9BB3DA;color:#9fb0cc}
.ba ins{text-decoration:none;font-family:'Ktav','Frank',cursive;font-size:1.3em;color:#BFD6FF}
.note{margin-top:26px;text-align:center;font-size:14px;color:#8EA6CF;letter-spacing:.08em}

.contact{padding:120px 0;background:var(--cream)}
.contact-text{color:var(--mid);margin-top:4px}

.footer{background:var(--deep);color:#C7D4EA;text-align:center;padding:64px 24px 40px}
.f-tag{margin-top:22px;letter-spacing:.3em;font-size:14px;font-weight:300}
.demo-note{margin-top:28px;font-size:13px;color:#7F93B5;letter-spacing:.04em}

@media(max-width:640px){
 .nav{padding:10px 16px}.nav-links{gap:14px}.nav-links a{font-size:14px}.nav-cta{padding:6px 14px!important}
 .foil-sm{width:70px}.tagline{letter-spacing:.18em;font-size:14px;gap:10px}.hero-frame{inset:12px}.slogan{margin-top:64px}
 .about,.services,.sample,.contact{padding:80px 0}
}
@media(prefers-reduced-motion:reduce){.foil,.scroll span,.hero-inner{animation:none}html{scroll-behavior:auto}}

/* ===== v3 upgrades ===== */
.progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:60;background:linear-gradient(90deg,#8EA6CF,#fff);transform-origin:right;transform:scaleX(0)}

/* splash */
.splash{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse 60% 50% at 50% 45%,#0E3470,#020F26 75%);transition:opacity .7s ease,visibility .7s}
.splash-on .splash{display:flex}
.splash.out{opacity:0;visibility:hidden}
.splash .foil-splash{width:min(480px,76vw);filter:drop-shadow(0 8px 28px rgba(120,160,230,.3));animation:foil 2.6s ease-in-out 1,splashin 1.4s ease both}
@keyframes splashin{from{transform:scale(.96);letter-spacing:0}to{transform:none}}
.splash .orn{margin-top:30px}
.splash-skip{position:absolute;bottom:34px;background:none;border:1px solid rgba(191,208,234,.4);color:#C7D4EA;font:inherit;font-size:14px;letter-spacing:.15em;padding:8px 26px;border-radius:999px;cursor:pointer}
.splash-skip:hover{background:rgba(191,208,234,.12)}
.splash-on body{overflow:hidden}

/* hero spotlight */
.spot{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(420px circle at var(--x,50%) var(--y,40%),rgba(150,190,255,.16),transparent 65%)}
.hero-inner{z-index:1}

/* ticker */
.ticker{overflow:hidden;background:var(--cream);border-bottom:1px solid var(--line);padding:22px 0;direction:ltr}
.ticker-track{display:flex;gap:34px;width:max-content;animation:tick 38s linear infinite;align-items:center}
.ticker span{font-family:'Frank',serif;font-weight:700;font-size:clamp(28px,4vw,46px);color:transparent;-webkit-text-stroke:1px var(--navy);white-space:nowrap;direction:rtl}
.ticker b{color:#8EA6CF;font-size:14px;font-weight:400}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* manifesto */
.manifesto{padding:150px 0 120px;background:var(--cream)}
.mf{font-family:'Frank',serif;font-weight:700;font-size:clamp(40px,8vw,104px);line-height:1.12;text-align:center;max-width:960px;margin:0 auto}
.mf .w{color:rgba(4,30,67,.14);transition:color .5s}
.mf .w.on{color:var(--navy)}
.mf-sub{text-align:center;margin-top:34px;color:var(--mid);font-family:'Frank',serif;font-size:22px}
.eyebrow.center{text-align:center}

/* about facts */
.facts{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line);max-width:520px}
.facts li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-family:'Frank',serif;font-size:19px}
.facts span{width:90px;font-family:'Heebo',sans-serif;font-size:13px;letter-spacing:.2em;color:var(--mid);padding-top:5px}

/* service rows */
.rows{margin-top:56px;border-top:1px solid var(--navy)}
.row{display:grid;grid-template-columns:70px 1fr;gap:6px 28px;padding:40px 0;border-bottom:1px solid var(--navy);align-items:start;transition:background .3s,padding .3s}
.row:hover{background:rgba(255,255,255,.55)}
.row .num{margin:6px 0 0}
.row h3{font-family:'Frank',serif;font-size:clamp(36px,5vw,60px);font-weight:700;line-height:1.1;margin-bottom:8px}
.row-main p{color:var(--mid)}
.eg{grid-column:2;margin:18px 0 0;padding:16px 22px;border-inline-start:2px solid var(--navy);font-family:'Frank',serif;font-size:21px;color:#1c2f52;background:rgba(4,30,67,.04)}
.eg-label{display:block;font-family:'Heebo',sans-serif;font-size:12px;letter-spacing:.3em;color:var(--mid);margin-bottom:6px}
.eg del{text-decoration-thickness:2px;color:#6d7c99}
.eg ins{text-decoration:none;font-family:'Ktav','Frank',cursive;font-size:1.25em;color:var(--navy)}
@media(min-width:900px){.row{grid-template-columns:80px 1fr 1fr}.eg{grid-column:3;margin:0;align-self:center}}
.note.dark{color:var(--mid);margin-top:30px}

/* process */
.process{padding:110px 0;background:var(--cream)}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0;counter-reset:s;border-top:1px solid var(--line)}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr);border-top:0}}
.steps li{padding:30px 26px 34px;border-bottom:1px solid var(--line)}
@media(min-width:800px){.steps li{border-bottom:0;border-inline-start:1px solid var(--line)}.steps li:first-child{border-inline-start:0;padding-inline-start:0}}
.s-num{display:inline-flex;width:44px;height:44px;border:1px solid var(--navy);border-radius:50%;align-items:center;justify-content:center;font-family:'Frank',serif;font-size:19px;margin-bottom:18px}
.steps h3{font-family:'Frank',serif;font-size:28px;margin-bottom:6px}
.steps p{color:var(--mid);font-size:16px}

/* contact (dark closing) */
.contact{padding:140px 0;background:linear-gradient(180deg,#041E43,#020F26);color:var(--cream);overflow:hidden}
.contact-frame{position:absolute;inset:22px;border:1px solid rgba(191,208,234,.2);pointer-events:none}
.contact .wrap{position:relative}
h2.big{font-size:clamp(44px,8vw,96px);line-height:1.1;color:#fff;margin-bottom:28px}
.contact-text{color:#C7D4EA}
.contact .btn-soft{border-color:rgba(191,208,234,.6);color:#DCE5F4}

/* reveal (only hidden when JS is on, with fallback) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in,.js.reveal-all .reveal{opacity:1;transform:none}
@media(max-width:640px){.manifesto{padding:100px 0 80px}.row{padding:30px 0}.contact{padding:100px 0}.nav-links a:nth-child(3),.nav-links a:nth-child(4){display:none}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.js .reveal{opacity:1;transform:none}.splash .foil-splash{animation:none}}
.eg del{display:block}.eg ins{display:block;margin-top:6px}
@media(max-width:899px){.eg{grid-column:1/-1}}