:root{--black:#050505;--panel:#141312;--line:#2a2724;--cream:#f2ede4;--muted:#aaa397;--orange:#ff6a1f;--ink:#0a0a0a;--display:"Bricolage Grotesque",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--body:Manrope,"Noto Sans Sinhala","Noto Sans Tamil",system-ui,sans-serif;--pad:clamp(16px,3.2vw,48px)}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;color:var(--cream);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
h1,h2,h3,p{margin:0}
em{font:italic 400 1.07em/.9 var(--serif);letter-spacing:-.03em;color:var(--orange)}
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);mix-blend-mode:normal}
.brand{font:800 26px/1 var(--display);letter-spacing:-.04em;text-decoration:none}
.brand small{font:500 13px var(--body);letter-spacing:0;color:var(--muted);margin-left:8px}
.nav a{transition:color .2s}.nav.onlight .brand,.nav.onlight #signin{color:var(--ink)}.nav.onlight .brand small{color:#5b564e}
.nav nav{display:flex;align-items:center;gap:20px;font-weight:600;font-size:15px}
.nav nav>a:first-child{text-decoration:none}
.pill{display:inline-block;background:var(--orange);color:var(--ink);border-radius:999px;padding:11px 22px;font-weight:600;text-decoration:none;font-size:15px;transition:background .15s}
.pill:hover{background:#ff8a4f}
.pill.big{font-size:18px;padding:16px 30px;white-space:nowrap}
.pill.dark{background:var(--ink);color:var(--cream);font-size:18px;padding:16px 30px}
.pill.dark:hover{background:#2a2724}
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end;background:#100803}
.herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,5,.8),transparent 58%)}
.herotext{position:relative;z-index:1;width:100%;padding:0 var(--pad) clamp(24px,4vh,44px)}
h1{font:800 clamp(66px,14.6vw,232px)/.88 var(--display);letter-spacing:-.055em}
.rise>span{display:block}
.herofoot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(20px,4vh,40px)}
.herofoot p{max-width:42ch}
.sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.scrub{height:520vh;background:var(--black)}
.ghost{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(90px,24vw,400px)/1 "Noto Sans Sinhala","Noto Sans Tamil",var(--display);color:#191714;white-space:nowrap;letter-spacing:-.03em}
.phone{position:absolute;left:50%;top:50%;height:min(82svh,760px);aspect-ratio:9/16;transform:translate(-50%,-50%);border-radius:30px;overflow:hidden;background:#27180e;box-shadow:0 0 0 1px #38332d}
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone canvas{position:absolute;inset:0;width:100%;height:100%}
.note{position:absolute;left:var(--pad);bottom:clamp(30px,10vh,90px);width:min(27vw,380px)}
.note h2{font:800 clamp(30px,3.6vw,54px)/1 var(--display);letter-spacing:-.035em}
.note p{color:var(--muted);margin-top:14px}
.scrubbar{position:absolute;left:var(--pad);right:var(--pad);bottom:20px;height:2px;background:var(--line)}
.scrubbar i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:left;transform:scaleX(0)}
.looks{height:420vh;background:var(--cream);color:var(--ink)}
.looks h2,.flow h2,.faq h2{font:800 clamp(44px,7.6vw,120px)/.94 var(--display);letter-spacing:-.05em}
.looks h2{position:absolute;left:var(--pad);top:clamp(80px,12vh,120px);right:var(--pad);font-size:clamp(38px,6.2vw,96px)}
.track{position:absolute;left:0;bottom:clamp(28px,7vh,64px);display:flex;gap:clamp(12px,2vw,28px);padding:0 var(--pad);will-change:transform}
.card{flex:none;width:min(62vw,calc(50svh * 16 / 9));}
.frame{position:relative;aspect-ratio:16/9;background:#1b0f07 url(https://graphixdesign.agency/wp-content/themes/graphix/assets/img/hero-poster.webp) center/cover;overflow:hidden}
.frame canvas{position:absolute;inset:0;width:100%;height:100%}
.card h3{font:600 20px/1.2 var(--body);margin-top:12px}
.card p{color:#5b564e;font-size:16px}
.flow{padding:clamp(90px,16vh,190px) var(--pad)}
.flow ol{list-style:none;counter-reset:s;margin:clamp(50px,9vh,110px) 0 0;padding:0}
.flow li{counter-increment:s;display:grid;grid-template-columns:minmax(70px,1fr) 4fr 4fr;gap:20px;align-items:baseline;padding:clamp(22px,4vh,44px) 0;border-top:1px solid var(--line)}
.flow li::before{content:counter(s);font:italic 400 clamp(40px,5vw,70px)/1 var(--serif);color:var(--orange)}
.flow h3{font:800 clamp(30px,4vw,62px)/1 var(--display);letter-spacing:-.035em}
.flow li p{color:var(--muted);max-width:44ch}
.truths{display:grid;grid-template-columns:3fr 2fr;gap:clamp(32px,6vw,90px);padding:clamp(70px,14vh,170px) var(--pad);align-items:end;border-top:1px solid var(--line)}
.truths .big{font:italic 400 clamp(52px,8vw,132px)/.94 var(--serif);letter-spacing:-.025em}
.truths div{display:grid;gap:20px;color:var(--muted)}
.trial{background:var(--orange);color:var(--ink);padding:clamp(70px,13vh,160px) var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.trial h2{font:800 clamp(66px,14vw,220px)/.86 var(--display);letter-spacing:-.055em}
.trial h2 span{display:block}
.trial div{max-width:360px;display:grid;gap:22px;justify-items:start}
.faq{padding:clamp(80px,14vh,160px) var(--pad);max-width:1100px}
.faq h2{margin-bottom:44px;font-size:clamp(40px,5.6vw,84px)}
details{border-top:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em}
details p{color:var(--muted);margin-top:12px;max-width:62ch}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:30px var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.foot span{font:800 clamp(60px,12vw,170px)/.8 var(--display);letter-spacing:-.05em;color:var(--cream)}
.js .rise>span{clip-path:inset(0 0 -.12em 0)}
.js .rise>span{transform:translateY(0)}
.js .rise.wait>span{transform:translateY(105%);opacity:0}
.js .rise>span{transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .4s}
.js .rise>span:nth-child(2){transition-delay:.08s}
.js .rise>span:nth-child(3){transition-delay:.16s}
@media(max-width:900px){.note{left:var(--pad);right:var(--pad);width:auto;bottom:34px;background:rgba(5,5,5,.72);padding:12px;border-radius:14px}.note p{display:none}.note h2{font-size:24px}.phone{top:43%;height:min(68svh,620px)}.flow li{grid-template-columns:52px 1fr}.flow li p{grid-column:2}.truths{grid-template-columns:1fr}.card{width:84vw}.herofoot{flex-direction:column;align-items:flex-start}.looks h2{top:84px}.track{bottom:auto;top:clamp(190px,27svh,250px)}.foot{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.scrub{height:auto}.looks{height:auto;padding:90px 0}.scrub .sticky,.looks .sticky{position:relative;height:auto;min-height:100svh}.track{position:relative;bottom:auto;overflow-x:auto;width:100%;margin-top:190px}.herovid,.phone video{display:block}}