:root{--bg:#121212;--bg2:#1A1A1A;--red:#E57373;--coral:#FF8A8A;--tx:#F5F5F5;--mute:#A8A8A8;--line:#2A2A2A;--ease:cubic-bezier(.7,0,.2,1);--f:'Inter Tight','Helvetica Neue',Arial,sans-serif;--m:'JetBrains Mono',ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--f);font-weight:400;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
::selection{background:var(--red);color:#000}
.mono{font-family:var(--m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.wrap{width:min(1240px,100% - 3rem);margin-inline:auto}
body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#bar{position:fixed;top:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,var(--red),var(--coral));transform-origin:0 50%;transform:scaleX(0);z-index:100}
.cur,.ring{position:fixed;top:0;left:0;pointer-events:none;z-index:120;border-radius:50%;display:none}
@media(pointer:fine){.cur,.ring{display:block}body,a,button{cursor:none}}
.cur{width:6px;height:6px;background:var(--coral);margin:-3px 0 0 -3px}
.ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,138,138,.6);transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s}
.ring.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(229,115,115,.14)}
.ring small{position:absolute;inset:0;display:grid;place-items:center;font:500 .6rem var(--m);letter-spacing:.14em;color:var(--tx);opacity:0;transition:.3s}
.ring.big small{opacity:1}
#curtain{position:fixed;inset:0;background:#0b0b0b;z-index:110;display:grid;place-items:center;transform:translateY(0);transition:transform .9s var(--ease)}
#curtain.out{transform:translateY(-100%)}
#curtain b{font:500 clamp(3rem,10vw,7rem)/1 var(--f);letter-spacing:-.05em;color:var(--tx);display:block}
#curtain i{display:block;height:1px;background:var(--red);width:0;margin-top:1rem;transition:width 1s var(--ease)}
#curtain.go i{width:100%}
nav.top{position:fixed;inset:0 0 auto 0;z-index:60;padding:1.4rem 0;mix-blend-mode:difference}
nav.top .wrap{display:flex;justify-content:space-between;align-items:center}
.brand-n{font-weight:600;font-size:1.25rem;letter-spacing:-.04em}.brand-n em{color:var(--coral);font-style:normal}
nav ul{display:flex;gap:2rem;list-style:none}
nav a.l{font:.75rem var(--m);letter-spacing:.12em;text-transform:uppercase;position:relative;padding:.3rem 0}
nav a.l::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav a.l:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:720px){nav ul li:not(:last-child){display:none}}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*60ms + var(--base,0ms))}
.on .w>span,.w.on>span{transform:none}
.rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}
.hero{min-height:100svh;padding-top:7rem;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.hero::before{content:"";position:absolute;width:80vmin;height:80vmin;left:50%;top:48%;transform:translate(-50%,-10%);background:radial-gradient(circle,rgba(229,115,115,.28),transparent 65%);filter:blur(30px);animation:pulse 7s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55;transform:translate(-50%,-10%) scale(1.15)}}
.hero h1{font-weight:600;font-size:clamp(5.5rem,22vw,17rem);letter-spacing:-.07em;line-height:.85;position:relative;z-index:2}
.hero h1 .dot{color:var(--red)}
.icon{width:clamp(72px,9vw,108px);aspect-ratio:1;border-radius:50%;margin:1.6rem auto 0;position:relative;z-index:3;box-shadow:0 0 0 1px var(--line),0 0 60px rgba(229,115,115,.35);animation:spin 40s linear infinite paused}
.icon:hover{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.tag{margin-top:1rem;position:relative;z-index:3}
.portrait{position:relative;z-index:1;width:min(560px,92vw);margin-top:-1rem;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.portrait img{width:100%;will-change:transform}
.scroll{position:absolute;bottom:1.5rem;left:1.5rem;z-index:4;writing-mode:vertical-rl}
.scroll::after{content:"";display:inline-block;width:1px;height:48px;background:var(--red);margin-top:.7rem;animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.marq{border-block:1px solid var(--line);overflow:hidden;padding:1.1rem 0;background:var(--bg2)}
.marq div{display:flex;gap:3rem;width:max-content;animation:mq 30s linear infinite;font-size:clamp(1.5rem,3.5vw,2.6rem);letter-spacing:-.03em;font-weight:500}
.marq span:nth-child(even){color:var(--red)}
.marq:hover div{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.sec{padding:8rem 0 6rem}
.sec-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:3rem;gap:2rem;flex-wrap:wrap}
.h2{font-size:clamp(2.2rem,5.5vw,4.6rem);font-weight:500;letter-spacing:-.05em;line-height:1}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;perspective:1200px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:block;aspect-ratio:3/4.2;border-radius:22px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);transform-style:preserve-3d;transition:transform .25s ease-out,border-color .4s}
@media(max-width:900px){.card{aspect-ratio:4/5}}
.card:hover{border-color:var(--red)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s;filter:grayscale(.35) brightness(.8)}
.card:hover img{transform:scale(1.08);filter:none}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(10,10,10,.92)),radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,138,138,.22),transparent 60%)}
.card .in{position:absolute;inset:auto 0 0 0;padding:1.6rem;z-index:2;transform:translateZ(50px)}
.card .n{position:absolute;top:1.4rem;left:1.6rem;z-index:2}
.card h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.04em;font-weight:500;line-height:1.05;margin:.5rem 0 1rem}
.arrow{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);transition:.5s var(--ease)}
.card:hover .arrow{background:var(--red);border-color:var(--red);transform:rotate(-45deg)}
.arrow svg{width:16px}
.about{display:grid;grid-template-columns:1fr 2fr;gap:3rem;padding:2rem 0 8rem}
@media(max-width:800px){.about{grid-template-columns:1fr}}
.about p{font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.25;letter-spacing:-.03em;color:var(--mute)}
.about p b{color:var(--tx);font-weight:500}
.sub{display:grid;grid-template-columns:5fr 7fr;gap:4rem;padding:8rem 0 5rem;align-items:start}
@media(max-width:900px){.sub{grid-template-columns:1fr;gap:2rem}}
.cover{position:sticky;top:5.5rem;border-radius:24px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--bg2)}
@media(max-width:900px){.cover{position:relative;top:0}}
.cover img{width:100%;height:118%;object-fit:cover;will-change:transform}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(18,18,18,.6));pointer-events:none}
.sub h1{font-size:clamp(2.8rem,7vw,6rem);font-weight:500;letter-spacing:-.06em;line-height:.95;margin:1rem 0 2rem}
.sub h1 em{font-style:normal;color:var(--red)}
.lead{font-size:clamp(1.15rem,1.8vw,1.5rem);color:var(--mute);max-width:36ch;letter-spacing:-.02em}
.lead b{color:var(--tx);font-weight:500}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:3rem 0}
.stats div{background:var(--bg);padding:1.4rem 1rem}
.stats strong{display:block;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.05em;font-weight:500;color:var(--coral)}
.tl{list-style:none;border-left:1px solid var(--line);margin:1rem 0 3rem 4px}
.tl li{position:relative;padding:0 0 2.4rem 2rem}
.tl li::before{content:"";position:absolute;left:-5px;top:.45rem;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(229,115,115,.15)}
.tl h3{font-weight:500;font-size:1.5rem;letter-spacing:-.03em;margin:.3rem 0}
.tl p{color:var(--mute);max-width:52ch}
.brands{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}
.b{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.1rem .6rem .6rem;border:1px solid var(--line);border-radius:99px;background:var(--bg2);font-size:.95rem;transition:.4s var(--ease)}
.b:hover{border-color:var(--red);transform:translateY(-3px)}
.b i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),#7a3535);color:#fff;font:600 .7rem var(--m)}
.b img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
@media(max-width:600px){.grid3,.stats{grid-template-columns:1fr}}
.tile{padding:1.6rem;border:1px solid var(--line);border-radius:18px;background:var(--bg2);position:relative;overflow:hidden;transition:.5s var(--ease)}
.tile:hover{transform:translateY(-6px);border-color:var(--red)}
.tile h3{font-weight:500;letter-spacing:-.03em;font-size:1.35rem;margin:.6rem 0}
.tile p{color:var(--mute);font-size:.95rem}
.wave{display:flex;gap:4px;align-items:center;height:60px;margin:2rem 0}
.wave i{flex:1;background:var(--red);border-radius:3px;height:20%;animation:wv 1.2s ease-in-out infinite;animation-delay:calc(var(--k)*70ms);opacity:.85}
@keyframes wv{50%{height:100%;background:var(--coral)}}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.7rem;border:1px solid var(--line);border-radius:99px;font:.78rem var(--m);letter-spacing:.12em;text-transform:uppercase;transition:.4s var(--ease);will-change:transform}
.btn:hover{background:var(--red);border-color:var(--red);color:#000}
.next{display:block;border-block:1px solid var(--line);padding:5rem 0;transition:background .5s}
.next:hover{background:var(--bg2)}
.next .h2{font-size:clamp(2.6rem,9vw,8rem);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.next .h2 span{color:var(--red);transition:transform .6s var(--ease)}
.next:hover .h2 span{transform:translateX(1.2rem)}
footer{background:#000;color:#fff;padding:7rem 0 2rem}
footer .big{display:block;font-size:clamp(2.6rem,9vw,8.5rem);letter-spacing:-.06em;line-height:.95;font-weight:500;margin:1.5rem 0 5rem;word-break:break-word}
footer .big:hover{color:var(--coral)}
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;border-top:1px solid #222;padding-top:2.5rem}
@media(max-width:800px){.fg{grid-template-columns:1fr 1fr}}
.fg h4{font:.7rem var(--m);letter-spacing:.14em;text-transform:uppercase;color:#777;margin-bottom:1rem;font-weight:400}
.fg a{display:block;padding:.2rem 0;width:fit-content;transition:color .3s,transform .4s var(--ease)}
.fg a:hover{color:var(--coral);transform:translateX(6px)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:5rem;color:#777}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}
/* v2 — dot, hero row, shapes, logos */
.dotc{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--red);margin-left:.05em;transform:scale(0);transition:transform 1s var(--ease) .6s}
.on .dotc{transform:none}
.hero h1{overflow:visible;padding-inline:.05em}
.hero-row{width:min(1240px,100% - 3rem);display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:3rem;position:relative;z-index:2;margin-top:-1rem;text-align:left}
@media(max-width:850px){.hero-row{grid-template-columns:1fr;gap:1rem}}
.hero-row .portrait{width:100%;max-width:520px;margin:0;justify-self:center;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.portrait::before{content:"";position:absolute;inset:8% 6% 0;border:1px solid rgba(229,115,115,.45);border-radius:999px 999px 0 0;z-index:-1}
.portrait::after{content:"ISURU";position:absolute;left:-4%;bottom:14%;font:600 clamp(3rem,8vw,7rem)/1 var(--f);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(245,245,245,.14);writing-mode:vertical-rl;transform:rotate(180deg);z-index:-1}
.bio{padding-bottom:5rem}
.bio h2{font-weight:500;font-size:clamp(1.8rem,3.4vw,2.9rem);letter-spacing:-.045em;line-height:1.08;color:var(--tx);margin:1rem 0 1.4rem}
.bio h2 em,.bio p b{font-style:normal;color:var(--coral);font-weight:500}
.bio p{color:var(--tx);opacity:.88;font-size:1.05rem;max-width:46ch;margin-bottom:1rem}
.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.6rem 0 2rem}
.chips span{padding:.45rem 1rem;border:1px solid var(--red);color:var(--red);border-radius:99px;font:.72rem var(--m);letter-spacing:.12em;text-transform:uppercase}
/* card shapes blended into black */
.card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 90px 16px rgba(10,10,10,.85)}
.card:nth-child(1){border-radius:999px 999px 26px 26px}
.card:nth-child(2){border-radius:26px 190px 26px 26px;margin-top:3.5rem}
.card:nth-child(3){border-radius:190px 26px 26px 26px}
@media(max-width:900px){.card:nth-child(2){margin-top:0}}
.card:nth-child(1) .n{left:50%;transform:translateX(-50%);top:2.4rem}
.card:nth-child(3) .n{left:auto;right:1.8rem}
.card:nth-child(1) .in{text-align:center}.card:nth-child(1) .arrow{margin-inline:auto}
/* cover shapes */
.cover{border:0;outline:1px solid rgba(229,115,115,.55);outline-offset:12px;margin:12px}
.cover::after{background:linear-gradient(transparent 55%,#121212),radial-gradient(circle at 50% 40%,transparent 45%,rgba(18,18,18,.75));box-shadow:inset 0 0 90px 18px rgba(18,18,18,.9)}
.cover.hospitality{border-radius:999px 999px 28px 28px}
.cover.tech{border-radius:28px 220px 28px 28px}
.cover.voice{border-radius:220px 28px 220px 28px}
/* logos */
.brands{gap:.9rem}
.b{padding:.5rem 1.3rem .5rem .5rem}
.lg{position:relative;width:46px;height:46px;border-radius:12px;overflow:hidden;flex:none;display:block}
.lg i{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),#7a3535);color:#fff;font:600 .72rem var(--m);font-style:normal;border-radius:0;width:auto;height:auto}
.lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#F5F5F5;padding:4px;border-radius:0}
.hero-row{align-items:center}.bio{padding-bottom:0}
@media(max-width:850px){.bio{padding-bottom:3rem}}
/* v3 — stack bands, live canvases */
nav.top{mix-blend-mode:normal;transition:color .4s;background:linear-gradient(rgba(18,18,18,.7),transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
nav.top.dk{color:#121212;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}nav.top.dk .brand-n em{color:#121212}
.cur.dk{background:#121212}.ring.dk{border-color:#121212}.ring.dk.big{background:rgba(18,18,18,.12)}.ring.dk small{color:#121212}
.hero-row{margin-top:2rem}
.live{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.stack{position:relative}
.band{position:sticky;top:0;display:block;height:100svh;overflow:hidden;border-radius:38px 38px 0 0;transform-origin:50% 0;will-change:transform,filter;margin-top:-1px}
.band.red{background:var(--red);color:#121212}.band.blk{background:#121212;color:var(--tx);border-top:1px solid var(--line)}.band.cor{background:var(--coral);color:#121212}
.bin{position:relative;z-index:2;width:min(1240px,100% - 3rem);height:100%;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem}
.band.l .bin{grid-template-columns:.95fr 1.05fr}.band.l .fig{order:-1}
.band .mono{color:inherit;opacity:.7}
.band h2{font-size:clamp(2.8rem,6.4vw,6rem);font-weight:500;letter-spacing:-.06em;line-height:.95;margin:1.2rem 0 1.6rem}
.band.blk h2{color:var(--coral)}
.band p{max-width:38ch;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.015em;line-height:1.45;opacity:.88}
.go{display:inline-flex;align-items:center;gap:1rem;margin-top:2.2rem;font:.78rem var(--m);letter-spacing:.14em;text-transform:uppercase}
.band .arrow{width:64px;height:64px;border-color:currentColor}.band .arrow svg{width:20px;transition:color .4s}
.band:hover .arrow{background:currentColor;transform:rotate(-45deg)}
.band.red:hover .arrow svg{color:var(--red)}.band.blk:hover .arrow svg{color:#121212}.band.cor:hover .arrow svg{color:var(--coral)}
.fig{justify-self:center;height:min(76svh,660px);aspect-ratio:4/5;position:relative;overflow:hidden;outline:1px solid currentColor;outline-offset:14px}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.band:hover .fig img{transform:scale(1.06)}
.fig::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px 14px rgba(10,10,10,.8);pointer-events:none}
.red .fig{border-radius:999px 999px 28px 28px}.blk .fig{border-radius:28px 220px 28px 28px}.cor .fig{border-radius:220px 28px 220px 28px}
.band .wave{position:absolute;left:0;right:0;bottom:5%;height:36%;margin:0;z-index:1;pointer-events:none}
.band .wave i,.wave i{transition:transform .25s ease-out}
.band .wave i{background:#121212;opacity:.2;animation-name:wv2}
@keyframes wv2{50%{height:100%}}
@media(max-width:900px){.band{position:relative;height:auto;padding:5rem 0;border-radius:28px 28px 0 0}.bin,.band.l .bin{grid-template-columns:1fr;gap:2.5rem}.band.l .fig{order:0}.fig{width:min(100%,360px);height:auto}}
/* sub pages */
.subwrap{position:relative;overflow:clip}.subwrap>.wrap{position:relative;z-index:2}
.sublive{opacity:.5;-webkit-mask-image:linear-gradient(#000 25%,transparent 95%);mask-image:linear-gradient(#000 25%,transparent 95%)}
.sub.flip{grid-template-columns:7fr 5fr}.sub.flip .cover{order:2}
@media(max-width:900px){.sub.flip{grid-template-columns:1fr}.sub.flip .cover{order:0}}
.flight{position:relative;height:46px;margin-top:1.2rem;border-bottom:1px dashed var(--line);overflow:hidden;max-width:560px}
.flight svg{position:absolute;bottom:-4px;left:0;width:34px;fill:var(--red);animation:fly 6s linear infinite}
@keyframes fly{from{transform:translateX(-50px) rotate(-6deg)}50%{transform:translate(240px,-12px) rotate(-14deg)}to{transform:translate(580px,0) rotate(-4deg)}}
#curtain{top:0;left:0;right:0;bottom:auto;height:100vh;height:100lvh}
#curtain.out{transform:translateY(-101%);visibility:hidden;transition:transform .9s var(--ease),visibility 0s .9s}
