@font-face{font-family:STA Display;src:url('/assets/fonts/InterDisplay-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:STA Display;src:url('/assets/fonts/InterDisplay-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:STA Display;src:url('/assets/fonts/InterDisplay-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:STA Display;src:url('/assets/fonts/InterDisplay-Bold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:STA Mono;src:url('/assets/fonts/Inter-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}

:root{
 --bg:#f5f3ef;--surface:rgba(255,255,255,.68);--surface-strong:#fff;
 --ink:#111113;--muted:#65646a;--line:rgba(17,17,19,.13);--line-strong:rgba(17,17,19,.22);
 --pink:#e33d73;--pink-soft:rgba(227,61,115,.12);--pink-glow:rgba(227,61,115,.22);
 --max:1440px;--pad:clamp(22px,4vw,68px);
 --ease:cubic-bezier(.16,1,.3,1);
 color-scheme:light;
}
html[data-theme=dark]{
 --bg:#08090b;--surface:rgba(18,20,24,.72);--surface-strong:#101216;
 --ink:#f4f3f1;--muted:#a2a2aa;--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.22);
 --pink:#ff4d83;--pink-soft:rgba(255,77,131,.12);--pink-glow:rgba(255,77,131,.2);
 color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);position:relative;font-family:"STA Display",Inter,Arial,sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden;transition:background .5s,color .5s}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:
 radial-gradient(circle at 15% 8%,var(--pink-soft),transparent 26%),
 radial-gradient(circle at 88% 22%,rgba(112,126,255,.07),transparent 24%),
 linear-gradient(180deg,rgba(255,255,255,.28),transparent 35%);pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:-2;opacity:.34;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 72%);-webkit-mask-image:linear-gradient(to bottom,black,transparent 72%)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{color:inherit}
.container{width:min(var(--max),calc(100% - var(--pad)*2));margin-inline:auto}
.skip{position:fixed;left:16px;top:16px;transform:translateY(-150%);z-index:9999;background:var(--ink);color:var(--bg);padding:10px 14px}.skip:focus{transform:none}
.top-progress{position:fixed;left:0;top:0;height:2px;width:0;background:var(--pink);z-index:9998;box-shadow:0 0 18px var(--pink-glow)}

.ambient-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.95}
.cursor-orb{position:fixed;left:0;top:0;width:18px;height:18px;border:1px solid var(--pink);border-radius:50%;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:multiply;transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
html[data-theme=dark] .cursor-orb{mix-blend-mode:screen}
.cursor-orb.is-link{width:56px;height:56px;background:var(--pink-soft);border-color:var(--pink)}
.cursor-label{position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);font:500 9px/1 "STA Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:0;color:var(--pink);transition:opacity .2s}

.site-loader{position:fixed;inset:0;z-index:10000;background:#0b0b0d;color:#f7f5f2;display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.site-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{width:min(620px,calc(100% - 48px))}
.loader-wordmark{font:500 clamp(28px,5vw,72px)/.9 "STA Display";letter-spacing:-.065em;text-transform:uppercase}
.loader-wordmark span{color:#a9a9b1}
.loader-line{height:1px;background:rgba(255,255,255,.16);margin-top:34px;overflow:hidden}
.loader-line:after{content:"";display:block;height:100%;width:42%;background:#ff4d83;animation:loadline 1.7s var(--ease) infinite}
.loader-meta{margin-top:13px;color:#777781;font:400 9px/1.4 "STA Mono";letter-spacing:.16em;text-transform:uppercase}
@keyframes loadline{from{transform:translateX(-110%)}to{transform:translateX(280%)}}

header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:transform .5s var(--ease),background .4s,border .4s}
header.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:auto;height:31px;max-width:180px;object-fit:contain}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-strong);font:600 11px/1 "STA Mono";letter-spacing:-.08em}
.brand>span>span{color:var(--muted);font-weight:400}
.navlinks{display:flex;align-items:center;gap:4px}
.navlink{position:relative;padding:9px 12px;font-size:12px;color:var(--muted);transition:color .25s}
.navlink:after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.navlink:hover,.navlink.active{color:var(--ink)}
.navlink:hover:after,.navlink.active:after{transform:scaleX(1);transform-origin:left}
.nav-services{position:relative}
.mega-wrap{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(10px);opacity:0;visibility:hidden;pointer-events:none;transition:.45s var(--ease)}
.nav-services:hover .mega-wrap,.nav-services:focus-within .mega-wrap{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega{width:min(820px,calc(100vw - 40px));padding:28px;background:color-mix(in srgb,var(--surface-strong) 90%,transparent);border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.12);backdrop-filter:blur(24px);display:grid;grid-template-columns:1fr 1.35fr;gap:30px}
.mega-intro h3{font-size:28px;line-height:1.05;letter-spacing:-.05em;margin:10px 0}.mega-intro p{font-size:13px;color:var(--muted);max-width:330px}.mega-grid{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--line);padding-left:24px}
.mega-item{padding:14px 16px;border-bottom:1px solid var(--line);transition:background .3s,transform .3s var(--ease)}.mega-item:hover{background:var(--pink-soft);transform:translateX(5px)}.mega-item strong{display:block;font-size:13px}.mega-item span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.nav-actions{display:flex;align-items:center;gap:10px}.theme,.menu{border:1px solid var(--line);background:transparent;padding:9px 12px;font-size:11px;cursor:pointer}.theme:hover,.menu:hover{border-color:var(--pink);color:var(--pink)}.menu{display:none}
.cta{display:inline-flex;align-items:center;gap:22px;background:var(--ink);color:var(--bg);padding:13px 17px;font-size:11px;font-weight:600;letter-spacing:.01em;border:1px solid var(--ink);transition:transform .35s var(--ease),background .3s,color .3s}
.cta span{font-size:16px;transition:transform .35s var(--ease)}.cta:hover{transform:translateY(-3px);background:var(--pink);border-color:var(--pink);color:white}.cta:hover span{transform:translate(4px,-4px)}
.secondary{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:5px;transition:color .25s,border-color .25s,transform .3s var(--ease)}.secondary:hover{color:var(--pink);border-color:var(--pink);transform:translateX(4px)}

.hero{min-height:100vh;display:flex;align-items:center;padding:150px 0 100px;position:relative}
.hero:before{content:"";position:absolute;left:calc(50% + 120px);top:20%;width:40vw;height:40vw;border:1px solid var(--line);border-radius:50%;opacity:.55;animation:orbit 28s linear infinite;pointer-events:none}.hero:after{content:"";position:absolute;left:calc(50% + 140px);top:23%;width:32vw;height:32vw;border:1px dashed var(--line);border-radius:50%;animation:orbit 18s linear infinite reverse;pointer-events:none}
@keyframes orbit{to{transform:rotate(360deg)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);gap:7vw;align-items:center}
.eyebrow,.kicker,.tag{font:500 9px/1.2 "STA Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:9px}.pulse{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 var(--pink-glow);animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(62px,8.6vw,132px);line-height:.82;letter-spacing:-.085em;font-weight:500;max-width:980px;margin:28px 0 34px}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink);opacity:.85}
.hero .lead{font-size:clamp(17px,1.7vw,22px);line-height:1.45;color:var(--muted);max-width:650px}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:34px}
.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.visual-panel{width:min(480px,100%);aspect-ratio:1;position:relative;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),transparent);backdrop-filter:blur(5px);overflow:hidden}
.visual-panel:before{content:"";position:absolute;inset:11%;border:1px solid var(--line);border-radius:50%;animation:spin 22s linear infinite}
.visual-panel:after{content:"";position:absolute;inset:28%;border:1px solid var(--pink);border-radius:50%;opacity:.5;animation:spin 12s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.visual-index{position:absolute;left:24px;top:22px;font:500 11px "STA Mono";color:var(--pink)}.visual-label{position:absolute;left:24px;bottom:24px;font:500 9px "STA Mono";letter-spacing:.13em;text-transform:uppercase;color:var(--muted);max-width:260px}
.visual-panel .node{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 24px var(--pink-glow);animation:floatnode 4s ease-in-out infinite}.visual-panel .n1{left:24%;top:30%}.visual-panel .n2{right:24%;top:42%;animation-delay:1s}.visual-panel .n3{left:44%;bottom:22%;animation-delay:2s}@keyframes floatnode{50%{transform:translate(8px,-12px)}}

.section{padding:clamp(90px,12vw,190px) 0;position:relative}
.section-head{display:grid;grid-template-columns:1fr .7fr;gap:80px;align-items:end;margin-bottom:56px}.section-head h2,.intro-band h2{font-size:clamp(42px,5vw,76px);line-height:.95;letter-spacing:-.065em;font-weight:500;margin:12px 0 0}.section-head>p{color:var(--muted);font-size:16px;max-width:560px;margin:0}
.intro-band{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:54px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.intro-band p{color:var(--muted);font-size:16px;max-width:580px}.intro-band .cta,.intro-band .secondary{margin-top:18px}
.service-list{border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:70px minmax(240px,.9fr) 1.1fr 45px;gap:24px;align-items:center;padding:27px 4px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:padding .45s var(--ease)}
.service:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--pink);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.service:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--pink-soft),transparent 55%);opacity:0;transition:opacity .45s}
.service:hover{padding-left:20px}.service:hover:before{transform:scaleY(1)}.service:hover:after{opacity:1}.service>*{position:relative;z-index:1}.service-num{font:500 10px "STA Mono";color:var(--pink)}.service h3{font-size:clamp(22px,2.4vw,34px);line-height:1;letter-spacing:-.045em;margin:0;font-weight:500}.service p{color:var(--muted);margin:0;font-size:13px}.arrow{font-size:24px;justify-self:end;transition:transform .4s var(--ease),color .25s}.service:hover .arrow{transform:translate(5px,-5px);color:var(--pink)}
.process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-step{padding:30px 26px 36px;border-right:1px solid var(--line);min-height:260px;position:relative}.process-step:last-child{border-right:0}.process-step:after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.process-step:hover:after{transform:scaleX(1)}.process-step .n{font:500 10px "STA Mono";color:var(--pink);letter-spacing:.1em}.process-step h3{font-size:28px;letter-spacing:-.04em;margin:60px 0 8px}.process-step p{color:var(--muted);font-size:13px;margin:0}
.case-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.case{padding:38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:330px;position:relative;transition:background .4s,transform .4s var(--ease)}.case:hover{background:var(--pink-soft);transform:translateY(-4px)}.case h3{font-size:32px;line-height:1.05;letter-spacing:-.05em;margin:22px 0 15px;font-weight:500}.case p{color:var(--muted);font-size:14px;max-width:650px}.result{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--pink)}
.page-hero{padding:200px 0 100px;min-height:62vh;display:flex;align-items:flex-end}.page-hero h1{font-size:clamp(58px,8vw,120px);line-height:.84;letter-spacing:-.085em;font-weight:500;max-width:1050px;margin:22px 0 25px}.page-hero p{font-size:19px;line-height:1.45;color:var(--muted);max-width:700px}
.packages{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.package{padding:36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:500px}.package.featured{background:var(--ink);color:var(--bg)}.package h3{font-size:31px;letter-spacing:-.05em;margin:0 0 16px}.price{font:500 10px "STA Mono";color:var(--pink);text-transform:uppercase;letter-spacing:.12em}.package p,.package li{color:var(--muted);font-size:13px}.package.featured p,.package.featured li{color:#aaa}.package ul{padding-left:18px;line-height:2;margin:25px 0 32px}.badge{display:inline-block;background:var(--pink);color:white;padding:6px 9px;font:500 9px "STA Mono";text-transform:uppercase;letter-spacing:.1em;margin-bottom:28px}
.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:1px;background:var(--line);border:1px solid var(--line)}.contact-card{background:var(--surface-strong);padding:clamp(28px,4vw,60px)}.contact-card h2{font-size:clamp(35px,4vw,60px);line-height:.98;letter-spacing:-.06em;font-weight:500;margin:18px 0 42px}.address{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}.address strong,.address span{display:block}.address strong{font-size:11px}.address span{font-size:13px;color:var(--muted);margin-top:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin-bottom:20px}.field label{display:block;font:500 9px "STA Mono";text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}.field input,.field textarea,.field select{width:100%;border:0;border-bottom:1px solid var(--line-strong);background:transparent;color:var(--ink);padding:12px 0;outline:none}.field textarea{min-height:120px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pink)}.hp{display:none!important}.form-status{font-size:12px;color:var(--muted);margin-top:12px}
.footer{padding:90px 0 35px;border-top:1px solid var(--line);margin-top:60px}.footer-grid{display:grid;grid-template-columns:1.5fr .5fr .7fr;gap:70px}.footer p{font-size:12px;color:var(--muted)}.footer strong{font:500 9px "STA Mono";letter-spacing:.1em;text-transform:uppercase}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-top:60px;font:400 9px "STA Mono";text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cookie{position:fixed;bottom:16px;left:16px;z-index:999;display:flex;align-items:center;gap:30px;padding:13px 16px;background:color-mix(in srgb,var(--surface-strong) 90%,transparent);border:1px solid var(--line);backdrop-filter:blur(18px);font-size:10px;max-width:600px}.cookie button{border:1px solid var(--line-strong);background:transparent;padding:7px 12px;cursor:pointer;font-size:10px}.fab{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;border:1px solid var(--pink);background:var(--pink);color:white;z-index:800;cursor:pointer;font-size:18px;box-shadow:0 15px 40px var(--pink-glow);transition:transform .35s var(--ease)}.fab:hover{transform:translateY(-5px) rotate(8deg)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.visible{opacity:1;transform:none}
@media(max-width:1050px){.navlinks{display:none}.menu{display:block}.hero-grid{grid-template-columns:1fr}.hero-visual{min-height:400px}.section-head,.intro-band{grid-template-columns:1fr;gap:22px}.service{grid-template-columns:55px 1fr 38px}.service p{grid-column:2}.process{grid-template-columns:1fr 1fr}.process-step:nth-child(2){border-right:0}.packages{grid-template-columns:1fr}.contact{grid-template-columns:1fr}}
@media(max-width:700px){:root{--pad:20px}.hero{padding-top:130px}.hero h1{font-size:clamp(50px,17vw,82px)}.hero-visual{min-height:320px}.visual-panel{width:320px}.section{padding:90px 0}.page-hero{padding-top:150px;min-height:auto}.page-hero h1{font-size:clamp(50px,16vw,78px)}.service{grid-template-columns:42px 1fr 30px;padding:22px 0}.service p{display:none}.service h3{font-size:22px}.process{grid-template-columns:1fr}.process-step{border-right:0;border-bottom:1px solid var(--line);min-height:210px}.case-grid{grid-template-columns:1fr}.case{padding:28px}.form-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:35px}.footer-bottom{display:block;line-height:2.2}.cookie{right:16px;max-width:none}.cursor-orb,.cursor-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.ambient-canvas{display:none}.reveal{opacity:1;transform:none}}

.mobile-nav-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(28px);z-index:1500;transform:translateY(-100%);transition:transform .7s var(--ease);display:none}.mobile-nav-overlay.open{transform:none}.mobile-nav-inner{height:100%;display:flex;flex-direction:column;padding:24px var(--pad)}.mobile-nav-top{display:flex;justify-content:space-between;font:500 9px "STA Mono";letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.mobile-nav-top button{border:0;background:transparent;font:500 10px "STA Mono";cursor:pointer}.mobile-nav-inner>a{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:18px 0;font-size:clamp(28px,8vw,50px);letter-spacing:-.05em}.mobile-nav-inner>a i{font:400 9px "STA Mono";color:var(--pink);font-style:normal}.mobile-nav-foot{margin-top:auto;font:400 9px "STA Mono";letter-spacing:.08em;color:var(--muted);text-transform:uppercase}@media(max-width:1050px){.mobile-nav-overlay{display:block}}

.system-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;overflow:hidden;white-space:nowrap;font:500 10px "STA Mono";letter-spacing:.08em}.system-strip span{transition:color .3s}.system-strip i{font-style:normal;color:var(--pink);opacity:.65}.system-strip:hover span{color:var(--muted)}.system-strip span:hover{color:var(--pink)}

/* V8 visual environment — deliberately visible, still restrained */
body:before{z-index:-4;content:"";position:fixed;inset:-20%;pointer-events:none;background:
radial-gradient(circle at 15% 15%,rgba(227,61,115,.16),transparent 24%),
radial-gradient(circle at 82% 18%,rgba(75,92,255,.10),transparent 22%),
radial-gradient(circle at 50% 78%,rgba(227,61,115,.07),transparent 28%);
filter:blur(8px);animation:ambientDrift 18s ease-in-out infinite alternate}
body:after{z-index:-3;content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:
linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px),transparent 100%),
linear-gradient(var(--line) 1px,transparent 1px);background-size:180px 180px,180px 180px;mask-image:linear-gradient(to bottom,black 0%,transparent 88%);-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 88%)}
main,.footer{position:relative;z-index:2}
header,.site-loader,.top-progress,.cursor-orb,.cursor-label,.fab,.cookie,.skip{z-index:1000}
@keyframes ambientDrift{0%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.05)}100%{transform:translate3d(-1%,2%,0) scale(1.02)}}

/* Stronger typographic character: display face + condensed UI rhythm */
.hero h1,.page-hero h1,.section-head h2,.intro-band h2,.process-step h3,.case h3,.package h3,.contact-card h2{
font-family:"STA Display", "Arial Narrow", sans-serif;
font-weight:500;
font-feature-settings:"ss01" 1,"ss02" 1,"kern" 1;
}
.hero h1{font-size:clamp(68px,9.5vw,148px);letter-spacing:-.095em}
.page-hero h1{font-size:clamp(64px,9vw,138px)}
.section-head h2,.intro-band h2{letter-spacing:-.075em}
.kicker,.eyebrow,.tag,.service-num,.process-step .n,.price,.badge,.visual-index,.visual-label,.loader-meta,.footer-bottom{
font-family:"STA Mono",ui-monospace,monospace;letter-spacing:.16em}
.navlink,.cta,.secondary,.theme,.menu{letter-spacing:.035em}

/* Make the hero environment feel dimensional */
.hero-visual{perspective:1200px}
.visual-panel{transform:rotateY(-8deg) rotateX(4deg);box-shadow:0 40px 100px rgba(0,0,0,.10),inset 0 0 80px var(--pink-soft);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.visual-panel:hover{transform:rotateY(-2deg) rotateX(1deg) translateY(-8px)}
.visual-panel:before{inset:8%;border-style:dashed}
.visual-panel:after{inset:26%;box-shadow:0 0 80px var(--pink-glow)}
.visual-panel .node{z-index:3}

/* Richer page surfaces */
.system-section{overflow:hidden}
.system-section:before{content:"";position:absolute;left:-10%;right:-10%;top:35%;height:1px;background:linear-gradient(90deg,transparent,var(--pink),transparent);opacity:.25}
.service{isolation:isolate}
.service:hover{background:linear-gradient(90deg,var(--pink-soft),transparent 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.case{overflow:hidden}
.case:before{content:"";position:absolute;width:260px;height:260px;right:-110px;top:-110px;border:1px solid var(--line);border-radius:50%;transition:transform .7s var(--ease),border-color .4s}
.case:hover:before{transform:scale(1.35);border-color:var(--pink)}

/* =========================================================
   SHREE V9 — PREMIUM / BOLD / ROOTED
   Visual language: Indian precision + global technology.
   ========================================================= */

:root{
  --saffron:#e46a2d;
  --ink-2:#25242a;
  --grid-heavy:rgba(17,17,19,.085);
}
html[data-theme=dark]{
  --saffron:#ff8a4a;
  --ink-2:#e8e4df;
  --grid-heavy:rgba(255,255,255,.085);
}

/* Architectural India-inspired linework: subtle, geometric, never ornamental. */
.culture-mark{
  position:absolute;right:0;top:0;width:170px;height:170px;opacity:.26;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 49%,var(--line) 50%,transparent 51%),
    linear-gradient(0deg,transparent 49%,var(--line) 50%,transparent 51%);
  background-size:34px 34px;
  mask-image:radial-gradient(circle,black 0 34%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle,black 0 34%,transparent 72%);
}
.culture-mark:before,.culture-mark:after{
  content:"";position:absolute;inset:28px;border:1px solid var(--pink);
  transform:rotate(45deg);opacity:.45;
}
.culture-mark:after{inset:46px;border-color:var(--saffron);transform:rotate(0deg)}

/* Premium scrolling signal */
.edge-signal{
  position:fixed;right:0;top:0;bottom:0;width:2px;z-index:1001;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--pink),var(--saffron),transparent);
  opacity:.45;transform-origin:top;transform:scaleY(0);
}

/* Hero becomes a living system */
.hero{isolation:isolate}
.hero .eyebrow{font-size:10px}
.hero h1{position:relative;text-wrap:balance}
.hero h1 .accent-word{color:var(--pink)}
.hero h1 .stroke-word{-webkit-text-stroke:1px var(--ink);color:transparent}
.hero .lead{max-width:700px}
.hero-visual:before{
  content:"SHREE / SYSTEM";
  position:absolute;right:0;top:10px;
  font:500 9px "STA Mono";letter-spacing:.18em;color:var(--muted);
  writing-mode:vertical-rl;opacity:.7;
}
.visual-panel{
  background:
    radial-gradient(circle at 50% 50%,var(--pink-soft),transparent 25%),
    linear-gradient(145deg,var(--surface),transparent 70%);
}
.visual-panel .india-axis{
  position:absolute;left:50%;top:10%;bottom:10%;width:1px;
  background:linear-gradient(to bottom,transparent,var(--saffron),var(--pink),transparent);
  opacity:.7;
}
.visual-panel .india-axis:after{
  content:"";position:absolute;left:-4px;top:50%;width:9px;height:9px;
  border:1px solid var(--saffron);transform:rotate(45deg);background:var(--bg);
}

/* Interactive capability system */
.service{cursor:none}
.service .service-meta{
  display:flex;align-items:center;gap:10px;margin-top:10px;font:500 8px "STA Mono";
  color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
}
.service .service-meta b{font-weight:500;color:var(--saffron)}
.service:hover h3{letter-spacing:-.035em}
.service:hover .service-num{color:var(--saffron)}

/* Horizontal marquee */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;margin-top:30px;
}
.marquee-track{
  display:flex;width:max-content;gap:34px;align-items:center;
  animation:staMarquee 28s linear infinite;
}
.marquee span{
  font:500 10px "STA Mono";letter-spacing:.16em;color:var(--muted);text-transform:uppercase;
}
.marquee .dot{width:5px;height:5px;background:var(--pink);border-radius:50%;box-shadow:0 0 14px var(--pink-glow)}
@keyframes staMarquee{to{transform:translateX(-50%)}}

/* Scroll-driven philosophy panel */
.philosophy{
  min-height:68vh;display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;
  align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.philosophy-quote{
  font-size:clamp(46px,6vw,88px);line-height:.9;letter-spacing:-.075em;margin:0;font-weight:500;
}
.philosophy-quote em{font-style:normal;color:var(--pink)}
.philosophy-stack{display:grid;gap:0}
.philosophy-item{
  display:grid;grid-template-columns:55px 1fr 30px;align-items:center;gap:18px;
  padding:25px 0;border-bottom:1px solid var(--line);transition:padding .45s var(--ease),background .4s;
}
.philosophy-item:first-child{border-top:1px solid var(--line)}
.philosophy-item:hover{padding-left:18px;background:linear-gradient(90deg,var(--pink-soft),transparent)}
.philosophy-item b{font:500 9px "STA Mono";color:var(--pink)}
.philosophy-item strong{font-size:22px;font-weight:500;letter-spacing:-.035em}
.philosophy-item span{font-size:18px;color:var(--muted);transition:transform .3s}
.philosophy-item:hover span{transform:translate(5px,-5px);color:var(--pink)}

/* Rooted / global statement */
.roots{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.roots-card{background:var(--surface-strong);padding:clamp(32px,5vw,70px);min-height:360px;position:relative;overflow:hidden}
.roots-card:first-child{background:linear-gradient(135deg,var(--ink),#1b1b20);color:var(--bg)}
.roots-card:first-child p{color:#aaa}
.roots-card h3{font-size:clamp(34px,4vw,60px);line-height:.95;letter-spacing:-.065em;font-weight:500;margin:20px 0}
.roots-card p{max-width:520px;color:var(--muted)}
.roots-card .devanagari{
  position:absolute;right:25px;bottom:18px;font-size:70px;line-height:1;opacity:.08;
  font-family:serif;user-select:none;
}
.roots-card .coordinate{
  position:absolute;right:26px;top:26px;font:500 8px "STA Mono";color:var(--pink);letter-spacing:.13em;
}

/* More sophisticated cards */
.case,.package{transform-style:preserve-3d}
.case:hover,.package:hover{transform:translateY(-5px)}
.case .case-index{
  font:500 9px "STA Mono";letter-spacing:.12em;color:var(--saffron);
}

/* Contact as final statement */
.contact-card:first-child{
  background:
    radial-gradient(circle at 80% 20%,var(--pink-soft),transparent 30%),
    var(--surface-strong);
}

/* Make buttons more physical */
.cta{position:relative;overflow:hidden}
.cta:before{
  content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.cta:hover:before{transform:translateX(120%)}
.cta>*{position:relative}

/* Responsive */
@media(max-width:850px){
  .philosophy,.roots{grid-template-columns:1fr}
  .philosophy{min-height:auto;padding:70px 0}
  .philosophy-quote{margin-bottom:35px}
  .roots-card{min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}

/* V11 — living digital environment */
:root{--v11-cyan:#42d9ff;--v11-violet:#7668ff;--v11-orange:#ff8a4a}
body{isolation:isolate}
body:before{z-index:-8!important;content:"";position:fixed;inset:-25%;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(227,61,115,.14),transparent 19%),radial-gradient(circle at 85% 15%,rgba(118,104,255,.12),transparent 22%),radial-gradient(circle at 15% 80%,rgba(66,217,255,.08),transparent 21%),conic-gradient(from 0deg at 50% 50%,transparent 0 72%,rgba(227,61,115,.05) 78%,transparent 84%);filter:blur(18px);animation:v11Atmos 24s ease-in-out infinite alternate}
body:after{z-index:-7!important;opacity:.26!important;background-image:linear-gradient(115deg,transparent 0 48%,var(--line) 49%,transparent 50%),linear-gradient(65deg,transparent 0 48%,var(--line) 49%,transparent 50%)!important;background-size:110px 110px,170px 170px!important;mask-image:radial-gradient(ellipse at center,black 15%,transparent 80%);animation:v11Grid 30s linear infinite}
@keyframes v11Atmos{0%{transform:translate(-2%,-1%) scale(1)}50%{transform:translate(2%,2%) scale(1.05)}100%{transform:translate(-1%,3%) scale(1.02)}}@keyframes v11Grid{to{background-position:110px 110px,-170px 170px}}
.v11-light{position:fixed;inset:0;z-index:-5;pointer-events:none;overflow:hidden}
.v11-beam{position:absolute;width:48vw;height:1px;background:linear-gradient(90deg,transparent,var(--pink),var(--v11-cyan),transparent);opacity:.22}
.v11-beam.a{left:-10vw;top:25%;transform:rotate(-24deg);animation:b1 13s ease-in-out infinite}.v11-beam.b{right:-12vw;top:62%;transform:rotate(28deg);animation:b2 17s ease-in-out infinite}.v11-beam.c{left:15%;top:82%;transform:rotate(-8deg);opacity:.14;animation:b3 20s ease-in-out infinite}
@keyframes b1{50%{transform:rotate(-20deg) translateX(20vw);opacity:.34}}@keyframes b2{50%{transform:rotate(20deg) translateX(-20vw);opacity:.32}}@keyframes b3{50%{transform:rotate(-2deg) translateX(18vw)}}
.v11-p{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--pink);box-shadow:0 0 15px var(--pink-glow);opacity:.4;animation:float var(--d) ease-in-out infinite alternate}
@keyframes float{to{transform:translate(var(--x),var(--y)) scale(1.6);opacity:.08}}
.section{position:relative;overflow:hidden}.section:not(.hero):after{content:"";position:absolute;width:360px;height:360px;right:-200px;bottom:-210px;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 70px color-mix(in srgb,var(--line) 18%,transparent),0 0 0 140px color-mix(in srgb,var(--line) 9%,transparent);opacity:.3;animation:portal 20s linear infinite;pointer-events:none}
@keyframes portal{to{transform:rotate(360deg)}}
.v11-hud{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:9px 0;font:500 7px "STA Mono";letter-spacing:.15em;color:var(--muted);text-transform:uppercase}.v11-hud b{color:var(--pink)}
@media(prefers-reduced-motion:reduce){body:before,.v11-beam,.v11-p,.section:not(.hero):after{animation:none!important}}

/* =========================================================
   SHREE V12 — SIGNATURE EXPERIENCE
   Premium / Bold / Rooted / Vendor-neutral / Hands-on
   ========================================================= */
:root{
  --v12-cyan:#45d9ff;
  --v12-violet:#7768ff;
  --v12-orange:#e46a2d;
  --v12-green:#45c88a;
  --v12-black:#0c0c10;
}
html[data-theme=dark]{
  --v12-cyan:#63e5ff;
  --v12-violet:#978cff;
  --v12-orange:#ff9a62;
  --v12-green:#63d9a0;
}

/* ---------- Global depth ---------- */
body{
  background:
    radial-gradient(circle at 15% 5%, rgba(227,61,115,.065), transparent 24%),
    radial-gradient(circle at 90% 30%, rgba(119,104,255,.055), transparent 22%),
    var(--bg);
}
main{overflow:hidden}
.section{isolation:isolate}
.section .container{z-index:3}
.section:after{z-index:0}

/* ---------- Premium grain / scan texture ---------- */
body .v12-grain{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
html[data-theme=dark] body .v12-grain{mix-blend-mode:screen;opacity:.035}

/* ---------- Homepage hero ---------- */
.hero{
  min-height:calc(100vh - 90px);
  display:grid;align-items:center;
  padding-top:clamp(70px,10vh,140px);
  padding-bottom:clamp(70px,10vh,130px);
}
.hero .container{position:relative}
.hero-copy{position:relative;z-index:8}
.hero h1{
  max-width:980px;
  font-size:clamp(68px,9vw,156px);
  line-height:.86;
  letter-spacing:-.095em;
}
.hero h1 .hero-line{display:block;overflow:hidden}
.hero h1 .hero-line span{display:inline-block}
.hero h1 .hero-accent{
  color:var(--pink);
  position:relative;
}
.hero h1 .hero-accent:after{
  content:"";
  position:absolute;left:0;right:12%;bottom:-8px;height:1px;
  background:linear-gradient(90deg,var(--pink),var(--v12-orange),transparent);
  transform:scaleX(.15);transform-origin:left;
  transition:transform .8s var(--ease);
}
.hero:hover h1 .hero-accent:after{transform:scaleX(1)}

.hero .lead{
  max-width:640px;
  font-size:clamp(16px,1.45vw,21px);
  line-height:1.6;
}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;
}
.hero-proof span{
  border:1px solid var(--line);padding:9px 11px;
  font:500 8px "STA Mono";letter-spacing:.12em;color:var(--muted);
  background:color-mix(in srgb,var(--surface) 65%,transparent);
  backdrop-filter:blur(10px);
}
.hero-proof span b{color:var(--pink);font-weight:500}

/* ---------- Hero system: provider-neutral decision engine ---------- */
.v12-engine{
  position:absolute;right:-3%;top:50%;width:min(620px,48vw);aspect-ratio:1;
  transform:translateY(-50%);
  z-index:4;pointer-events:auto;
}
.v12-engine:before{
  content:"";position:absolute;inset:2%;border-radius:50%;
  background:radial-gradient(circle,var(--pink-soft),transparent 55%);
  filter:blur(12px);opacity:.7;
  animation:v12Pulse 7s ease-in-out infinite;
}
@keyframes v12Pulse{50%{transform:scale(1.13);opacity:.4}}
.engine-orbit{
  position:absolute;inset:8%;border:1px solid var(--line);border-radius:50%;
  animation:v12Rotate 26s linear infinite;
}
.engine-orbit.o2{inset:19%;border-style:dashed;animation-duration:18s;animation-direction:reverse}
.engine-orbit.o3{inset:32%;border-color:color-mix(in srgb,var(--pink) 55%,var(--line));animation-duration:12s}
@keyframes v12Rotate{to{transform:rotate(360deg)}}
.engine-axis{
  position:absolute;left:50%;top:3%;bottom:3%;width:1px;
  background:linear-gradient(transparent,var(--pink),var(--v12-orange),transparent);
  opacity:.4;
}
.engine-axis.x{top:50%;left:3%;right:3%;bottom:auto;width:auto;height:1px}
.engine-core{
  position:absolute;left:50%;top:50%;width:32%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 38% 32%,#fff 0 4%,var(--pink-soft) 14%,transparent 62%),var(--surface-strong);
  border:1px solid var(--pink);
  box-shadow:0 0 80px var(--pink-glow),inset 0 0 45px var(--pink-soft);
}
.engine-core strong{
  font-size:clamp(26px,3vw,44px);letter-spacing:-.06em;font-weight:500;
}
.engine-core small{
  display:block;font:500 7px "STA Mono";letter-spacing:.16em;color:var(--muted);margin-top:3px;
}
.engine-node{
  position:absolute;left:50%;top:-5px;width:11px;height:11px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 24px var(--pink-glow);
  transform:translateX(-50%);
}
.engine-node.green{background:var(--v12-green);box-shadow:0 0 24px rgba(69,200,138,.45)}
.engine-node.orange{background:var(--v12-orange);box-shadow:0 0 24px rgba(228,106,45,.45)}
.engine-node.violet{background:var(--v12-violet);box-shadow:0 0 24px rgba(119,104,255,.45)}
.engine-label{
  position:absolute;padding:9px 11px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface-strong) 78%,transparent);
  backdrop-filter:blur(12px);font:500 7px "STA Mono";letter-spacing:.12em;
  color:var(--muted);white-space:nowrap;transition:.35s var(--ease);
}
.engine-label:hover{border-color:var(--pink);color:var(--ink);transform:translateY(-4px)}
.el1{left:-4%;top:24%}.el2{right:-4%;top:32%}.el3{right:4%;bottom:19%}.el4{left:1%;bottom:13%}
.engine-readout{
  position:absolute;left:50%;bottom:-9%;transform:translateX(-50%);
  display:flex;gap:20px;white-space:nowrap;
  font:500 7px "STA Mono";letter-spacing:.14em;color:var(--muted);
}
.engine-readout b{color:var(--pink);font-weight:500}
.engine-arc{
  position:absolute;inset:2%;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--v12-cyan);
  border-right-color:var(--v12-cyan);
  transform:rotate(26deg);opacity:.45;
  animation:v12Rotate 9s linear infinite reverse;
}

/* ---------- Provider-neutral statement ---------- */
.neutrality{
  position:relative;padding:clamp(85px,11vw,160px) 0;
  background:
    linear-gradient(90deg,transparent,var(--pink-soft),transparent),
    var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.neutrality-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,130px);align-items:center;
}
.neutrality-title{
  font-size:clamp(48px,6vw,92px);line-height:.9;letter-spacing:-.075em;font-weight:500;margin:0;
}
.neutrality-title em{font-style:normal;color:var(--pink)}
.provider-network{
  position:relative;min-height:410px;
  border:1px solid var(--line);
  background:
    linear-gradient(90deg,transparent 49.8%,var(--line) 50%,transparent 50.2%),
    linear-gradient(transparent 49.8%,var(--line) 50%,transparent 50.2%);
  background-size:82px 82px;
  overflow:hidden;
}
.provider-network:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,var(--pink-soft),transparent 32%);
}
.network-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:115px;height:115px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--ink);color:var(--bg);border:1px solid var(--pink);
  box-shadow:0 0 60px var(--pink-glow);
  z-index:4;
}
.network-center b{font:500 13px "STA Mono";letter-spacing:.08em}
.network-center small{display:block;color:#aaa;font:500 7px "STA Mono";letter-spacing:.12em}
.network-node{
  position:absolute;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:1px solid var(--line);background:var(--surface-strong);
  font:500 7px "STA Mono";letter-spacing:.08em;color:var(--muted);z-index:3;
  transition:.5s var(--ease);
}
.network-node:hover{border-color:var(--pink);color:var(--ink);box-shadow:0 0 40px var(--pink-soft);transform:scale(1.08)}
.nn1{left:8%;top:12%}.nn2{right:8%;top:16%}.nn3{right:10%;bottom:12%}.nn4{left:7%;bottom:15%}
.network-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--pink),transparent);transform-origin:left;opacity:.45;z-index:2}
.nl1{left:20%;top:26%;width:31%;transform:rotate(24deg)}
.nl2{left:50%;top:30%;width:31%;transform:rotate(-18deg)}
.nl3{left:49%;top:55%;width:34%;transform:rotate(21deg)}
.nl4{left:20%;top:64%;width:31%;transform:rotate(-20deg)}

/* ---------- Industry experiences ---------- */
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.industry{
  position:relative;min-height:430px;padding:34px;background:var(--surface-strong);
  overflow:hidden;cursor:pointer;
}
.industry:before{
  content:"";position:absolute;inset:0;
  background:
   radial-gradient(circle at 70% 20%,var(--pink-soft),transparent 25%),
   linear-gradient(135deg,transparent 45%,rgba(255,255,255,.04));
  opacity:.45;transition:opacity .6s;
}
.industry:hover:before{opacity:1}
.industry .ind-number{font:500 8px "STA Mono";color:var(--pink);letter-spacing:.16em}
.industry h3{font-size:clamp(34px,3vw,52px);line-height:.9;letter-spacing:-.06em;font-weight:500;max-width:280px;position:relative}
.industry p{position:relative;color:var(--muted);max-width:310px}
.industry-visual{position:absolute;right:-8%;bottom:-7%;width:72%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);transition:.7s var(--ease)}
.industry-visual:before,.industry-visual:after{
 content:"";position:absolute;left:50%;top:50%;border:1px solid var(--pink);
 transform:translate(-50%,-50%) rotate(45deg);
}
.industry-visual:before{width:45%;height:45%}.industry-visual:after{width:24%;height:24%;border-color:var(--v12-orange)}
.industry:hover .industry-visual{transform:rotate(18deg) scale(1.08);border-color:var(--pink)}
.industry-tags{position:absolute;left:34px;bottom:28px;display:flex;gap:7px;flex-wrap:wrap;max-width:70%}
.industry-tags span{padding:7px 8px;border:1px solid var(--line);font:500 7px "STA Mono";letter-spacing:.1em;color:var(--muted)}

/* ---------- Case study editorial treatment ---------- */
.case-grid{display:grid;gap:1px;background:var(--line)}
.case-feature{
  display:grid;grid-template-columns:1fr 1fr;min-height:510px;background:var(--surface-strong);
}
.case-feature .case-copy{padding:clamp(35px,5vw,75px);display:flex;flex-direction:column;justify-content:center}
.case-feature .case-copy h3{font-size:clamp(42px,5vw,72px);line-height:.92;letter-spacing:-.065em;font-weight:500}
.case-feature .case-copy p{color:var(--muted);max-width:520px}
.case-visual{
  position:relative;overflow:hidden;
  background:
   radial-gradient(circle at 50% 50%,var(--pink-soft),transparent 35%),
   linear-gradient(145deg,var(--surface),var(--surface-strong));
}
.case-visual .ring{position:absolute;border:1px solid var(--line);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);animation:v12Rotate 20s linear infinite}
.case-visual .ring.r1{width:72%;height:72%}.case-visual .ring.r2{width:52%;height:52%;animation-direction:reverse}.case-visual .ring.r3{width:29%;height:29%;border-color:var(--pink)}
.case-visual .case-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;background:var(--ink);border:1px solid var(--pink);box-shadow:0 0 50px var(--pink-glow)}
.case-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}
.case-meta span{font:500 7px "STA Mono";letter-spacing:.13em;color:var(--muted);border:1px solid var(--line);padding:8px 9px}
.case-meta span:first-child{color:var(--pink);border-color:var(--pink-soft)}

/* ---------- CTA ---------- */
.final-cta{
  min-height:70vh;display:grid;place-items:center;text-align:center;
  position:relative;
  background:
    radial-gradient(circle at center,var(--pink-soft),transparent 36%),
    linear-gradient(180deg,transparent,var(--surface));
}
.final-cta h2{font-size:clamp(58px,8vw,128px);line-height:.84;letter-spacing:-.09em;font-weight:500;max-width:1100px;margin:15px auto 30px}
.final-cta h2 em{font-style:normal;color:var(--pink)}
.final-cta .cta-orbit{position:absolute;width:min(720px,80vw);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;animation:v12Rotate 35s linear infinite;pointer-events:none}
.final-cta .cta-orbit:before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 20px var(--pink-glow)}
.final-cta .cta-content{position:relative;z-index:3}

/* ---------- responsive ---------- */
@media(max-width:950px){
 .v12-engine{position:relative;right:auto;top:auto;transform:none;width:min(620px,92vw);margin:50px auto 0}
 .hero{display:block}
 .hero-copy{padding-top:25px}
 .neutrality-grid{grid-template-columns:1fr}
 .industry-grid{grid-template-columns:1fr}
 .case-feature{grid-template-columns:1fr}
 .case-visual{min-height:390px}
}
@media(prefers-reduced-motion:reduce){
 .engine-orbit,.engine-arc,.case-visual .ring,.final-cta .cta-orbit{animation:none}
}

/* =========================================================
   SHREE V13 — BRAND LOCK
   White + Signature Pink. Premium editorial technology.
   ========================================================= */
:root{
  --brand-pink:#f02a7b;
  --brand-pink-2:#ff4f9a;
  --brand-pink-soft:rgba(240,42,123,.12);
  --brand-pink-glow:rgba(240,42,123,.34);
  --brand-white:#fff;
  --brand-ink:#0a0a0d;
  --brand-muted:#9b9ba4;
  --brand-line:rgba(255,255,255,.105);
}
html[data-theme=dark]{
  --brand-pink:#ff3f91;
  --brand-pink-2:#ff72ad;
}

/* Never allow the brand identity to become a black wordmark. */
.site-logo,.site-logo *,header .logo,header .logo *,.brand,.brand *{
  color:#fff !important;
}
.site-logo em,.site-logo .accent,header .logo em,header .logo .accent{
  color:var(--brand-pink) !important;
}

/* Deep premium canvas — pink is the signature, not decoration. */
body{
  color:#fff;
  background:
    radial-gradient(ellipse 70% 45% at 78% 4%,rgba(240,42,123,.11),transparent 60%),
    radial-gradient(ellipse 50% 55% at 8% 70%,rgba(240,42,123,.055),transparent 65%),
    #09090c;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}
.v13-light{
  position:fixed;width:38vw;height:38vw;max-width:620px;max-height:620px;
  border-radius:50%;pointer-events:none;z-index:-2;
  background:radial-gradient(circle,var(--brand-pink-glow),transparent 65%);
  filter:blur(35px);opacity:.25;transform:translate(-50%,-50%);
  transition:left .7s cubic-bezier(.2,.7,.2,1),top .7s cubic-bezier(.2,.7,.2,1);
}
.v13-status{
  position:fixed;right:22px;bottom:20px;z-index:30;
  font:500 7px "STA Mono";letter-spacing:.16em;color:#777;
  padding:9px 10px;border:1px solid var(--brand-line);
  background:rgba(8,8,11,.68);backdrop-filter:blur(12px);
}
.v13-status b{color:var(--brand-pink);font-weight:500}

/* Headings — editorial, compressed, unmistakably premium. */
h1,h2,h3,h4{
  color:#fff;
  font-weight:500;
  letter-spacing:-.07em;
}
h1 em,h2 em,h3 em,.accent-word,.hero-accent{
  color:var(--brand-pink) !important;
}
.kicker{
  color:var(--brand-pink) !important;
  font-family:"STA Mono",monospace;
  letter-spacing:.18em;
}

/* Buttons / links */
.cta{
  background:var(--brand-pink) !important;
  color:#fff !important;
  border-color:var(--brand-pink) !important;
  box-shadow:0 10px 45px rgba(240,42,123,.18);
}
.cta:hover{box-shadow:0 15px 65px rgba(240,42,123,.32);transform:translateY(-2px)}
.secondary:hover{color:var(--brand-pink) !important}

/* Navigation gets a premium active indicator. */
header{
  background:rgba(8,8,11,.58) !important;
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}
nav a{color:#b9b9c2 !important}
nav a:hover,nav a.active{color:#fff !important}
nav a.active:after{
  background:var(--brand-pink) !important;
  box-shadow:0 0 15px var(--brand-pink-glow);
}

/* Signature underline / section dividers */
.section-head{border-bottom-color:var(--brand-line) !important}
.section-head h2:after{
  background:linear-gradient(90deg,var(--brand-pink),transparent) !important;
}

/* Cards: no loud rectangular glow. Elevate via light, border and depth. */
.card,.service-card,.industry,.case-feature,.project-card,.contact-card{
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
  border-color:var(--brand-line) !important;
}
.card:hover,.service-card:hover,.industry:hover,.project-card:hover{
  border-color:rgba(240,42,123,.42) !important;
  box-shadow:0 24px 90px rgba(0,0,0,.28),0 0 55px rgba(240,42,123,.075);
}

/* V13 section signature */
.v13-section-marker{
  display:flex;align-items:center;gap:12px;
  font:500 7px "STA Mono";letter-spacing:.16em;color:#707079;
  margin-bottom:18px;
}
.v13-section-marker:before{
  content:"";width:28px;height:1px;background:var(--brand-pink);
  box-shadow:0 0 12px var(--brand-pink-glow);
}
.v13-big-statement{
  font-size:clamp(55px,7.6vw,128px);line-height:.86;
  letter-spacing:-.09em;max-width:1100px;
}
.v13-big-statement span{color:var(--brand-pink)}

/* The solution engine: all system highlights use the same brand pink. */
.v12-engine .engine-node,
.v12-engine .engine-node.green,
.v12-engine .engine-node.orange,
.v12-engine .engine-node.violet{
  background:var(--brand-pink);
  box-shadow:0 0 25px var(--brand-pink-glow);
}
.v12-engine .engine-orbit.o2,
.v12-engine .engine-orbit.o3{border-color:rgba(240,42,123,.45)}
.v12-engine .engine-core{
  border-color:var(--brand-pink);
  box-shadow:0 0 85px var(--brand-pink-glow),inset 0 0 50px var(--brand-pink-soft);
}
.v12-engine .engine-axis{background:linear-gradient(transparent,var(--brand-pink),transparent)}
.v12-engine .engine-arc{border-top-color:var(--brand-pink);border-right-color:var(--brand-pink)}
.v12-engine .engine-readout b{color:var(--brand-pink)}
.v12-engine .engine-label:hover{border-color:var(--brand-pink);color:#fff}

/* Industry visual systems use pink as the single signature signal. */
.industry-visual:before,.industry-visual:after{border-color:var(--brand-pink)}
.industry:hover .industry-visual{border-color:var(--brand-pink)}
.industry .ind-number{color:var(--brand-pink)}

/* Case studies */
.case-meta span:first-child{color:var(--brand-pink);border-color:rgba(240,42,123,.24)}
.case-visual .ring.r3,.case-visual .case-core{border-color:var(--brand-pink)}
.case-visual .case-core{box-shadow:0 0 55px var(--brand-pink-glow)}

/* Footer identity */
footer .logo,footer .logo *{color:#fff !important}
footer .logo em,footer .logo .accent{color:var(--brand-pink) !important}

/* Mobile */
@media(max-width:700px){
  .v13-status{display:none}
  body:before{background-size:56px 56px}
}
@media(prefers-reduced-motion:reduce){
  .v13-light{display:none}
}

/* =========================================================
   SHREE V14 — BUG FIX / POLISH LAYER
   ========================================================= */
:root{
 --bg:#f6f4f0;--surface:rgba(255,255,255,.82);--surface-strong:#fff;
 --ink:#141419;--muted:#66656c;--line:rgba(20,20,25,.12);--line-strong:rgba(20,20,25,.2);
 --pink:#e92f73;--pink-soft:rgba(233,47,115,.10);--pink-glow:rgba(233,47,115,.2);
 color-scheme:light;
}
html[data-theme="dark"]{
 --bg:#08090b;--surface:rgba(18,20,24,.74);--surface-strong:#101216;
 --ink:#f5f4f2;--muted:#a3a2aa;--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.22);
 --pink:#ff3f88;--pink-soft:rgba(255,63,136,.12);--pink-glow:rgba(255,63,136,.24);
 color-scheme:dark;
}
/* Light mode is actually light. Header remains a dark brand rail so the white/pink identity stays visible. */
html:not([data-theme="dark"]) body{background:var(--bg);color:var(--ink)}
html:not([data-theme="dark"]) body:before{background:
 radial-gradient(circle at 78% 4%,rgba(233,47,115,.08),transparent 28%),
 radial-gradient(circle at 8% 72%,rgba(130,120,255,.045),transparent 28%),
 linear-gradient(180deg,rgba(255,255,255,.72),transparent 45%)}
html:not([data-theme="dark"]) body:after{opacity:.22}
html:not([data-theme="dark"]) header{background:rgba(10,10,13,.96)!important;border-bottom:1px solid rgba(255,255,255,.09)!important}
html:not([data-theme="dark"]) header .brand,html:not([data-theme="dark"]) header .brand>span{color:#fff!important}
html:not([data-theme="dark"]) header .brand>span>span{color:#e8e8ec!important}
html:not([data-theme="dark"]) header .navlink{color:#bdbdc5!important}
html:not([data-theme="dark"]) header .navlink:hover,html:not([data-theme="dark"]) header .navlink.active{color:#fff!important}
html:not([data-theme="dark"]) header .theme,html:not([data-theme="dark"]) header .menu{color:#fff;border-color:rgba(255,255,255,.18)}
html:not([data-theme="dark"]) header .cta{background:var(--pink)!important;color:#fff!important;border-color:var(--pink)!important}
html:not([data-theme="dark"]) .mega{background:#121216;color:#fff;border-color:rgba(255,255,255,.12)}
html:not([data-theme="dark"]) .mega-item strong{color:#fff}
/* Remove legacy atmospheric layers that were causing the phantom element under the nav. */
.v11-light,.v13-status{display:none!important}
.hero:before,.hero:after{display:none!important}
/* Smoother hero system — fewer simultaneous motions, no pointer rotation. */
.v12-engine{transform:translateY(-50%)!important;will-change:auto}
.v12-engine:before{animation:v14Breath 8s ease-in-out infinite;opacity:.55}
@keyframes v14Breath{0%,100%{transform:scale(.96);opacity:.45}50%{transform:scale(1.04);opacity:.7}}
.v12-engine .engine-orbit{animation:v14Orbit 34s linear infinite}
.v12-engine .engine-orbit.o2{animation-duration:44s;animation-direction:reverse}
.v12-engine .engine-orbit.o3{animation-duration:56s}
@keyframes v14Orbit{to{transform:rotate(360deg)}}
.v12-engine .engine-arc{animation:v14Orbit 42s linear infinite reverse;opacity:.35}
.v12-engine .engine-label{transition:transform .35s ease,border-color .35s ease,color .35s ease;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.engine-core{animation:none!important}
@media(max-width:950px){.v12-engine{transform:none!important}.v12-engine:before{animation:none}.engine-orbit,.engine-arc{animation-duration:50s}}
/* Scheduler */
.booking-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
.booking-copy,.booking-widget{background:var(--surface-strong);padding:clamp(28px,4vw,55px)}
.booking-copy h3{font-size:clamp(36px,4vw,58px);line-height:.92;margin:12px 0 20px}
.booking-copy p{color:var(--muted);max-width:520px}
.booking-points{display:grid;gap:12px;margin-top:28px}
.booking-point{display:flex;gap:12px;align-items:flex-start;font-size:12px;color:var(--muted)}
.booking-point b{color:var(--pink);font:500 9px "STA Mono";letter-spacing:.1em}
.booking-widget{min-width:0}
.booking-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.booking-title strong{font-size:16px}.booking-title span{font:500 8px "STA Mono";color:var(--muted);letter-spacing:.1em}
.booking-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.booking-month button{width:34px;height:34px;border:1px solid var(--line);background:transparent;cursor:pointer}.booking-month button:hover{border-color:var(--pink);color:var(--pink)}
.booking-month strong{font-size:13px}
.booking-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.booking-day-name{text-align:center;font:500 7px "STA Mono";letter-spacing:.08em;color:var(--muted);padding:6px 0}
.booking-day{min-height:38px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;font-size:11px}
.booking-day:hover{border-color:var(--pink);color:var(--pink)}
.booking-day.is-muted{opacity:.28;pointer-events:none}.booking-day.is-past{opacity:.2;pointer-events:none}.booking-day.is-selected{background:var(--pink);border-color:var(--pink);color:#fff}
.booking-times{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px;max-height:235px;overflow:auto;padding-right:3px}
.booking-time{padding:11px 8px;border:1px solid var(--line);background:transparent;cursor:pointer;font:500 8px "STA Mono";letter-spacing:.06em;color:var(--ink)}
.booking-time:hover,.booking-time.is-selected{border-color:var(--pink);background:var(--pink-soft);color:var(--pink)}
.booking-form{display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.booking-form input{width:100%;border:1px solid var(--line);background:transparent;color:var(--ink);padding:12px 13px;outline:none}.booking-form input:focus{border-color:var(--pink)}
.booking-form button{width:100%;justify-content:center}
.booking-status{min-height:20px;font-size:11px;color:var(--muted);margin-top:8px}.booking-status.success{color:var(--pink)}
.contact-email{color:var(--pink)!important;text-decoration:underline;text-decoration-color:rgba(233,47,115,.3);text-underline-offset:4px}
@media(max-width:850px){.booking-shell{grid-template-columns:1fr}.booking-copy{padding-bottom:25px}}

/* =========================================================
   V15 FIX — RESTORE LIGHT-MODE TYPOGRAPHIC CONTRAST
   Large editorial text must return to the original black/ink treatment.
   ========================================================= */
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4,
html:not([data-theme="dark"]) .hero h1,
html:not([data-theme="dark"]) .section-head h2,
html:not([data-theme="dark"]) .intro-band h2,
html:not([data-theme="dark"]) .service h3,
html:not([data-theme="dark"]) .case h3,
html:not([data-theme="dark"]) .case-feature .case-copy h3,
html:not([data-theme="dark"]) .industry h3,
html:not([data-theme="dark"]) .process-step h3,
html:not([data-theme="dark"]) .mega-intro h3,
html:not([data-theme="dark"]) .v13-big-statement{
  color:var(--ink) !important;
}
html:not([data-theme="dark"]) .hero h1 .hero-accent,
html:not([data-theme="dark"]) h1 em,
html:not([data-theme="dark"]) h2 em,
html:not([data-theme="dark"]) h3 em,
html:not([data-theme="dark"]) .accent-word,
html:not([data-theme="dark"]) .v13-big-statement span,
html:not([data-theme="dark"]) .kicker,
html:not([data-theme="dark"]) .eyebrow,
html:not([data-theme="dark"]) .service-num,
html:not([data-theme="dark"]) .ind-number{
  color:var(--pink) !important;
}
html:not([data-theme="dark"]) .hero h1 .stroke-word{
  -webkit-text-stroke:1px var(--ink) !important;
  color:transparent !important;
}
html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) .lead,
html:not([data-theme="dark"]) .service p,
html:not([data-theme="dark"]) .case-feature .case-copy p,
html:not([data-theme="dark"]) .industry p{
  color:var(--muted) !important;
}
html:not([data-theme="dark"]) .visual-panel,
html:not([data-theme="dark"]) .case-visual,
html:not([data-theme="dark"]) .provider-network{
  color:var(--ink);
}

/* ---------- Case study editorial treatment ---------- */
.case-grid{display:grid;gap:1px;background:var(--line)}
.case-feature{
  display:grid;grid-template-columns:1fr 1fr;min-height:510px;background:var(--surface-strong);
}
.case-feature .case-copy{padding:clamp(35px,5vw,75px);display:flex;flex-direction:column;justify-content:center}
.case-feature .case-copy h3{font-size:clamp(42px,5vw,72px);line-height:.92;letter-spacing:-.065em;font-weight:500}
.case-feature .case-copy p{color:var(--muted);max-width:520px}
.case-visual{
  position:relative;overflow:hidden;
  background:
   radial-gradient(circle at 50% 50%,var(--pink-soft),transparent 35%),
   linear-gradient(145deg,var(--surface),var(--surface-strong));
}
.case-visual .ring{position:absolute;border:1px solid var(--line);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);animation:v12Rotate 20s linear infinite}
.case-visual .ring.r1{width:72%;height:72%}.case-visual .ring.r2{width:52%;height:52%;animation-direction:reverse}.case-visual .ring.r3{width:29%;height:29%;border-color:var(--pink)}
.case-visual .case-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;background:var(--ink);border:1px solid var(--pink);box-shadow:0 0 50px var(--pink-glow)}
.case-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}
.case-meta span{font:500 7px "STA Mono";letter-spacing:.13em;color:var(--muted);border:1px solid var(--line);padding:8px 9px}
.case-meta span:first-child{color:var(--pink);border-color:var(--pink-soft)}



/* =========================================================
   V17 MICRO-QA: TRUE GLASS NAVIGATION
   ========================================================= */
header{
  background:linear-gradient(180deg,rgba(20,20,27,.18),rgba(20,20,27,.08)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:18px !important;
  top:14px !important;left:var(--pad) !important;right:var(--pad) !important;
  padding:10px 14px !important;
  box-shadow:0 18px 70px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.13) !important;
  backdrop-filter:blur(34px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%) !important;
  transition:transform .45s var(--ease),background .35s,border-color .35s,box-shadow .35s !important;
}
header.scrolled{
  background:linear-gradient(180deg,rgba(18,18,24,.24),rgba(18,18,24,.11)) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:0 22px 90px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.16) !important;
}
header:before{content:"";position:absolute;inset:1px;border-radius:17px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 35%,rgba(242,43,122,.055) 65%,rgba(255,255,255,.05));}
header .nav{position:relative;z-index:1}
header .brand{color:#fff !important}
header .brand>span>span{color:rgba(255,255,255,.58) !important}
header .navlink{color:rgba(255,255,255,.62) !important}
header .navlink:hover,header .navlink.active{color:#fff !important}
header .theme,header .menu{color:#fff !important;border-color:rgba(255,255,255,.18) !important;background:rgba(255,255,255,.055) !important;backdrop-filter:blur(10px)}
header .theme:hover,header .menu:hover{border-color:rgba(242,43,122,.65) !important;color:#fff !important;background:rgba(242,43,122,.09) !important}
header .cta{box-shadow:0 8px 24px rgba(242,43,122,.12)}
header .mega{background:linear-gradient(145deg,rgba(17,17,23,.70),rgba(17,17,23,.45)) !important;border-color:rgba(255,255,255,.16) !important;backdrop-filter:blur(30px) saturate(160%) !important}
@media(max-width:1050px){header{left:12px !important;right:12px !important;top:10px !important}}


html[data-theme="light"] body{background:radial-gradient(ellipse 60% 40% at 82% 5%,rgba(227,61,115,.075),transparent 60%),radial-gradient(ellipse 50% 45% at 8% 72%,rgba(227,61,115,.035),transparent 65%),#f5f3ef !important;color:#111113 !important}
html[data-theme="light"] header{background:linear-gradient(180deg,rgba(18,18,24,.16),rgba(18,18,24,.07)) !important;border-color:rgba(255,255,255,.28) !important}
html[data-theme="light"] header.scrolled{background:linear-gradient(180deg,rgba(18,18,24,.22),rgba(18,18,24,.10)) !important}
html[data-theme="light"] .case-feature{background:rgba(255,255,255,.72)}
html[data-theme="light"] .case-visual{background:radial-gradient(circle at 50% 50%,var(--pink-soft),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.9),rgba(245,243,239,.9))}
html[data-theme="light"] .case-visual .ring{border-color:rgba(17,17,19,.14)}
html[data-theme="light"] .case-visual .ring.r3{border-color:var(--pink)}
html[data-theme="light"] .case-visual .case-core{background:#111113}


/* V17 hero identity field */
.v17-signal-field{position:relative;width:min(560px,46vw);aspect-ratio:1;margin-left:auto}
.v17-halo{position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle,rgba(227,61,115,.20),transparent 63%);filter:blur(26px);opacity:.8}
.v17-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(17,17,19,.12);border-radius:50%;animation:v17Spin 28s linear infinite}
html[data-theme=dark] .v17-orbit{border-color:rgba(255,255,255,.12)}
.v17-o1{width:88%;height:88%}.v17-o2{width:66%;height:66%;border-color:rgba(227,61,115,.30);animation-direction:reverse;animation-duration:22s}.v17-o3{width:43%;height:43%;border-style:dashed;border-color:rgba(227,61,115,.42);animation-duration:15s}
@keyframes v17Spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.v17-cross{position:absolute;left:10%;right:10%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(227,61,115,.32),transparent)}
.v17-cross.y{transform:rotate(90deg)}
.v17-core{position:absolute;left:50%;top:50%;width:31%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(16,16,20,.82);border:1px solid rgba(227,61,115,.72);box-shadow:0 0 70px rgba(227,61,115,.18),inset 0 0 40px rgba(227,61,115,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:4;backdrop-filter:blur(12px)}
.v17-core strong{color:#fff;font-size:clamp(27px,3.1vw,43px);line-height:.9;letter-spacing:-.08em;font-weight:500}.v17-core span{color:rgba(255,255,255,.58);font:500 7px "STA Mono";letter-spacing:.15em;margin-top:8px}.v17-core em{color:var(--pink);font:500 6px "STA Mono";letter-spacing:.12em;font-style:normal;margin-top:10px}
.v17-signal{position:absolute;z-index:5;padding:8px 10px;background:rgba(16,16,20,.62);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.76);font:500 7px "STA Mono";letter-spacing:.12em;backdrop-filter:blur(14px);transition:transform .35s var(--ease),border-color .35s}
.v17-signal i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px rgba(227,61,115,.55);margin-right:7px}.v17-s1{left:4%;top:22%}.v17-s2{right:0;top:31%}.v17-s3{right:7%;bottom:22%}.v17-s4{left:0;bottom:30%}.v17-signal:hover{transform:translateY(-4px);border-color:rgba(227,61,115,.55)}
.v17-caption{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);white-space:nowrap;color:#85858d;font:500 7px "STA Mono";letter-spacing:.13em}.v17-caption b{color:var(--pink);padding:0 7px}
@media(max-width:950px){.v17-signal-field{width:min(600px,92vw);margin:55px auto 0}.v17-caption{bottom:-4%}}
@media(prefers-reduced-motion:reduce){.v17-orbit{animation:none}}

/* =========================================================
   SHREE V18 — GLASS / TECHNOLOGY GRID PRECISION PASS
   No heavy rails. No orbiting case-study objects.
   ========================================================= */

/* True glass navigation — the page remains visible through it. */
header,
html:not([data-theme="dark"]) header,
html[data-theme="dark"] header{
  top:14px;
  left:clamp(14px,1.5vw,26px);
  right:clamp(14px,1.5vw,26px);
  width:auto;
  padding:0;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:24px;
  box-shadow:0 18px 55px rgba(18,18,24,.08), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:blur(28px) saturate(165%);
  -webkit-backdrop-filter:blur(28px) saturate(165%);
}
html[data-theme="dark"] header{
  background:rgba(16,17,21,.34) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
header.scrolled{
  background:rgba(255,255,255,.24) !important;
  border-color:rgba(255,255,255,.72) !important;
}
html[data-theme="dark"] header.scrolled{background:rgba(14,15,19,.46) !important;border-color:rgba(255,255,255,.2) !important}
header:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.42),transparent 32%,transparent 72%,rgba(233,47,115,.055));
}
.nav{min-height:72px;position:relative;z-index:2}
header .navlink{color:rgba(25,25,31,.72) !important}
header .navlink:hover,header .navlink.active{color:var(--ink) !important}
html[data-theme="dark"] header .navlink{color:rgba(255,255,255,.72) !important}
html[data-theme="dark"] header .navlink:hover,html[data-theme="dark"] header .navlink.active{color:#fff !important}
header .theme{background:rgba(255,255,255,.24);border-color:rgba(25,25,31,.12);border-radius:12px}
html[data-theme="dark"] header .theme{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
header .cta{border-radius:12px;box-shadow:0 8px 28px rgba(233,47,115,.16)}

/* Replace missing logo image with a deliberate brand wordmark. */
.brand img{display:none !important}
.brand .brand-mark{display:none !important}
.brand:before{
  content:"S";display:grid;place-items:center;width:31px;height:31px;border-radius:9px;
  color:#fff;background:var(--pink);font:600 15px/1 "STA Display";letter-spacing:-.08em;
  box-shadow:0 6px 20px rgba(233,47,115,.2);
}
.brand>span:last-child{display:flex;flex-direction:column;line-height:1.02}
.brand>span:last-child{color:var(--ink) !important;font-size:13px}
.brand>span:last-child>span{color:var(--muted) !important;font-size:9px;letter-spacing:.13em;text-transform:uppercase;margin-top:4px}
html[data-theme="dark"] .brand>span:last-child{color:#fff !important}
html[data-theme="dark"] .brand>span:last-child>span{color:rgba(255,255,255,.58) !important}

/* Hero: retain the warm light field, but introduce a quiet technology grid. */
.hero{isolation:isolate;overflow:hidden}
.hero:before{
  display:block !important;content:"";position:absolute;z-index:-1;inset:0;left:-5%;width:110%;height:100%;
  background-image:
    linear-gradient(rgba(35,35,42,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,35,42,.055) 1px,transparent 1px),
    linear-gradient(30deg,transparent 49.7%,rgba(233,47,115,.045) 50%,transparent 50.3%);
  background-size:64px 64px,64px 64px,220px 220px;
  mask-image:linear-gradient(to right,transparent 0%,black 13%,black 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 13%,black 78%,transparent 100%);
  transform:perspective(900px) rotateX(58deg) translateY(18%);
  transform-origin:center bottom;
  opacity:.75;animation:staGridDrift 22s linear infinite;
  pointer-events:none;
}
.hero:after{
  display:block !important;content:"";position:absolute;z-index:-1;left:7%;right:7%;top:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,47,115,.2),rgba(233,47,115,.08),transparent);
  box-shadow:0 180px 0 rgba(35,35,42,.035),0 360px 0 rgba(35,35,42,.03),0 540px 0 rgba(35,35,42,.025);
  animation:staScan 9s ease-in-out infinite;pointer-events:none;
}
@keyframes staGridDrift{from{background-position:0 0,0 0,0 0}to{background-position:64px 64px,-64px 64px,220px 220px}}
@keyframes staScan{0%,100%{transform:translateY(-20px);opacity:.25}50%{transform:translateY(250px);opacity:.75}}
html[data-theme="dark"] .hero:before{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(30deg,transparent 49.7%,rgba(255,77,131,.06) 50%,transparent 50.3%)}

/* Case-study visual: architectural technology topology, not orbiting objects. */
.case-visual{overflow:hidden !important;background:
  radial-gradient(circle at 50% 50%,rgba(233,47,115,.11),transparent 27%),
  linear-gradient(rgba(20,20,25,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(20,20,25,.045) 1px,transparent 1px),
  rgba(255,255,255,.54) !important;
  background-size:auto,42px 42px,42px 42px,auto !important;
  position:relative;}
.case-visual:before{content:"";position:absolute;inset:13%;border:1px solid rgba(233,47,115,.18);border-radius:50%;box-shadow:0 0 0 44px rgba(233,47,115,.025),0 0 0 88px rgba(20,20,25,.025)}
.case-visual:after{content:"";position:absolute;left:18%;right:18%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(233,47,115,.5),transparent);box-shadow:0 -70px 0 rgba(20,20,25,.035),0 70px 0 rgba(20,20,25,.035)}
.case-visual .ring{display:none !important}
.case-visual .case-core{width:76px !important;height:76px !important;background:#17171b !important;border:1px solid var(--pink) !important;box-shadow:0 0 45px rgba(233,47,115,.22) !important;animation:none !important;z-index:3}
.case-visual .case-core:after{content:"SHREE";color:#fff;font:500 10px/1 "STA Display";letter-spacing:.08em}
html[data-theme="dark"] .case-visual{background:radial-gradient(circle at 50% 50%,rgba(255,77,131,.12),transparent 27%),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),rgba(18,20,24,.72) !important;background-size:auto,42px 42px,42px 42px,auto !important}

/* Keep the background alive between sections without turning every section into a gimmick. */
.section:not(.hero){position:relative}
.section:not(.hero):before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(120deg,transparent 0 47%,rgba(233,47,115,.025) 48%,transparent 49%);background-size:300px 300px;opacity:.7}

@media(max-width:1050px){header{top:10px;left:10px;right:10px}.nav{min-height:64px}}
@media(max-width:700px){header{border-radius:18px}.nav{min-height:58px}.hero:before{transform:perspective(700px) rotateX(62deg) translateY(25%);background-size:48px 48px,48px 48px,180px 180px}.case-visual{min-height:300px}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after{animation:none!important}}


/* =========================================================
   SHREE V19 — PRECISION BRAND / GLASS / HERO / CASE STUDIES
   ========================================================= */

/* ---------- NAVIGATION: readable premium glass ---------- */
header,
header.scrolled,
html[data-theme="light"] header,
html[data-theme="light"] header.scrolled {
  top: 14px !important;
  left: clamp(18px, 2vw, 32px) !important;
  right: clamp(18px, 2vw, 32px) !important;
  width: auto !important;
  padding: 0 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.52) 46%,
      rgba(255,245,249,.58) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 16px 50px rgba(24,24,30,.08),
    0 2px 10px rgba(24,24,30,.035),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(24,24,30,.045) !important;
  backdrop-filter: blur(32px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(175%) !important;
}

header.scrolled,
html[data-theme="light"] header.scrolled {
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.86),
      rgba(255,255,255,.64) 55%,
      rgba(255,246,250,.72)
    ) !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] header.scrolled {
  background:
    linear-gradient(
      110deg,
      rgba(20,21,27,.62),
      rgba(25,25,32,.43) 55%,
      rgba(48,20,32,.46)
    ) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 18px 65px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.035) !important;
}

header:before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.45),
      transparent 25%,
      transparent 70%,
      rgba(233,47,115,.07)
    );
  opacity:.9;
}

header:after {
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,47,115,.28),transparent);
  pointer-events:none;
}

header .nav {
  min-height: 70px !important;
  position:relative;
  z-index:2;
}

header .brand {
  color: #16161b !important;
  font-size:13px !important;
}

header .brand:before {
  width:30px !important;
  height:30px !important;
  border-radius:8px !important;
  box-shadow:0 7px 22px rgba(233,47,115,.20) !important;
}

html[data-theme="dark"] header .brand {
  color:#fff !important;
}

header .navlinks {
  gap: 2px !important;
}

header .navlink {
  color: rgba(24,24,31,.70) !important;
  font-size:12px !important;
  padding: 10px 13px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

header .navlink:hover,
header .navlink.active {
  color:#111116 !important;
}

html[data-theme="dark"] header .navlink {
  color:rgba(255,255,255,.72) !important;
  text-shadow:none;
}
html[data-theme="dark"] header .navlink:hover,
html[data-theme="dark"] header .navlink.active {
  color:#fff !important;
}

header .theme,
header .menu {
  color:#18181e !important;
  background:rgba(255,255,255,.42) !important;
  border:1px solid rgba(25,25,31,.13) !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

html[data-theme="dark"] header .theme,
html[data-theme="dark"] header .menu {
  color:#fff !important;
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.16) !important;
}

header .cta {
  border-radius:10px !important;
  box-shadow:0 8px 26px rgba(233,47,115,.18) !important;
}

/* ---------- HERO: polished identity card ---------- */
.hero-visual {
  min-height: 570px !important;
  perspective: 1200px;
}

.v17-signal-field {
  width:min(560px,46vw) !important;
  aspect-ratio: 1.02 !important;
  margin-left:auto !important;
  position:relative;
  border:1px solid rgba(22,22,28,.12);
  border-radius:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(233,47,115,.13), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(247,244,241,.38));
  box-shadow:
    0 30px 90px rgba(22,22,28,.09),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  transform:translateZ(0);
}

.v17-signal-field:before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(30,30,36,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,30,36,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
  opacity:.75;
}

.v17-signal-field:after {
  content:"SHREE / SOLUTION LAYER";
  position:absolute;
  left:28px;
  top:25px;
  color:rgba(20,20,25,.55);
  font:500 8px/1 "STA Mono";
  letter-spacing:.16em;
}

.v17-halo {
  inset:27% !important;
  background:radial-gradient(circle,rgba(233,47,115,.20),transparent 68%) !important;
  filter:blur(34px) !important;
}

.v17-orbit {
  border-color:rgba(25,25,30,.14) !important;
}
.v17-o1 { width:72% !important; height:72% !important; }
.v17-o2 { width:54% !important; height:54% !important; border-color:rgba(233,47,115,.30) !important; }
.v17-o3 { width:38% !important; height:38% !important; border-color:rgba(233,47,115,.34) !important; }

.v17-cross.x {
  left:14% !important;
  right:14% !important;
  background:linear-gradient(90deg,transparent,rgba(233,47,115,.24),transparent) !important;
}
.v17-cross.y {
  top:14% !important;
  bottom:14% !important;
  height:auto !important;
  width:1px !important;
  left:50% !important;
  right:auto !important;
  background:linear-gradient(transparent,rgba(233,47,115,.22),transparent) !important;
  transform:none !important;
}

.v17-core {
  width:29% !important;
  background:linear-gradient(145deg,#26232a,#17171b) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 24px 65px rgba(233,47,115,.18),
    0 0 0 10px rgba(233,47,115,.025),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.v17-signal {
  background:rgba(255,255,255,.64) !important;
  border:1px solid rgba(30,30,36,.10) !important;
  color:#36343b !important;
  box-shadow:0 10px 28px rgba(20,20,25,.055);
  backdrop-filter:blur(18px) saturate(150%);
}
.v17-signal:hover {
  transform:translateY(-2px) !important;
  border-color:rgba(233,47,115,.30) !important;
}

.v17-s1 { left:7% !important; top:31% !important; }
.v17-s2 { right:7% !important; top:27% !important; }
.v17-s3 { right:9% !important; bottom:27% !important; }
.v17-s4 { left:7% !important; bottom:31% !important; }

.v17-caption {
  bottom:5% !important;
  color:#77737a !important;
}

html[data-theme="dark"] .v17-signal-field {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,77,131,.12), transparent 30%),
    linear-gradient(145deg,rgba(24,25,31,.82),rgba(16,17,21,.55));
  border-color:rgba(255,255,255,.12);
}
html[data-theme="dark"] .v17-signal-field:before {
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
}
html[data-theme="dark"] .v17-signal-field:after { color:rgba(255,255,255,.46); }
html[data-theme="dark"] .v17-signal { 
  background:rgba(20,21,27,.58) !important;
  border-color:rgba(255,255,255,.13) !important;
  color:rgba(255,255,255,.76) !important;
}

/* ---------- CASE STUDIES: clean editorial feature cards ---------- */
.case-grid {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:18px !important;
  border:0 !important;
}

.case-feature {
  display:grid !important;
  grid-template-columns:minmax(0,1.14fr) minmax(220px,.86fr) !important;
  min-height:430px !important;
  border:1px solid rgba(25,25,31,.10) !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.70) !important;
  box-shadow:
    0 20px 55px rgba(22,22,28,.055),
    inset 0 1px 0 rgba(255,255,255,.90);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s !important;
}

.case-feature:hover {
  transform:translateY(-7px) !important;
  border-color:rgba(233,47,115,.25) !important;
  box-shadow:
    0 30px 80px rgba(22,22,28,.10),
    0 0 0 1px rgba(233,47,115,.025);
}

.case-copy {
  padding:40px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.case-copy h3 {
  font-size:clamp(30px,3vw,43px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  max-width:470px !important;
  margin:0 0 18px !important;
}

.case-copy p {
  font-size:14px !important;
  line-height:1.65 !important;
  max-width:510px !important;
}

.case-meta {
  margin-bottom:25px !important;
}
.case-meta span {
  border-radius:999px !important;
  background:rgba(255,255,255,.52);
}

.case-copy .secondary {
  margin-top:24px !important;
  width:max-content !important;
}

.case-visual {
  min-height:100% !important;
  border-left:1px solid rgba(25,25,31,.08) !important;
  background:
    radial-gradient(circle at 50% 50%,rgba(233,47,115,.12),transparent 26%),
    linear-gradient(rgba(25,25,31,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,25,31,.042) 1px,transparent 1px),
    linear-gradient(145deg,rgba(249,247,245,.92),rgba(241,238,235,.68)) !important;
  background-size:auto,34px 34px,34px 34px,auto !important;
}

.case-visual:before {
  inset:18% !important;
  border:1px solid rgba(233,47,115,.22) !important;
  box-shadow:
    0 0 0 42px rgba(233,47,115,.018),
    0 0 0 84px rgba(25,25,31,.018) !important;
}

.case-visual:after {
  left:12% !important;
  right:12% !important;
  background:linear-gradient(90deg,transparent,rgba(233,47,115,.42),transparent) !important;
  box-shadow:
    0 -72px 0 rgba(25,25,31,.025),
    0 72px 0 rgba(25,25,31,.025) !important;
}

.case-visual .case-core {
  width:82px !important;
  height:82px !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#2b272e,#16161a) !important;
  border:1px solid rgba(233,47,115,.72) !important;
  box-shadow:
    0 0 0 9px rgba(233,47,115,.035),
    0 20px 50px rgba(233,47,115,.18) !important;
}
.case-visual .case-core:after {
  content:"SHREE" !important;
  color:#fff !important;
  font:500 9px/1 "STA Display" !important;
  letter-spacing:.12em !important;
}

html[data-theme="dark"] .case-feature {
  background:rgba(22,23,28,.68) !important;
  border-color:rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .case-visual {
  border-left-color:rgba(255,255,255,.08) !important;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,77,131,.12),transparent 26%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(145deg,rgba(25,26,32,.9),rgba(18,19,24,.75)) !important;
  background-size:auto,34px 34px,34px 34px,auto !important;
}
html[data-theme="dark"] .case-meta span {
  background:rgba(255,255,255,.035) !important;
}

/* ---------- page rhythm ---------- */
.section-head {
  margin-bottom:46px !important;
}
.section-head h2 {
  letter-spacing:-.06em !important;
}

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .case-feature { grid-template-columns:1fr .72fr !important; }
  .case-copy { padding:32px !important; }
}
@media (max-width:850px) {
  header { top:10px !important; left:10px !important; right:10px !important; }
  .nav { min-height:62px !important; }
  .hero-visual { min-height:500px !important; }
  .v17-signal-field { width:min(620px,92vw) !important; margin:30px auto 0 !important; }
  .case-grid { grid-template-columns:1fr !important; }
}
@media (max-width:560px) {
  .case-feature { grid-template-columns:1fr !important; }
  .case-visual { min-height:300px !important; border-left:0 !important; border-top:1px solid rgba(25,25,31,.08) !important; }
  .case-copy { padding:28px !important; }
  .v17-signal-field { border-radius:24px; }
}

/* =========================================================
   V20 — GROWTH PLATFORM / COMMAND LAYER
   The visual system is intentionally editorial + infrastructure,
   not a generic SaaS dashboard or decorative orbit animation.
   ========================================================= */

/* --- Brand mark fallback: never show a broken image --- */
.brand::before{
  content:"S";
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  flex:0 0 31px;
  border:1px solid rgba(227,61,115,.32);
  border-radius:9px;
  color:var(--pink);
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,238,245,.42));
  font:600 13px/1 "STA Display";
  letter-spacing:-.08em;
  box-shadow:0 8px 24px rgba(227,61,115,.10), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme=dark] .brand::before{background:rgba(255,255,255,.06);border-color:rgba(255,77,131,.38)}

/* --- Navigation: glass should read as glass, not black --- */
header, header.scrolled{
  top:14px !important;
  left:18px !important;
  right:18px !important;
  width:auto !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.86) !important;
  border-radius:22px !important;
  background:linear-gradient(105deg,rgba(255,255,255,.78),rgba(255,255,255,.56) 58%,rgba(255,244,248,.66)) !important;
  box-shadow:0 20px 65px rgba(20,20,26,.09),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(20,20,26,.045) !important;
  backdrop-filter:blur(34px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%) !important;
}
header::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.44),transparent 26%,transparent 72%,rgba(227,61,115,.07))}
header::after{content:"";position:absolute;left:7%;right:7%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(227,61,115,.32),transparent);pointer-events:none}
header .nav{position:relative;z-index:2;min-height:70px}
header .navlink{color:rgba(18,18,24,.67) !important;font-size:12px !important;padding:10px 13px !important}
header .navlink:hover,header .navlink.active{color:#111116 !important}
header .navlink.active::after{height:2px;bottom:2px}
header .theme,header .menu{border-color:rgba(18,18,24,.12) !important;background:rgba(255,255,255,.38) !important;border-radius:11px !important;color:#18181e !important}
header .cta{border-radius:11px !important;box-shadow:0 10px 30px rgba(227,61,115,.16)}
html[data-theme=dark] header,html[data-theme=dark] header.scrolled{background:linear-gradient(105deg,rgba(16,17,22,.70),rgba(20,21,27,.46) 58%,rgba(48,19,34,.48)) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:0 20px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.12) !important}
html[data-theme=dark] header .navlink{color:rgba(255,255,255,.70) !important}
html[data-theme=dark] header .navlink:hover,html[data-theme=dark] header .navlink.active{color:#fff !important}
html[data-theme=dark] header .theme,html[data-theme=dark] header .menu{color:#fff !important;background:rgba(255,255,255,.055) !important;border-color:rgba(255,255,255,.15) !important}

/* --- Hero typography / composition --- */
.hero{min-height:100svh;padding-top:145px;padding-bottom:86px;overflow:hidden}
.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(480px,.98fr);gap:clamp(45px,7vw,110px)}
.hero .eyebrow{letter-spacing:.18em}
.hero h1{font-size:clamp(72px,9.4vw,154px);line-height:.79;letter-spacing:-.10em;max-width:900px;margin:27px 0 31px}
.hero h1 .hero-accent{color:var(--pink)}
.hero .lead{font-size:clamp(17px,1.45vw,20px);max-width:660px;line-height:1.55}
.hero-actions{margin-top:36px}
.hero-copy-note{display:flex;gap:10px;align-items:center;margin-top:28px;font:500 8px/1 "STA Mono";letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.hero-copy-note b{color:var(--pink);font-weight:500}

/* --- New command-layer hero --- */
.command-layer{
  width:min(620px,48vw);
  aspect-ratio:1.03;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(20,20,25,.12);
  border-radius:34px;
  background:
    radial-gradient(circle at 51% 50%,rgba(227,61,115,.13),transparent 24%),
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(248,245,243,.52));
  box-shadow:0 35px 100px rgba(22,22,28,.10),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -40px 90px rgba(227,61,115,.025);
  backdrop-filter:blur(9px);
  transform:rotateY(-4deg) rotateX(2deg);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
}
.command-layer:hover{transform:rotateY(-1deg) rotateX(1deg) translateY(-7px);box-shadow:0 45px 120px rgba(22,22,28,.13),inset 0 1px 0 rgba(255,255,255,.98)}
.command-top,.command-bottom{position:absolute;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;z-index:9;font:500 7px/1 "STA Mono";letter-spacing:.16em;color:rgba(35,34,40,.56);text-transform:uppercase}
.command-top{top:26px}.command-bottom{bottom:25px;justify-content:center;gap:12px}.command-bottom b{color:var(--pink);font-weight:500}.command-top i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink-glow);vertical-align:middle;margin-right:5px}.command-top b{font-weight:500;color:var(--pink)}
.command-grid{position:absolute;inset:0;background:linear-gradient(rgba(20,20,25,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,25,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent 2%,black 13%,black 88%,transparent 98%);-webkit-mask-image:linear-gradient(to bottom,transparent 2%,black 13%,black 88%,transparent 98%)}
.command-scan{position:absolute;left:8%;right:8%;height:1px;top:-10%;background:linear-gradient(90deg,transparent,rgba(227,61,115,.42),transparent);box-shadow:0 0 25px rgba(227,61,115,.14);animation:commandScan 8s linear infinite}
@keyframes commandScan{0%{transform:translateY(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(620px);opacity:0}}
.command-axis{position:absolute;background:linear-gradient(90deg,transparent,rgba(227,61,115,.19),transparent);z-index:2}
.command-axis.axis-x{left:7%;right:7%;height:1px;top:50%}.command-axis.axis-y{top:12%;bottom:12%;width:1px;left:50%;background:linear-gradient(transparent,rgba(227,61,115,.19),transparent)}
.command-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(25,25,30,.12);border-radius:50%;transform:translate(-50%,-50%);z-index:2}
.orbit-a{width:78%;height:78%;animation:commandSpin 36s linear infinite}.orbit-b{width:56%;height:56%;border-color:rgba(227,61,115,.29);animation:commandSpin 24s linear infinite reverse}.orbit-c{width:37%;height:37%;border-style:dashed;border-color:rgba(227,61,115,.34);animation:commandSpin 15s linear infinite}
@keyframes commandSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.command-route{position:absolute;height:1px;transform-origin:left center;background:linear-gradient(90deg,rgba(227,61,115,.05),rgba(227,61,115,.48),rgba(227,61,115,.05));z-index:3;opacity:.72}
.route-a{width:31%;left:21%;top:37%;transform:rotate(14deg)}.route-b{width:29%;right:19%;top:40%;transform:rotate(166deg)}.route-c{width:30%;left:22%;bottom:38%;transform:rotate(-14deg)}.route-d{width:28%;right:20%;bottom:34%;transform:rotate(-165deg)}
.command-node{position:absolute;z-index:8;display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid rgba(20,20,25,.10);border-radius:9px;background:rgba(255,255,255,.58);box-shadow:0 12px 28px rgba(20,20,25,.045);backdrop-filter:blur(16px);font:500 7px/1 "STA Mono";letter-spacing:.12em;color:rgba(30,29,34,.70)}
.command-node b{width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 9px var(--pink-glow)}
.node-connect{left:8%;top:34%}.node-cloud{right:8%;top:29%}.node-security{right:7%;bottom:29%}.node-data{left:8%;bottom:32%}
.command-core{position:absolute;left:50%;top:50%;width:31%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:7;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(145deg,#29262d,#151519);border:1px solid rgba(255,255,255,.20);box-shadow:0 25px 70px rgba(227,61,115,.20),0 0 0 10px rgba(227,61,115,.025),inset 0 1px 0 rgba(255,255,255,.14)}
.command-core::before{content:"";position:absolute;inset:-12px;border:1px solid rgba(227,61,115,.18);border-radius:50%;animation:corePulse 4s ease-in-out infinite}
@keyframes corePulse{50%{transform:scale(1.05);opacity:.48}}
.command-core strong{color:#fff;font-size:clamp(28px,3.3vw,46px);line-height:.85;letter-spacing:-.08em;font-weight:500}.command-core span{margin-top:8px;color:rgba(255,255,255,.56);font:500 6px/1 "STA Mono";letter-spacing:.16em}.command-core em{margin-top:10px;color:var(--pink);font:500 5.5px/1 "STA Mono";letter-spacing:.13em;font-style:normal}
html[data-theme=dark] .command-layer{background:radial-gradient(circle at 51% 50%,rgba(255,77,131,.12),transparent 24%),linear-gradient(145deg,rgba(24,25,31,.82),rgba(16,17,21,.58));border-color:rgba(255,255,255,.12)}
html[data-theme=dark] .command-grid{background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)}
html[data-theme=dark] .command-node{background:rgba(20,21,27,.58);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
html[data-theme=dark] .command-top,html[data-theme=dark] .command-bottom{color:rgba(255,255,255,.48)}

/* --- Case studies: hierarchy, proof, and an actual system visual --- */
.case-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:18px !important;background:transparent !important;border:0 !important}
.case-feature{position:relative;display:grid !important;grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr) !important;min-height:430px !important;border:1px solid rgba(20,20,25,.10) !important;border-radius:28px !important;overflow:hidden !important;background:rgba(255,255,255,.70) !important;box-shadow:0 22px 65px rgba(20,20,25,.055),inset 0 1px 0 rgba(255,255,255,.94) !important;transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s !important}
.case-feature:hover{transform:translateY(-8px) !important;border-color:rgba(227,61,115,.24) !important;box-shadow:0 34px 90px rgba(20,20,25,.10),0 0 0 1px rgba(227,61,115,.025) !important}
.case-featured{grid-column:1 / -1;min-height:510px !important;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr) !important;background:linear-gradient(115deg,rgba(255,255,255,.82),rgba(255,249,251,.64)) !important}
.case-copy{padding:clamp(32px,4.5vw,62px) !important;display:flex !important;flex-direction:column !important;justify-content:center !important}
.case-copy h3{font-size:clamp(31px,3.7vw,57px) !important;line-height:.94 !important;letter-spacing:-.065em !important;margin:0 0 18px !important;max-width:570px !important}
.case-featured .case-copy h3{font-size:clamp(42px,5.2vw,76px) !important;max-width:690px !important}
.case-copy p{font-size:14px !important;line-height:1.65 !important;color:var(--muted) !important;max-width:610px !important}
.case-meta{margin-bottom:25px !important;gap:8px !important}.case-meta span{border-radius:999px !important;background:rgba(255,255,255,.48) !important;padding:8px 10px !important}.case-meta span:first-child{color:var(--pink) !important;border-color:rgba(227,61,115,.25) !important}
.case-copy .secondary{width:max-content;margin-top:25px}
.case-visual{position:relative !important;min-height:100% !important;overflow:hidden !important;border-left:1px solid rgba(20,20,25,.08) !important;background:radial-gradient(circle at 50% 50%,rgba(227,61,115,.11),transparent 25%),linear-gradient(rgba(20,20,25,.042) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,25,.042) 1px,transparent 1px),linear-gradient(145deg,rgba(249,247,245,.92),rgba(241,238,235,.68)) !important;background-size:auto,34px 34px,34px 34px,auto !important}
.case-tech-grid{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(227,61,115,.08),transparent 34%);opacity:.9}
.case-visual::before{content:"";position:absolute;inset:17%;border:1px solid rgba(227,61,115,.22);border-radius:50%;box-shadow:0 0 0 45px rgba(227,61,115,.018),0 0 0 92px rgba(20,20,25,.014)}
.case-visual::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(227,61,115,.38),transparent);box-shadow:0 -72px 0 rgba(20,20,25,.025),0 72px 0 rgba(20,20,25,.025)}
.case-route{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(227,61,115,.42),transparent);z-index:3;transform-origin:left center}.route-1{width:37%;left:12%;top:36%;transform:rotate(18deg)}.route-2{width:34%;right:13%;top:34%;transform:rotate(163deg)}.route-3{width:35%;left:13%;bottom:33%;transform:rotate(-17deg)}
.case-orbit{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(20,20,25,.12);z-index:2}.orbit-1{width:58%;height:58%;animation:commandSpin 30s linear infinite}.orbit-2{width:34%;height:34%;border-color:rgba(227,61,115,.30);border-style:dashed;animation:commandSpin 18s linear infinite reverse}
.case-core{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;z-index:6;background:linear-gradient(145deg,#2b272e,#16161a);border:1px solid rgba(227,61,115,.65);box-shadow:0 20px 55px rgba(227,61,115,.18),0 0 0 8px rgba(227,61,115,.025)}
.case-core span{display:block;color:#fff;font:500 12px/1 "STA Display";letter-spacing:-.04em}.case-core small{display:block;margin-top:3px;color:var(--pink);font:500 5px/1 "STA Mono";letter-spacing:.15em}
.case-node{position:absolute;z-index:7;padding:7px 8px;border:1px solid rgba(20,20,25,.10);border-radius:7px;background:rgba(255,255,255,.60);font:500 6px/1 "STA Mono";letter-spacing:.12em;color:var(--muted);backdrop-filter:blur(12px)}.cn-1{left:12%;top:24%}.cn-2{right:12%;top:23%}.cn-3{right:12%;bottom:23%}
html[data-theme=dark] .case-feature{background:rgba(20,21,27,.68) !important;border-color:rgba(255,255,255,.10) !important}.case-featured{background:linear-gradient(115deg,rgba(24,25,31,.78),rgba(31,20,27,.64)) !important}.case-meta span{background:rgba(255,255,255,.05) !important}.case-visual{border-left-color:rgba(255,255,255,.08) !important;background:radial-gradient(circle at 50% 50%,rgba(255,77,131,.12),transparent 25%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(145deg,rgba(25,26,32,.90),rgba(18,19,24,.76)) !important;background-size:auto,34px 34px,34px 34px,auto !important}.case-node{background:rgba(20,21,27,.58);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.65)}

/* --- More intentional ambient environment --- */
body::after{opacity:.16;background-size:96px 96px,96px 96px;mask-image:linear-gradient(to bottom,black 0%,transparent 78%);-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 78%)}

/* --- Responsive --- */
@media(max-width:1100px){.hero-grid{grid-template-columns:1fr}.hero-visual{min-height:560px}.command-layer{width:min(650px,92vw);margin-inline:auto}.case-feature,.case-featured{grid-template-columns:1fr !important}.case-visual{min-height:340px !important;border-left:0 !important;border-top:1px solid var(--line) !important}.case-featured{grid-column:auto}}
@media(max-width:700px){header,header.scrolled{top:8px !important;left:10px !important;right:10px !important;border-radius:18px !important}.hero{padding-top:130px}.hero h1{font-size:clamp(60px,16vw,92px)}.hero-visual{min-height:420px}.command-layer{width:100%;border-radius:24px}.command-node{font-size:6px;padding:7px 8px}.node-connect{left:4%;top:34%}.node-cloud{right:4%;top:29%}.node-security{right:4%;bottom:29%}.node-data{left:4%;bottom:32%}.case-grid{grid-template-columns:1fr !important}.case-featured{grid-column:auto}.case-copy{padding:28px !important}.case-featured .case-copy h3{font-size:clamp(40px,12vw,66px) !important}.case-visual{min-height:290px !important}.command-bottom{left:16px;right:16px;gap:7px;font-size:5.5px}}
@media(prefers-reduced-motion:reduce){.command-scan,.command-orbit,.command-core::before,.case-orbit{animation:none !important}.command-layer,.command-layer:hover{transform:none !important}}


/* SHREE V21 — THE FIGHT / CUSTOMER-FIRST / PREMIUM GROWTH PLATFORM */
:root{--v21-pink:#e83f78;--v21-rose:#ff9abb;--v21-black:#141419;--v21-paper:#f7f5f2;--v21-line:rgba(20,20,25,.11)}
html:not([data-theme=dark]) body{background:radial-gradient(circle at 78% 7%,rgba(232,63,120,.055),transparent 24%),radial-gradient(circle at 12% 42%,rgba(24,30,45,.035),transparent 28%),var(--bg)}
html[data-theme=dark] body{background:radial-gradient(circle at 78% 7%,rgba(232,63,120,.075),transparent 24%),var(--bg)}

/* V21 navigation — legible glass, never a black slab */
header,header.scrolled{background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 18px 55px rgba(15,15,20,.075),inset 0 1px 0 rgba(255,255,255,.95)!important;backdrop-filter:blur(30px) saturate(175%)!important;-webkit-backdrop-filter:blur(30px) saturate(175%)!important}
html[data-theme=dark] header,html[data-theme=dark] header.scrolled{background:rgba(18,19,24,.56)!important;border-color:rgba(255,255,255,.15)!important;box-shadow:0 18px 65px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.11)!important}
header .nav{position:relative;z-index:2}
header .navlink{font-weight:600!important;color:rgba(18,18,24,.78)!important;text-shadow:0 1px rgba(255,255,255,.55)}
header .navlink:hover,header .navlink.active{color:#111117!important}
html[data-theme=dark] header .navlink{color:rgba(255,255,255,.78)!important;text-shadow:none}
html[data-theme=dark] header .navlink:hover,html[data-theme=dark] header .navlink.active{color:#fff!important}
header .theme,header .menu{background:rgba(255,255,255,.38)!important;border:1px solid rgba(20,20,25,.12)!important;color:#15151a!important}
html[data-theme=dark] header .theme,html[data-theme=dark] header .menu{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.15)!important;color:#fff!important}
header .brand{font-weight:700!important;color:#17171c!important}html[data-theme=dark] header .brand{color:#fff!important}

/* Hero copy */
.hero{position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto -10% 0;height:45%;background:linear-gradient(180deg,transparent,rgba(232,63,120,.025));pointer-events:none}
.hero h1{max-width:980px!important;font-size:clamp(68px,9.2vw,142px)!important;line-height:.88!important;letter-spacing:-.105em!important}
.hero .lead{max-width:690px!important;font-size:clamp(16px,1.45vw,20px)!important;line-height:1.65!important}
.hero-accent{position:relative;display:inline-block;color:var(--pink)}
.hero-accent:after{content:"";position:absolute;left:2%;right:4%;bottom:-10px;height:2px;background:linear-gradient(90deg,var(--pink),transparent);opacity:.45}
.v21-kicker{display:flex;align-items:center;gap:10px;font:600 9px/1 "STA Mono";letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-top:26px}
.v21-kicker b{color:var(--pink)}

/* Hero command layer: architectural rather than toy-like */
.command-layer{position:relative!important;width:min(620px,100%)!important;aspect-ratio:1.08!important;border-radius:34px!important;overflow:hidden!important;background:linear-gradient(145deg,rgba(255,255,255,.77),rgba(245,242,239,.47))!important;border:1px solid rgba(30,30,35,.10)!important;box-shadow:0 35px 100px rgba(25,25,30,.10),inset 0 1px rgba(255,255,255,.96)!important;transform:perspective(1300px) rotateY(-4deg) rotateX(2deg)!important;transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .8s}
.command-layer:hover{transform:perspective(1300px) rotateY(-1deg) rotateX(0) translateY(-5px)!important;box-shadow:0 45px 120px rgba(25,25,30,.13),inset 0 1px rgba(255,255,255,.96)!important}
.command-grid{position:absolute;inset:0!important;background:linear-gradient(rgba(20,20,25,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,25,.045) 1px,transparent 1px)!important;background-size:38px 38px!important;mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent)}
.command-scan{position:absolute;left:0;right:0;top:-15%;height:18%;background:linear-gradient(180deg,transparent,rgba(232,63,120,.08),transparent);animation:v21scan 8s linear infinite}
@keyframes v21scan{to{transform:translateY(720%)}}
.command-top{position:absolute!important;z-index:5!important;left:26px!important;right:26px!important;top:23px!important;display:flex!important;justify-content:space-between!important;font:600 8px "STA Mono"!important;letter-spacing:.14em!important;color:rgba(30,30,36,.52)!important}
.command-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px rgba(232,63,120,.55);margin-right:8px}
.command-axis{position:absolute;background:linear-gradient(90deg,transparent,rgba(232,63,120,.28),transparent);opacity:.55}.axis-x{left:9%;right:9%;top:51%;height:1px}.axis-y{top:11%;bottom:11%;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(232,63,120,.25),transparent)}
.command-orbit{position:absolute;border:1px solid rgba(30,30,36,.10);border-radius:50%;left:50%;top:51%;transform:translate(-50%,-50%);animation:v21orbit 28s linear infinite}.orbit-a{width:54%;height:54%}.orbit-b{width:72%;height:72%;border-color:rgba(232,63,120,.14);animation-duration:36s;animation-direction:reverse}.orbit-c{width:88%;height:88%;opacity:.55;animation-duration:48s}
@keyframes v21orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.command-route{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(232,63,120,.7),transparent);transform-origin:left center;opacity:.7;animation:v21route 3.8s ease-in-out infinite}.route-a{width:34%;left:18%;top:36%;transform:rotate(19deg)}.route-b{width:31%;right:16%;top:38%;transform:rotate(160deg);animation-delay:.8s}.route-c{width:32%;left:18%;bottom:34%;transform:rotate(-18deg);animation-delay:1.5s}.route-d{width:30%;right:18%;bottom:35%;transform:rotate(-158deg);animation-delay:2.2s}
@keyframes v21route{0%,100%{opacity:.18;filter:blur(.4px)}50%{opacity:.85;filter:none}}
.command-node{position:absolute;z-index:4;padding:9px 11px;border:1px solid rgba(30,30,35,.10);border-radius:999px;background:rgba(255,255,255,.60);backdrop-filter:blur(16px);font:600 8px "STA Mono";letter-spacing:.12em;color:#333039;box-shadow:0 10px 30px rgba(20,20,25,.055);display:flex;align-items:center;gap:7px}.command-node b{width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px rgba(232,63,120,.45)}.node-connect{left:7%;top:34%}.node-cloud{right:7%;top:31%}.node-security{left:8%;bottom:29%}.node-data{right:8%;bottom:27%}
.command-core{position:absolute;z-index:4;left:50%;top:51%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:linear-gradient(145deg,#29262c,#111116);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 65px rgba(232,63,120,.20),0 0 0 12px rgba(232,63,120,.025),inset 0 1px rgba(255,255,255,.15)}
.command-core strong{font:600 25px/1 "STA Display";letter-spacing:-.06em}.command-core span{font:600 6px "STA Mono";letter-spacing:.19em;margin-top:5px;opacity:.72}.command-core em{font:600 6px "STA Mono";letter-spacing:.11em;color:#ff8fb1;font-style:normal;margin-top:15px}.core-ring{position:absolute;inset:-9px;border:1px solid rgba(232,63,120,.35);border-radius:50%}
.command-bottom{position:absolute;left:28px;right:28px;bottom:22px;display:flex;justify-content:center;gap:10px;font:600 7px "STA Mono";letter-spacing:.13em;color:rgba(30,30,36,.45)}.command-bottom b{color:var(--pink)}
html[data-theme=dark] .command-layer{background:linear-gradient(145deg,rgba(27,28,34,.80),rgba(18,19,24,.58))!important;border-color:rgba(255,255,255,.12)!important}html[data-theme=dark] .command-grid{}
html[data-theme=dark] .command-grid{background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)!important;background-size:38px 38px!important}html[data-theme=dark] .command-node{}
html[data-theme=dark] .command-node{background:rgba(20,21,27,.58);border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.78)}html[data-theme=dark] .command-bottom{}
html[data-theme=dark] .command-bottom,html[data-theme=dark] .command-top{color:rgba(255,255,255,.48)!important}

/* Founder philosophy / proof */
.v21-manifesto{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(80px,10vw,150px) 0;background:linear-gradient(120deg,rgba(232,63,120,.035),transparent 42%,rgba(20,20,25,.025))}
.v21-manifesto:before{content:"";position:absolute;width:520px;height:520px;right:-260px;top:-250px;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 70px rgba(232,63,120,.018),0 0 0 140px rgba(20,20,25,.018)}
.v21-manifesto-grid{display:grid;grid-template-columns:.8fr 1.5fr;gap:8vw;align-items:end}.v21-manifesto h2{font:500 clamp(52px,7.5vw,120px)/.88 "STA Display";letter-spacing:-.095em;max-width:900px;margin:0}.v21-manifesto h2 span{color:var(--pink)}.v21-manifesto p{max-width:510px;color:var(--muted);font-size:15px;line-height:1.75;margin:0}.v21-manifesto .kicker{margin-bottom:20px}
.v21-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:60px}.v21-principle{background:color-mix(in srgb,var(--surface-strong) 88%,transparent);padding:30px;min-height:180px}.v21-principle .num{font:600 9px "STA Mono";color:var(--pink);letter-spacing:.15em}.v21-principle h3{font:500 27px/1 "STA Display";letter-spacing:-.045em;margin:32px 0 12px}.v21-principle p{font-size:12px;color:var(--muted);line-height:1.65}

/* Proof card language */
.case-feature{position:relative}.case-featured{grid-column:1/-1;grid-template-columns:1.08fr .92fr!important;min-height:470px!important}.case-featured .case-copy h3{font-size:clamp(40px,4vw,62px)!important}.case-featured .case-visual{min-height:470px!important}.case-meta span{font-weight:700!important;color:var(--muted)!important;letter-spacing:.08em!important}.case-copy p{max-width:560px!important}.case-feature:hover .case-visual:after{opacity:.75}
.case-visual{position:relative;overflow:hidden!important;background:radial-gradient(circle at 50% 50%,rgba(232,63,120,.11),transparent 25%),linear-gradient(rgba(20,20,25,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,25,.045) 1px,transparent 1px),linear-gradient(145deg,#faf8f6,#eeebe7)!important;background-size:auto,34px 34px,34px 34px,auto!important}
.case-tech-grid{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(232,63,120,.045) 17.2%,transparent 17.6%),linear-gradient(135deg,transparent 49.8%,rgba(232,63,120,.28) 50%,transparent 50.2%);opacity:.7}.case-visual:before{content:"";position:absolute;inset:18%;border:1px solid rgba(232,63,120,.23);border-radius:50%;box-shadow:0 0 0 55px rgba(232,63,120,.018),0 0 0 110px rgba(20,20,25,.015)}.case-visual:after{content:"SHREE / OUTCOME SYSTEM";position:absolute;left:18px;bottom:18px;font:600 7px "STA Mono";letter-spacing:.14em;color:rgba(30,30,36,.42);opacity:.55;transition:opacity .4s}.case-orbit{animation:v21orbit 26s linear infinite!important;border-color:rgba(232,63,120,.18)!important}.case-core{background:linear-gradient(145deg,#29262c,#111116)!important;box-shadow:0 22px 55px rgba(232,63,120,.18)!important}.case-node{background:rgba(255,255,255,.65)!important;border-color:rgba(20,20,25,.11)!important;color:#302e35!important;backdrop-filter:blur(12px)}
html[data-theme=dark] .case-visual{background:radial-gradient(circle at 50% 50%,rgba(232,63,120,.11),transparent 25%),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(145deg,#202127,#15161b)!important;background-size:auto,34px 34px,34px 34px,auto!important}html[data-theme=dark] .case-visual:after{color:rgba(255,255,255,.42)}

/* The ambition */
.v21-scale{padding:clamp(100px,13vw,190px) 0;position:relative;overflow:hidden}.v21-scale-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.v21-scale h2{font:500 clamp(58px,7.4vw,122px)/.88 "STA Display";letter-spacing:-.09em;margin:0}.v21-scale h2 em{font-style:normal;color:var(--pink)}.v21-scale-copy{border-left:1px solid var(--line);padding-left:35px}.v21-scale-copy strong{display:block;font:600 10px "STA Mono";letter-spacing:.16em;color:var(--pink);margin-bottom:18px}.v21-scale-copy p{font-size:15px;line-height:1.8;color:var(--muted);max-width:500px}.v21-scale-signal{margin-top:35px;display:flex;align-items:center;gap:12px;font:600 8px "STA Mono";letter-spacing:.13em;color:var(--muted)}.v21-scale-signal i{height:1px;width:80px;background:linear-gradient(90deg,var(--pink),transparent)}

@media(max-width:900px){.v21-manifesto-grid,.v21-scale-grid{grid-template-columns:1fr;gap:35px}.v21-principles{grid-template-columns:1fr}.case-featured{grid-template-columns:1fr!important}.case-featured .case-visual{min-height:380px!important}.command-layer{transform:none!important}.command-layer:hover{transform:translateY(-3px)!important}}
@media(max-width:560px){.command-layer{border-radius:24px!important}.command-top{left:18px!important;right:18px!important}.command-node{font-size:6px;padding:7px 8px}.command-core{width:116px;height:116px}.command-core strong{font-size:21px}.node-connect{left:4%;top:31%}.node-cloud{right:4%;top:28%}.node-security{left:4%;bottom:25%}.node-data{right:4%;bottom:23%}.command-bottom{font-size:6px;gap:6px}.v21-manifesto h2{font-size:clamp(54px,15vw,82px)}.v21-scale h2{font-size:clamp(54px,15vw,82px)}}


/* =========================================================
   SHREE V22 — HERO CARD STABILITY PATCH
   ========================================================= */

.hero-visual,
.hero-visual * { box-sizing:border-box; }

.hero-visual {
  position:relative;
  isolation:isolate;
  min-width:0;
}

.v17-signal-field {
  position:relative !important;
  width:min(590px,100%) !important;
  max-width:590px !important;
  min-width:0 !important;
  aspect-ratio:1/1 !important;
  height:auto !important;
  margin-inline:auto !important;
  overflow:hidden !important;
  contain:layout paint !important;
  transform:translateZ(0) !important;
  will-change:auto !important;
}

.v17-signal-field > * { pointer-events:none; }

.v17-orbit {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center !important;
  animation-duration:28s !important;
  animation-timing-function:linear !important;
}

.v17-o1 { width:76% !important; height:76% !important; }
.v17-o2 { width:57% !important; height:57% !important; }
.v17-o3 { width:39% !important; height:39% !important; }

.v17-core {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:118px !important;
  height:118px !important;
  max-width:118px !important;
  aspect-ratio:1 !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  z-index:8 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  border-radius:50% !important;
}

.v17-signal {
  position:absolute !important;
  z-index:10 !important;
  min-width:0 !important;
  max-width:155px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transform:translateZ(0) !important;
  animation:none !important;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease !important;
}

.v17-signal:hover { transform:translateY(-3px) !important; }

.v17-s1 { left:5% !important; top:27% !important; }
.v17-s2 { right:5% !important; top:24% !important; }
.v17-s3 { right:5% !important; bottom:24% !important; }
.v17-s4 { left:5% !important; bottom:27% !important; }

.v17-caption {
  position:absolute !important;
  z-index:12 !important;
  left:50% !important;
  bottom:5% !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  max-width:80% !important;
  white-space:nowrap !important;
}

@media (max-width:900px) {
  .v17-signal-field { width:min(620px,92vw) !important; max-width:620px !important; }
  .v17-signal { max-width:135px !important; font-size:9px !important; }
}

@media (max-width:560px) {
  .v17-signal-field { width:94vw !important; max-width:94vw !important; border-radius:24px !important; }
  .v17-core { width:88px !important; height:88px !important; }
  .v17-signal { max-width:112px !important; padding:8px 9px !important; font-size:8px !important; }
  .v17-s1 { left:3% !important; top:22% !important; }
  .v17-s2 { right:3% !important; top:19% !important; }
  .v17-s3 { right:3% !important; bottom:19% !important; }
  .v17-s4 { left:3% !important; bottom:22% !important; }
  .v17-caption { font-size:7px !important; max-width:68% !important; overflow:hidden !important; text-overflow:ellipsis !important; }
}

@media (prefers-reduced-motion:reduce) {
  .v17-orbit,
  .v17-signal-field,
  .v17-signal-field * {
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   SHREE V23 — HERO COMMAND CARD
   Reference-driven rebuild: stable geometry, no 3D tilt,
   intentional motion, crisp glass surfaces.
   ========================================================= */
.shree-command-v23{
  --v23-pink:#ed2f72;
  --v23-ink:#15151b;
  position:relative;width:min(720px,50vw);aspect-ratio:1.02/1;
  overflow:hidden;border:1px solid rgba(20,20,25,.10);border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(249,246,246,.68));
  box-shadow:0 28px 90px rgba(24,24,30,.10),inset 0 1px 0 rgba(255,255,255,.98);
  isolation:isolate;transform:none!important;transition:box-shadow .5s ease,transform .5s ease;
}
.shree-command-v23:hover{transform:translateY(-4px)!important;box-shadow:0 38px 110px rgba(24,24,30,.14),inset 0 1px 0 rgba(255,255,255,.99)}
.v23-topbar{position:absolute;z-index:20;left:0;right:0;top:0;height:62px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(20,20,25,.08);background:rgba(255,255,255,.48);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.v23-brand,.v23-live{display:flex;align-items:center;gap:9px;font:600 8px/1 "STA Mono";letter-spacing:.15em;color:rgba(25,25,31,.64);text-transform:uppercase}.v23-brand strong{font:700 16px/1 "STA Display";letter-spacing:-.07em;color:var(--v23-ink)}.v23-brand i{font-style:normal;color:var(--v23-pink);font-size:13px}.v23-dot{width:7px;height:7px;border-radius:50%;background:var(--v23-pink);box-shadow:0 0 16px rgba(237,47,114,.45)}.v23-live b{color:var(--v23-pink);font-size:12px}.v23-menu-lines{display:grid;gap:4px;margin-left:14px;padding-left:14px;border-left:1px solid rgba(20,20,25,.10)}.v23-menu-lines i{display:block;width:22px;height:1px;background:var(--v23-pink)}
.v23-grid{position:absolute;inset:62px 0 0;background-image:linear-gradient(rgba(25,25,31,.042) 1px,transparent 1px),linear-gradient(90deg,rgba(25,25,31,.042) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,black 0%,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 90%,transparent 100%)}
.v23-glow{position:absolute;z-index:1;width:42%;aspect-ratio:1;left:29%;top:30%;border-radius:50%;background:radial-gradient(circle,rgba(237,47,114,.18),rgba(237,47,114,.07) 35%,transparent 70%);filter:blur(18px);animation:v23Breath 5s ease-in-out infinite}.v23-axis{position:absolute;z-index:2;background:linear-gradient(90deg,transparent,rgba(237,47,114,.18),transparent)}.v23-axis-x{left:8%;right:8%;top:51%;height:1px}.v23-axis-y{top:17%;bottom:24%;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(237,47,114,.18),transparent)}
.v23-orbit{position:absolute;z-index:3;left:50%;top:51%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(20,20,25,.12);pointer-events:none}.v23-orbit-1{width:75%;height:75%;animation:v23Spin 38s linear infinite}.v23-orbit-2{width:58%;height:58%;border-color:rgba(237,47,114,.32);animation:v23Spin 25s linear infinite reverse}.v23-orbit-3{width:42%;height:42%;border-style:dashed;border-color:rgba(237,47,114,.30);animation:v23Spin 18s linear infinite}.v23-orbit-dot{position:absolute;z-index:4;width:7px;height:7px;border-radius:50%;background:#f26796;box-shadow:0 0 14px rgba(237,47,114,.35)}.d-top{left:calc(50% - 3px);top:17%}.d-right{right:11%;top:calc(51% - 3px)}.d-bottom{left:calc(50% - 3px);top:76%}.d-left{left:11%;top:calc(51% - 3px)}
.v23-route{position:absolute;z-index:5;height:1px;background:linear-gradient(90deg,rgba(237,47,114,.18),rgba(237,47,114,.75));transform-origin:left center}.v23-route:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--v23-pink);box-shadow:0 0 12px rgba(237,47,114,.4);right:-2px;top:-3px}.r-connect{width:28%;left:25%;top:39%;transform:rotate(25deg)}.r-cloud{width:28%;right:25%;top:39%;transform:rotate(155deg);transform-origin:right center}.r-security{width:28%;left:25%;bottom:39%;transform:rotate(-25deg)}.r-data{width:28%;right:25%;bottom:39%;transform:rotate(-155deg);transform-origin:right center}
.v23-node{position:absolute;z-index:12;min-width:174px;height:56px;padding:0 16px;display:flex;align-items:center;gap:12px;border:1px solid rgba(20,20,25,.10);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 13px 30px rgba(20,20,25,.06),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--v23-ink);font:600 9px/1 "STA Mono";letter-spacing:.11em;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.v23-node:hover{transform:translateY(-3px);border-color:rgba(237,47,114,.28);box-shadow:0 18px 40px rgba(20,20,25,.10),0 0 0 3px rgba(237,47,114,.035)}.v23-node-icon{color:var(--v23-pink);font:700 18px/1 "STA Display"}.v23-node strong{font-weight:600}.v23-node>b{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--v23-pink);box-shadow:0 0 12px rgba(237,47,114,.45)}.n-connect{left:8%;top:28%}.n-cloud{right:8%;top:28%}.n-security{left:8%;bottom:28%}.n-data{right:8%;bottom:28%}
.v23-core{position:absolute;z-index:14;left:50%;top:51%;width:31%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(circle at 35% 28%,#292a30,#101115 72%);border:1px solid rgba(255,255,255,.28);box-shadow:0 25px 70px rgba(20,20,25,.20),0 0 0 9px rgba(237,47,114,.045),0 0 55px rgba(237,47,114,.20),inset 0 1px 0 rgba(255,255,255,.15);overflow:visible}.v23-core:before,.v23-core:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(237,47,114,.22);animation:v23Pulse 4.5s ease-in-out infinite}.v23-core:after{inset:-20px;border-color:rgba(237,47,114,.10);animation-delay:1.2s}.v23-core strong{position:relative;color:#fff;font:500 clamp(25px,3.3vw,44px)/.9 "STA Display";letter-spacing:-.08em}.v23-core span{position:relative;margin-top:9px;color:rgba(255,255,255,.57);font:500 6px/1 "STA Mono";letter-spacing:.18em}.v23-core i{position:relative;width:24px;height:1px;background:var(--v23-pink);margin:11px 0 8px}.v23-core em{position:relative;color:var(--v23-pink);font:600 5.5px/1 "STA Mono";letter-spacing:.13em;font-style:normal}
.v23-values{position:absolute;z-index:18;left:5%;right:5%;bottom:13.2%;height:55px;padding:0 8%;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(20,20,25,.09);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 12px 30px rgba(20,20,25,.06),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:600 7px/1 "STA Mono";letter-spacing:.15em;color:rgba(25,25,31,.72)}.v23-values i{height:22px;width:1px;background:rgba(20,20,25,.12)}.v23-values span{display:flex;align-items:center;gap:8px}.v23-values b{width:7px;height:7px;border-radius:50%;background:var(--v23-pink);box-shadow:0 0 12px rgba(237,47,114,.4)}
.v23-stats{position:absolute;z-index:18;left:5%;right:5%;bottom:2.4%;height:9.5%;min-height:55px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(20,20,25,.08);border-radius:18px;background:rgba(255,255,255,.68);box-shadow:0 12px 30px rgba(20,20,25,.045),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.v23-stats div{position:relative;padding:8px 18px;display:flex;flex-direction:column;justify-content:center}.v23-stats div+div:before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(20,20,25,.10)}.v23-stats span{font:600 5.5px/1.2 "STA Mono";letter-spacing:.13em;color:rgba(25,25,31,.55)}.v23-stats strong{margin-top:5px;color:var(--v23-pink);font:600 10px/1 "STA Display";letter-spacing:-.03em}
@keyframes v23Spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes v23Breath{50%{transform:scale(1.09);opacity:.72}}@keyframes v23Pulse{50%{transform:scale(1.035);opacity:.35}}
html[data-theme=dark] .shree-command-v23{background:linear-gradient(145deg,rgba(26,27,33,.90),rgba(18,19,24,.72));border-color:rgba(255,255,255,.12);box-shadow:0 30px 100px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}html[data-theme=dark] .v23-topbar,html[data-theme=dark] .v23-values,html[data-theme=dark] .v23-stats{background:rgba(18,19,24,.64);border-color:rgba(255,255,255,.10)}html[data-theme=dark] .v23-grid{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}html[data-theme=dark] .v23-brand strong,html[data-theme=dark] .v23-node,html[data-theme=dark] .v23-values{color:#fff}html[data-theme=dark] .v23-brand,html[data-theme=dark] .v23-live,html[data-theme=dark] .v23-values,html[data-theme=dark] .v23-stats span{color:rgba(255,255,255,.62)}html[data-theme=dark] .v23-node{background:rgba(22,23,29,.72);border-color:rgba(255,255,255,.11)}html[data-theme=dark] .v23-stats div+div:before,html[data-theme=dark] .v23-values i{background:rgba(255,255,255,.11)}
@media(max-width:1100px){.shree-command-v23{width:min(720px,92vw)}}
@media(max-width:700px){.hero-visual{min-height:510px}.shree-command-v23{width:100%;aspect-ratio:.88;border-radius:24px}.v23-topbar{height:52px;padding:0 15px}.v23-brand strong{font-size:13px}.v23-brand span:last-child{font-size:6px}.v23-live{font-size:6px}.v23-menu-lines{display:none}.v23-grid{top:52px;background-size:28px 28px}.v23-node{min-width:130px;height:42px;padding:0 11px;gap:8px;font-size:6.5px}.v23-node-icon{font-size:14px}.n-connect{left:4%;top:24%}.n-cloud{right:4%;top:24%}.n-security{left:4%;bottom:28%}.n-data{right:4%;bottom:28%}.v23-core{width:30%}.v23-values{left:4%;right:4%;bottom:15%;height:44px;padding:0 5%;font-size:5.5px;letter-spacing:.08em}.v23-values i{height:15px}.v23-values span{gap:4px}.v23-values b{width:5px;height:5px}.v23-stats{left:4%;right:4%;bottom:2%;height:11%;min-height:55px;border-radius:14px}.v23-stats div{padding:6px 8px}.v23-stats span{font-size:4.2px}.v23-stats strong{font-size:7px}.v23-stats div+div:before{top:20%;bottom:20%}.v23-route{width:24%}}
@media(max-width:470px){.v23-node{min-width:112px;height:38px;padding:0 9px;font-size:5.5px}.v23-node-icon{display:none}.v23-core{width:28%}.v23-values{font-size:4.7px}.v23-stats span{font-size:3.7px}.v23-stats strong{font-size:6px}.v23-live{display:none}}
@media(prefers-reduced-motion:reduce){.v23-orbit,.v23-glow,.v23-core:before,.v23-core:after{animation:none}.shree-command-v23:hover{transform:none!important}}


/* =========================================================
   SHREE V24 — HERO FRAME / SCALE FIX
   Keeps the command layer inside the visual frame.
   ========================================================= */

.hero-visual {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.command-layer,
.hero-command,
.command-hero,
.v23-command-layer,
.v23-hero-card,
.hero-visual .signal-field,
.hero-visual .v23-signal-field {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  height: auto !important;
  max-height: min(760px, calc(100vh - 150px)) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  transform: none !important;
}

/* If the V23 field uses a different class, this catches the
   common full-frame visual container without changing its design. */
.hero-visual > div {
  max-width: 100% !important;
  min-width: 0 !important;
}

.hero-visual .orbit,
.hero-visual .ring,
.hero-visual [class*="orbit"],
.hero-visual [class*="ring"] {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Keep the central hub proportional instead of pushing the
   surrounding rings outside the card. */
.hero-visual .core,
.hero-visual .hub,
.hero-visual [class*="core"],
.hero-visual [class*="hub"] {
  left: 50% !important;
  top: 50% !important;
  max-width: 24% !important;
  max-height: 24% !important;
}

/* Prevent node pills from extending past the visual. */
.hero-visual .node,
.hero-visual .signal,
.hero-visual [class*="node"],
.hero-visual [class*="signal"] {
  max-width: 22% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

/* Desktop: slightly smaller so the complete composition breathes. */
@media (min-width: 1200px) {
  .hero-visual {
    padding: 18px !important;
  }

  .command-layer,
  .hero-command,
  .command-hero,
  .v23-command-layer,
  .v23-hero-card,
  .hero-visual .signal-field,
  .hero-visual .v23-signal-field {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    max-height: 700px !important;
  }
}

/* Laptop/tablet */
@media (max-width: 1100px) {
  .hero-visual {
    padding: 12px !important;
  }

  .command-layer,
  .hero-command,
  .command-hero,
  .v23-command-layer,
  .v23-hero-card,
  .hero-visual .signal-field,
  .hero-visual .v23-signal-field {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    max-height: 620px !important;
  }
}

/* Mobile: use a slightly wider visual but never let it escape. */
@media (max-width: 700px) {
  .hero-visual {
    width: 100% !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .command-layer,
  .hero-command,
  .command-hero,
  .v23-command-layer,
  .v23-hero-card,
  .hero-visual .signal-field,
  .hero-visual .v23-signal-field {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    max-height: none !important;
  }

  .hero-visual .node,
  .hero-visual .signal,
  .hero-visual [class*="node"],
  .hero-visual [class*="signal"] {
    max-width: 25% !important;
    font-size: clamp(7px, 1.8vw, 10px) !important;
  }
}

@media (max-width: 480px) {
  .hero-visual {
    padding: 4px !important;
  }

  .hero-visual .node,
  .hero-visual .signal,
  .hero-visual [class*="node"],
  .hero-visual [class*="signal"] {
    max-width: 27% !important;
    padding: 6px 7px !important;
  }
}

/* =========================================================
   SHREE V26 — CASE STUDIES / STORY SYSTEM
   A case-study experience, not a repeated card template.
   ========================================================= */
.case-stories-section{padding-top:55px!important}
.case-story-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);gap:60px;align-items:end;margin-bottom:58px}
.case-story-intro h2{font-size:clamp(52px,7vw,104px);line-height:.82;letter-spacing:-.085em;margin:16px 0 0;font-weight:500}
.case-story-intro h2 span,.case-story-close h2 span{color:var(--pink)}
.case-story-intro-copy{padding-bottom:6px}
.case-story-intro-copy p{max-width:560px;color:var(--muted);font-size:15px;line-height:1.7}
.case-story-principles{display:flex;align-items:center;gap:10px;margin-top:24px;font:500 7px/1 "STA Mono";letter-spacing:.14em;color:var(--muted)}
.case-story-principles i{width:3px;height:3px;background:var(--pink);border-radius:50%}
.case-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.case-story{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr);min-height:570px;border:1px solid rgba(20,20,25,.10);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.66);box-shadow:0 24px 70px rgba(20,20,25,.055),inset 0 1px 0 rgba(255,255,255,.96);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .45s}
.case-story-feature{grid-column:1/-1;min-height:600px;grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr);background:linear-gradient(118deg,rgba(255,255,255,.83),rgba(255,247,250,.62))}
.case-story:hover{transform:translateY(-7px);border-color:rgba(232,63,120,.25);box-shadow:0 36px 100px rgba(20,20,25,.10),0 0 0 1px rgba(232,63,120,.025)}
.case-story-copy{padding:clamp(34px,4.8vw,68px);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:4}
.story-index{display:flex;align-items:center;gap:12px;margin-bottom:25px;color:var(--pink);font:500 9px/1 "STA Mono";letter-spacing:.15em}
.story-index span{color:var(--muted);font-size:6px}
.case-story .case-meta{margin-bottom:20px!important}
.case-story .case-meta span{font-size:7px!important}
.case-story h3{font-size:clamp(36px,4vw,60px);line-height:.91;letter-spacing:-.07em;font-weight:500;max-width:610px;margin:0 0 18px}
.case-story:not(.case-story-feature) h3{font-size:clamp(32px,3.3vw,48px)}
.story-thesis{font-size:16px!important;line-height:1.55!important;color:var(--ink)!important;max-width:590px!important;margin-bottom:28px!important}
.story-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:23px;border-top:1px solid var(--line);max-width:690px}
.story-proof.compact{grid-template-columns:1fr;gap:17px;max-width:520px}
.story-proof small{display:block;margin-bottom:8px;color:var(--pink);font:500 7px/1 "STA Mono";letter-spacing:.13em}
.story-proof p{margin:0!important;font-size:12px!important;line-height:1.55!important;color:var(--muted)!important}
.case-story-visual{position:relative;min-height:100%;overflow:hidden;border-left:1px solid rgba(20,20,25,.08);background:radial-gradient(circle at 50% 50%,rgba(232,63,120,.12),transparent 24%),linear-gradient(rgba(20,20,25,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,25,.04) 1px,transparent 1px),linear-gradient(145deg,rgba(249,247,245,.95),rgba(239,236,233,.68));background-size:auto,32px 32px,32px 32px,auto;isolation:isolate}
.case-story-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(232,63,120,.07),transparent 34%),linear-gradient(120deg,transparent 47%,rgba(232,63,120,.035) 50%,transparent 53%);pointer-events:none}
.story-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(20,20,25,.13);z-index:1}
.story-ring.sr1{width:78%;height:78%;animation:storySpin 32s linear infinite}
.story-ring.sr2{width:55%;height:55%;border-color:rgba(232,63,120,.24);border-style:dashed;animation:storySpin 19s linear infinite reverse}
.story-ring.sr3{width:34%;height:34%;border-color:rgba(232,63,120,.44);animation:storySpin 13s linear infinite}
.story-ring:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 15px var(--pink-glow);left:50%;top:-3px;transform:translateX(-50%)}
.story-route{position:absolute;height:1px;z-index:3;background:linear-gradient(90deg,transparent,rgba(232,63,120,.48),transparent);transform-origin:left center}
.rr1{width:34%;left:7%;top:32%;transform:rotate(20deg)}.rr2{width:31%;right:8%;top:34%;transform:rotate(158deg);transform-origin:right center}.rr3{width:32%;left:8%;bottom:31%;transform:rotate(-18deg)}.rr4{width:30%;right:8%;bottom:34%;transform:rotate(-160deg);transform-origin:right center}.rr5{width:24%;left:50%;top:9%;transform:translateX(-50%) rotate(90deg);transform-origin:center}
.story-core{position:absolute;left:50%;top:50%;width:104px;height:104px;transform:translate(-50%,-50%);z-index:6;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#2a272d,#151519);border:1px solid rgba(232,63,120,.76);box-shadow:0 22px 65px rgba(232,63,120,.20),0 0 0 10px rgba(232,63,120,.035),inset 0 1px 0 rgba(255,255,255,.12)}
.story-core:before{content:"";position:absolute;inset:-14px;border:1px solid rgba(232,63,120,.18);border-radius:50%;animation:storyPulse 4.5s ease-in-out infinite}
.story-core strong{color:#fff;font:500 23px/1 "STA Display";letter-spacing:-.07em}.story-core small{margin-top:8px;color:var(--pink);font:500 5px/1 "STA Mono";letter-spacing:.15em}
.visual-label{position:absolute;z-index:8;padding:7px 9px;border:1px solid rgba(20,20,25,.10);border-radius:999px;background:rgba(255,255,255,.66);backdrop-filter:blur(12px);font:500 6px/1 "STA Mono";letter-spacing:.12em;color:var(--muted);box-shadow:0 8px 20px rgba(20,20,25,.035)}
.visual-label-a{left:8%;top:10%}.visual-label-b{right:8%;top:17%}.visual-label-c{right:8%;bottom:17%}.visual-label-d{left:8%;bottom:10%;color:var(--pink);border-color:rgba(232,63,120,.20)}
.story-node,.portfolio-node{position:absolute;z-index:8;padding:7px 8px;border:1px solid rgba(20,20,25,.09);border-radius:7px;background:rgba(255,255,255,.60);font:500 5.5px/1 "STA Mono";letter-spacing:.12em;color:var(--muted);box-shadow:0 8px 22px rgba(20,20,25,.04)}
.sn1{left:14%;top:37%}.sn2{right:14%;top:38%}.sn3{left:16%;bottom:36%}.pb1{position:absolute;left:16%;top:35%;width:34px;height:26px;border:1px solid rgba(20,20,25,.12);background:rgba(255,255,255,.5);border-radius:4px;z-index:5}.pb2{position:absolute;right:15%;top:43%;width:46px;height:32px;border:1px solid rgba(20,20,25,.12);background:rgba(255,255,255,.5);border-radius:4px;z-index:5}.pb3{position:absolute;left:25%;bottom:26%;width:42px;height:24px;border:1px solid rgba(232,63,120,.18);background:rgba(255,241,246,.45);border-radius:4px;z-index:5}
.pn1{left:13%;top:32%}.pn2{right:12%;top:28%}.pn3{left:14%;bottom:30%}.gn1{left:12%;top:30%}.gn2{right:12%;top:27%}.gn3{right:12%;bottom:30%}.gn4{left:18%;bottom:19%;color:var(--pink);border-color:rgba(232,63,120,.24)}
.case-story-close{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,.75fr);gap:80px;align-items:end;padding:100px 0 20px}
.case-story-close h2{font-size:clamp(48px,6vw,88px);line-height:.84;letter-spacing:-.08em;margin:15px 0 0;font-weight:500}.case-story-close p{max-width:570px;color:var(--muted);font-size:15px;line-height:1.7;margin:0}
@keyframes storySpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes storyPulse{0%,100%{transform:scale(.98);opacity:.42}50%{transform:scale(1.06);opacity:.9}}
html[data-theme=dark] .case-story{background:rgba(20,21,27,.68);border-color:rgba(255,255,255,.10)}
html[data-theme=dark] .case-story-feature{background:linear-gradient(118deg,rgba(24,25,31,.82),rgba(40,20,30,.62))}
html[data-theme=dark] .case-story-visual{border-left-color:rgba(255,255,255,.08);background:radial-gradient(circle at 50% 50%,rgba(255,77,131,.12),transparent 24%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(145deg,rgba(25,26,32,.92),rgba(18,19,24,.78));background-size:auto,32px 32px,32px 32px,auto}
html[data-theme=dark] .visual-label,html[data-theme=dark] .story-node,html[data-theme=dark] .portfolio-node{background:rgba(20,21,27,.60);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.66)}
@media(max-width:1050px){.case-story-intro{grid-template-columns:1fr;gap:20px}.case-story-grid{grid-template-columns:1fr}.case-story,.case-story-feature{grid-column:auto;grid-template-columns:1fr;min-height:0}.case-story-visual{min-height:390px;border-left:0;border-top:1px solid var(--line)}.case-story-copy{padding:40px}.story-proof{grid-template-columns:1fr 1fr}.case-story-close{grid-template-columns:1fr;gap:24px}}
@media(max-width:600px){.case-stories-section{padding-top:30px!important}.case-story-intro h2{font-size:clamp(52px,16vw,82px)}.case-story-copy{padding:28px}.case-story h3,.case-story:not(.case-story-feature) h3{font-size:clamp(34px,10vw,52px)}.story-proof{grid-template-columns:1fr;gap:18px}.case-story-visual{min-height:330px}.story-core{width:86px;height:86px}.story-core strong{font-size:20px}.visual-label{font-size:5px;padding:6px 7px}.case-story-close{padding-top:70px}}
@media(prefers-reduced-motion:reduce){.story-ring,.story-core:before{animation:none!important}.case-story:hover{transform:none}}


/* =========================================================
   SHREE V27 — CASE STUDY GEOMETRY / RENDER FIX
   The previous visual used percentage width + percentage height
   on a rectangular column, which created stretched ellipses and
   overflow/stacking artifacts. V27 makes the visual a contained
   square stage.
   ========================================================= */

.case-story,
.case-story-copy,
.case-story-visual {
  min-width: 0 !important;
  min-height: 0 !important;
}

.case-story-visual {
  width: 100% !important;
  height: auto !important;
  min-height: 600px !important;
  overflow: hidden !important;
  contain: layout paint !important;
  isolation: isolate !important;
  position: relative !important;
}

.case-story-feature .case-story-visual {
  min-height: 600px !important;
}

.story-visual-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  contain: layout paint !important;
  isolation: isolate !important;
}

/* Every orbit is a true circle, never an ellipse. */
.story-visual-stage .story-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(78%, 600px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.story-visual-stage .story-ring.sr2 {
  width: min(56%, 430px) !important;
}

.story-visual-stage .story-ring.sr3 {
  width: min(35%, 270px) !important;
}

/* Keep all line geometry inside the stage. */
.story-visual-stage .story-route {
  max-width: 38% !important;
  left: auto;
  right: auto;
  overflow: hidden !important;
  pointer-events: none !important;
}

.story-visual-stage .rr1 { left: 10% !important; top: 34% !important; width: 31% !important; transform: rotate(16deg) !important; }
.story-visual-stage .rr2 { right: 10% !important; top: 36% !important; width: 31% !important; transform: rotate(164deg) !important; transform-origin: right center !important; }
.story-visual-stage .rr3 { left: 10% !important; bottom: 34% !important; width: 31% !important; transform: rotate(-16deg) !important; }
.story-visual-stage .rr4 { right: 10% !important; bottom: 36% !important; width: 31% !important; transform: rotate(-164deg) !important; transform-origin: right center !important; }
.story-visual-stage .rr5 { left: 50% !important; top: 11% !important; width: 18% !important; transform: translateX(-50%) rotate(90deg) !important; transform-origin: center !important; }

/* Central node is always geometrically centered and never clipped. */
.story-visual-stage .story-core {
  left: 50% !important;
  top: 50% !important;
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

/* Labels/nodes stay inside the stage instead of colliding with rings. */
.story-visual-stage .visual-label,
.story-visual-stage .story-node,
.story-visual-stage .portfolio-node,
.story-visual-stage .property-block {
  box-sizing: border-box !important;
  max-width: 30% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.story-visual-stage .visual-label-a { left: 6% !important; top: 8% !important; }
.story-visual-stage .visual-label-b { right: 6% !important; top: 13% !important; }
.story-visual-stage .visual-label-c { right: 6% !important; bottom: 13% !important; }
.story-visual-stage .visual-label-d { left: 6% !important; bottom: 8% !important; }

.story-visual-stage .sn1 { left: 10% !important; top: 36% !important; }
.story-visual-stage .sn2 { right: 10% !important; top: 38% !important; }
.story-visual-stage .sn3 { left: 11% !important; bottom: 34% !important; }

.story-visual-stage .pn1 { left: 10% !important; top: 32% !important; }
.story-visual-stage .pn2 { right: 10% !important; top: 29% !important; }
.story-visual-stage .pn3 { left: 10% !important; bottom: 30% !important; }

.story-visual-stage .gn1 { left: 9% !important; top: 31% !important; }
.story-visual-stage .gn2 { right: 9% !important; top: 28% !important; }
.story-visual-stage .gn3 { right: 9% !important; bottom: 30% !important; }
.story-visual-stage .gn4 { left: 13% !important; bottom: 18% !important; }

/* Make the visual breathe rather than letting it become a huge wall. */
@media (min-width: 1051px) {
  .case-story-visual {
    display: grid !important;
    place-items: center !important;
  }

  .case-story-visual .story-visual-stage {
    inset: 5% !important;
    width: 90% !important;
    height: 90% !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 50% 50%, rgba(232,63,120,.045), transparent 54%);
  }
}

@media (max-width: 1050px) {
  .case-story-visual,
  .case-story-feature .case-story-visual {
    min-height: 430px !important;
    height: 430px !important;
  }

  .story-visual-stage {
    inset: 0 !important;
  }
}

@media (max-width: 600px) {
  .case-story-visual,
  .case-story-feature .case-story-visual {
    min-height: 340px !important;
    height: 340px !important;
  }

  .story-visual-stage .story-ring { width: 82% !important; }
  .story-visual-stage .story-ring.sr2 { width: 58% !important; }
  .story-visual-stage .story-ring.sr3 { width: 37% !important; }

  .story-visual-stage .story-core {
    width: 84px !important;
    height: 84px !important;
  }

  .story-visual-stage .story-core strong {
    font-size: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-visual-stage .story-ring,
  .story-visual-stage .story-core::before {
    animation: none !important;
  }
}


/* =========================================================
   SHREE V28 — CASE STUDIES / FINAL GEOMETRY CLEANUP

   V27 still carried the legacy case-study markup after the
   redesigned case-story system. The duplicate section could
   render the old visual and make the page appear broken.

   V28 also makes each visual a contained square composition,
   rather than allowing a tall rectangular visual column to
   dictate the geometry of the orbit system.
   ========================================================= */

/* The redesigned case-study system is the only case system. */
.case-stories-section {
  position: relative;
  z-index: 1;
}

.case-story-grid {
  align-items: stretch !important;
  grid-auto-flow: row !important;
}

.case-story {
  min-width: 0 !important;
  overflow: hidden !important;
}

.case-story-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Visual column becomes a calm frame, not a full-height canvas. */
.case-story-visual {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  isolation: isolate !important;
  contain: layout paint !important;
  border-left: 1px solid rgba(20,20,25,.08) !important;
}

/* The actual artwork gets a square footprint inside the frame. */
.case-story-visual .story-visual-stage {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 560px) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: none !important;
  margin: auto !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(232,63,120,.075), transparent 42%),
    linear-gradient(rgba(20,20,25,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,25,.035) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px !important;
}

/* Keep the artwork centered and genuinely circular. */
.case-story-visual .story-ring {
  left: 50% !important;
  top: 50% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

.case-story-visual .story-ring.sr1 { width: 76% !important; }
.case-story-visual .story-ring.sr2 { width: 55% !important; }
.case-story-visual .story-ring.sr3 { width: 34% !important; }

.case-story-visual .story-core {
  left: 50% !important;
  top: 50% !important;
  width: 102px !important;
  height: 102px !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* Lines terminate inside the stage. */
.case-story-visual .story-route {
  pointer-events: none !important;
  max-width: 32% !important;
}

.case-story-visual .rr1 { left: 9% !important; top: 35% !important; width: 30% !important; }
.case-story-visual .rr2 { right: 9% !important; top: 37% !important; width: 30% !important; }
.case-story-visual .rr3 { left: 9% !important; bottom: 35% !important; width: 30% !important; }
.case-story-visual .rr4 { right: 9% !important; bottom: 37% !important; width: 30% !important; }
.case-story-visual .rr5 { left: 50% !important; top: 10% !important; width: 18% !important; }

/* Labels are intentionally small and never allowed to become
   the dominant visual element. */
.case-story-visual .visual-label,
.case-story-visual .story-node,
.case-story-visual .portfolio-node {
  max-width: 25% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.case-story-visual .visual-label-a { left: 6% !important; top: 7% !important; }
.case-story-visual .visual-label-b { right: 6% !important; top: 12% !important; }
.case-story-visual .visual-label-c { right: 6% !important; bottom: 12% !important; }
.case-story-visual .visual-label-d { left: 6% !important; bottom: 7% !important; }

/* Remove any accidental legacy pseudo-elements from old case
   visuals if a stale selector survives elsewhere in the CSS. */
.case-story-visual > .case-visual,
.case-story-visual > .case-feature {
  display: none !important;
}

/* Feature cases get a little more breathing room without
   making their artwork enormous. */
.case-story-feature .case-story-visual {
  min-height: 600px !important;
}

.case-story:not(.case-story-feature) .case-story-visual {
  min-height: 520px !important;
}

@media (max-width: 1050px) {
  .case-story,
  .case-story-feature {
    grid-template-columns: 1fr !important;
  }

  .case-story-visual,
  .case-story-feature .case-story-visual,
  .case-story:not(.case-story-feature) .case-story-visual {
    min-height: 420px !important;
    height: 420px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }

  .case-story-visual .story-visual-stage {
    width: min(92%, 440px) !important;
  }
}

@media (max-width: 600px) {
  .case-story-visual,
  .case-story-feature .case-story-visual,
  .case-story:not(.case-story-feature) .case-story-visual {
    min-height: 340px !important;
    height: 340px !important;
  }

  .case-story-visual .story-visual-stage {
    width: min(94%, 330px) !important;
    border-radius: 22px !important;
  }

  .case-story-visual .story-ring.sr1 { width: 78% !important; }
  .case-story-visual .story-ring.sr2 { width: 57% !important; }
  .case-story-visual .story-ring.sr3 { width: 36% !important; }

  .case-story-visual .story-core {
    width: 84px !important;
    height: 84px !important;
  }

  .case-story-visual .visual-label,
  .case-story-visual .story-node,
  .case-story-visual .portfolio-node {
    max-width: 29% !important;
    font-size: 5px !important;
    padding: 6px 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-story-visual .story-ring,
  .case-story-visual .story-core::before {
    animation: none !important;
  }
}


/* =========================================================
   SHREE V29 — ISOLATED CASE-STUDY ART SYSTEM
   The previous visual system is no longer used by the HTML.
   These classes are intentionally unique so legacy geometry
   cannot affect the case-study artwork.
   ========================================================= */

.sta-case-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(232,63,120,.075), transparent 34%),
    linear-gradient(rgba(20,20,25,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,25,.035) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,243,241,.78));
  background-size:auto, 32px 32px, 32px 32px, auto;
}

.sta-art-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(232,63,120,.08) 50%, transparent 50.1%),
    linear-gradient(transparent 49.9%, rgba(232,63,120,.08) 50%, transparent 50.1%);
  background-size:100% 100%;
  opacity:.35;
  pointer-events:none;
}

.sta-art-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:38%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,63,120,.18), rgba(232,63,120,.035) 45%, transparent 72%);
  filter:blur(4px);
  z-index:0;
}

.sta-art-orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--orbit-size);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid var(--orbit-border);
  border-radius:50%;
  z-index:1;
  box-sizing:border-box;
  pointer-events:none;
}
.sta-o1{--orbit-size:82%;--orbit-border:rgba(30,30,35,.12);animation:staOrbitA 30s linear infinite}
.sta-o2{--orbit-size:58%;--orbit-border:rgba(232,63,120,.25);border-style:dashed;animation:staOrbitB 21s linear infinite}
.sta-o3{--orbit-size:37%;--orbit-border:rgba(232,63,120,.48);animation:staOrbitA 15s linear infinite}

.sta-art-orbit::after{
  content:"";
  position:absolute;
  left:50%;
  top:-4px;
  width:7px;
  height:7px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 18px var(--pink-glow);
}

.sta-art-route{
  position:absolute;
  left:50%;
  top:50%;
  width:30%;
  height:1px;
  transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(232,63,120,.05), rgba(232,63,120,.46), transparent);
  z-index:2;
  pointer-events:none;
}
.sta-r1{transform:translateY(-50%) rotate(18deg)}
.sta-r2{transform:translateY(-50%) rotate(162deg);transform-origin:100% 50%;left:auto;right:20%}
.sta-r3{transform:translateY(-50%) rotate(-18deg)}
.sta-r4{transform:translateY(-50%) rotate(-162deg);transform-origin:100% 50%;left:auto;right:20%}

.sta-art-core{
  position:absolute;
  left:50%;
  top:50%;
  width:112px;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:6;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#29272d,#101116);
  border:1px solid rgba(232,63,120,.82);
  box-shadow:
    0 22px 55px rgba(20,20,25,.18),
    0 0 0 9px rgba(232,63,120,.055),
    0 0 42px rgba(232,63,120,.20);
}
.sta-art-core::before{
  content:"";
  position:absolute;
  inset:-16px;
  border:1px solid rgba(232,63,120,.17);
  border-radius:50%;
  animation:staCorePulse 4.5s ease-in-out infinite;
}
.sta-art-core strong{
  color:#fff;
  font:500 24px/1 "STA Display";
  letter-spacing:-.07em;
}
.sta-art-core small{
  margin-top:9px;
  color:var(--pink);
  font:500 5px/1 "STA Mono";
  letter-spacing:.16em;
}

.sta-art-label,
.sta-art-node{
  position:absolute;
  z-index:8;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
  font-family:"STA Mono";
  letter-spacing:.11em;
}
.sta-art-label{
  padding:7px 9px;
  border:1px solid rgba(20,20,25,.10);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(10px);
  color:var(--muted);
  font-size:6px;
  box-shadow:0 10px 26px rgba(20,20,25,.04);
}
.sta-art-label.a{left:6%;top:7%}
.sta-art-label.b{right:6%;top:12%}
.sta-art-label.c{right:6%;bottom:12%}
.sta-art-label.d{left:6%;bottom:7%;color:var(--pink);border-color:rgba(232,63,120,.20)}

.sta-art-node{
  padding:8px 10px;
  border:1px solid rgba(20,20,25,.10);
  border-radius:8px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:5.5px;
  box-shadow:0 10px 25px rgba(20,20,25,.045);
}
.sta-art-node.n1{left:11%;top:34%}
.sta-art-node.n2{right:11%;top:38%}
.sta-art-node.n3{left:13%;bottom:30%}
.sta-art-node.n4{left:16%;bottom:18%;color:var(--pink);border-color:rgba(232,63,120,.22)}

.sta-art-hospitality .sta-art-node.n1{left:10%;top:31%}
.sta-art-hospitality .sta-art-node.n2{right:10%;top:31%}
.sta-art-hospitality .sta-art-node.n3{right:12%;bottom:27%}

.sta-art-portfolio .sta-art-node.n1{left:9%;top:32%}
.sta-art-portfolio .sta-art-node.n2{right:10%;top:27%}
.sta-art-portfolio .sta-art-node.n3{left:10%;bottom:28%}

.sta-art-growth .sta-art-node.n1{left:9%;top:31%}
.sta-art-growth .sta-art-node.n2{right:9%;top:27%}
.sta-art-growth .sta-art-node.n3{right:9%;bottom:29%}
.sta-art-growth .sta-art-node.n4{left:14%;bottom:18%}

@keyframes staOrbitA{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes staOrbitB{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0deg)}
}
@keyframes staCorePulse{
  0%,100%{transform:scale(.98);opacity:.42}
  50%{transform:scale(1.06);opacity:.9}
}

/* Critical containment: the artwork never affects the card's
   grid size or spills into the copy column. */
.case-story-visual{
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  contain:layout paint size !important;
}
.case-story-visual > .sta-case-art{
  position:absolute !important;
  inset:0 !important;
}

/* Kill any old visual children if a browser restores stale DOM. */
.case-story-visual > .story-visual-stage,
.case-story-visual > .case-visual,
.case-story-visual > .case-feature{
  display:none !important;
}

@media(max-width:1050px){
  .case-story-visual{
    height:420px !important;
    min-height:420px !important;
    border-left:0 !important;
    border-top:1px solid var(--line) !important;
  }
}
@media(max-width:600px){
  .case-story-visual{
    height:340px !important;
    min-height:340px !important;
  }
  .sta-art-core{width:84px}
  .sta-art-core strong{font-size:18px}
  .sta-art-core small{font-size:4px}
  .sta-art-label{font-size:5px;padding:6px 7px}
  .sta-art-node{font-size:5px;padding:6px 7px}
}
@media(prefers-reduced-motion:reduce){
  .sta-art-orbit,.sta-art-core::before{animation:none !important}
}
html[data-theme=dark] .sta-case-art{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,77,131,.10), transparent 34%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(145deg, rgba(25,26,32,.96), rgba(18,19,24,.86));
  background-size:auto,32px 32px,32px 32px,auto;
}
html[data-theme=dark] .sta-art-label,
html[data-theme=dark] .sta-art-node{
  background:rgba(20,21,27,.72);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.68);
}


/* =========================================================
   SHREE V30 — CASE STUDY LAYER / TEXT CLEARANCE FIX
   Decorative artwork stays behind readable information.
   ========================================================= */

.case-story,
.case-story * {
  box-sizing: border-box;
}

.case-story {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Copy is always the readable foreground layer. */
.case-story-copy {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate !important;
  background: transparent !important;
}

.case-story-copy h2,
.case-story-copy h3,
.case-story-copy p,
.case-story-copy .eyebrow,
.case-story-copy .case-meta,
.case-story-copy .case-result,
.case-story-copy .case-tags,
.case-story-copy .case-number {
  position: relative !important;
  z-index: 31 !important;
}

/* Artwork is its own clipped layer. */
.case-story-visual {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Every V29 visual primitive stays below any readable copy. */
.case-story-visual .v29-stage,
.case-story-visual .v29-stage *,
.case-story-visual .v29-ring,
.case-story-visual .v29-core,
.case-story-visual .v29-node,
.case-story-visual .v29-line,
.case-story-visual .v29-grid {
  z-index: 1;
}

/* Make sure the actual visual canvas clips all decorative elements. */
.case-story-visual .v29-stage {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: layout paint !important;
}

/* Grid / glows can never become a foreground layer. */
.case-story-visual .v29-grid,
.case-story-visual::before,
.case-story-visual::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Nodes/lines cannot visually cross outside their visual column. */
.case-story-visual .v29-line,
.case-story-visual .v29-node,
.case-story-visual .v29-ring,
.case-story-visual .v29-core {
  pointer-events: none !important;
}

/* If a case has an overlapping visual on narrower layouts,
   stack it below the copy instead of letting it cross the text. */
@media (max-width: 1050px) {
  .case-story {
    overflow: hidden !important;
  }

  .case-story-copy {
    z-index: 40 !important;
    background: var(--surface, #fff) !important;
  }

  .case-story-visual {
    z-index: 1 !important;
  }
}

/* On phones, give the text its own clean breathing zone. */
@media (max-width: 700px) {
  .case-story-copy {
    padding-bottom: 18px !important;
  }

  .case-story-visual {
    margin-top: 0 !important;
  }
}

/* Dark mode keeps the same separation without a light block. */
html[data-theme="dark"] .case-story-copy {
  background: var(--surface, #111217) !important;
}


/* =========================================================
   SHREE V31 — OFFICIAL BRAND MARK INTEGRATION
   ========================================================= */
.brand-logo{
  display:block;
  width:auto;
  height:30px;
  max-width:42px;
  object-fit:contain;
  flex:0 0 auto;
}
.brand{gap:12px}
.footer-brand .brand-logo{height:34px;max-width:48px}

.loader-wordmark{display:flex;align-items:center;gap:18px}
.loader-wordmark img{
  width:auto;height:58px;max-width:86px;object-fit:contain;flex:0 0 auto;
}
.loader-wordmark > span{
  display:flex;flex-direction:column;gap:5px;color:#f7f5f2;
  font:500 clamp(30px,5vw,72px)/.86 "STA Display";
  letter-spacing:-.065em;text-transform:uppercase;
}
.loader-wordmark > span b{
  color:#a9a9b1;font:500 .18em/1 "STA Mono";letter-spacing:.22em;
}

.v23-core .v23-shree-mark{
  position:relative;width:43%;height:auto;max-width:110px;object-fit:contain;
  filter:drop-shadow(0 0 15px rgba(237,47,114,.12));
}
.v23-core .v23-shree-mark + span{margin-top:8px}

.sta-art-core{overflow:visible !important}
.case-shree-mark{
  position:relative;z-index:2;width:43%;height:auto;max-width:58px;object-fit:contain;
  filter:drop-shadow(0 0 13px rgba(232,63,120,.14));
}
.sta-art-core small{position:relative;z-index:3}

@media (max-width:700px){
  .brand-logo{height:26px;max-width:36px}
  .footer-brand .brand-logo{height:30px;max-width:42px}
  .loader-wordmark img{height:42px;max-width:62px}
  .case-shree-mark{max-width:46px}
}
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .case-shree-mark,
html[data-theme="dark"] .loader-wordmark img,
html[data-theme="dark"] .v23-shree-mark{
  filter:drop-shadow(0 0 14px rgba(237,47,114,.18));
}


/* =========================================================
   SHREE V32 — OFFICIAL MARK / BRAND COVERAGE
   The supplied Shree mark is the identity asset. Do not
   replace it with the old "S" pseudo-logo or text SHREE.
   ========================================================= */

/* Header: real mark, readable wordmark, no pseudo replacement. */
header .brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}

header .brand::before,
header .brand .brand-mark {
  display: none !important;
  content: none !important;
}

header .brand img.brand-logo {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 7px 18px rgba(232,63,120,.13)) !important;
}

header .brand > span:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

header .brand > span:last-child > span {
  display: block !important;
  margin-top: 5px !important;
  color: var(--muted) !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

html[data-theme="dark"] header .brand > span:last-child {
  color: #fff !important;
}
html[data-theme="dark"] header .brand > span:last-child > span {
  color: rgba(255,255,255,.58) !important;
}

/* Loader: the actual mark should be prominent but not oversized. */
.loader-wordmark img {
  width: auto !important;
  height: 54px !important;
  max-width: 76px !important;
  object-fit: contain !important;
}

/* Homepage vendor-neutral network center. */
.network-center {
  width: 126px !important;
  height: 126px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

.network-center-logo {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  max-width: 62px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 18px rgba(232,63,120,.22)) !important;
}

.network-center small {
  margin: 0 !important;
}

/* Homepage selected-work cores. */
.case-core {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.case-core-logo {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 15px rgba(232,63,120,.20)) !important;
}

.case-core small {
  color: var(--pink) !important;
  font-size: 5px !important;
  letter-spacing: .14em !important;
}

/* Case-study page center marks: the official mark is the visual
   source of identity, not a text approximation. */
.case-shree-mark {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 3 !important;
  filter: drop-shadow(0 0 18px rgba(232,63,120,.22)) !important;
}

.sta-art-core {
  overflow: visible !important;
}

/* Footer: give the official mark enough scale to actually read
   as a brand signature. */
.footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
}

.footer-brand::before {
  display: none !important;
  content: none !important;
}

.footer-brand img.brand-logo {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  object-fit: contain !important;
  flex: 0 0 48px !important;
  filter: drop-shadow(0 8px 22px rgba(232,63,120,.14)) !important;
}

.footer-brand > span {
  display: flex !important;
  flex-direction: column !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.footer-brand > span > span {
  margin-top: 5px !important;
  color: var(--muted) !important;
  font-size: 8px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

html[data-theme="dark"] .footer-brand > span {
  color: #fff !important;
}
html[data-theme="dark"] .footer-brand > span > span {
  color: rgba(255,255,255,.58) !important;
}

/* Small screens. */
@media (max-width: 700px) {
  header .brand img.brand-logo {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    flex-basis: 34px !important;
  }

  header .brand > span:last-child {
    font-size: 12px !important;
  }

  header .brand > span:last-child > span {
    font-size: 7px !important;
  }

  .network-center {
    width: 104px !important;
    height: 104px !important;
  }

  .network-center-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .case-core-logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
  }

  .case-shree-mark {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
  }

  .footer-brand img.brand-logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    flex-basis: 42px !important;
  }
}

/* V33: one canonical Shree navbar identity on every page */
.site-header .brand, header .brand{display:inline-flex!important;align-items:center!important;gap:12px!important;min-width:0!important;text-decoration:none!important;color:var(--ink)!important}
.site-header .brand::before,.site-header .brand::after,header .brand::before,header .brand::after{content:none!important;display:none!important}
.site-header .brand img,header .brand img{display:block!important;width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;min-width:40px!important;object-fit:contain!important;flex:0 0 40px!important;background:transparent!important;border:0!important;filter:drop-shadow(0 7px 18px rgba(232,63,120,.13))!important}
.site-header .brand>span:last-child,header .brand>span:last-child{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;color:var(--ink)!important;font-size:14px!important;font-weight:600!important;line-height:1!important;letter-spacing:-.025em!important}
.site-header .brand>span:last-child>span,header .brand>span:last-child>span{display:block!important;margin-top:5px!important;color:var(--muted)!important;font-size:8px!important;font-weight:500!important;line-height:1!important;letter-spacing:.18em!important;text-transform:uppercase!important}
html[data-theme="dark"] .site-header .brand,html[data-theme="dark"] header .brand,html[data-theme="dark"] .site-header .brand>span:last-child,html[data-theme="dark"] header .brand>span:last-child{color:#fff!important}
html[data-theme="dark"] .site-header .brand>span:last-child>span,html[data-theme="dark"] header .brand>span:last-child>span{color:rgba(255,255,255,.58)!important}
@media(max-width:700px){.site-header .brand,header .brand{gap:9px!important}.site-header .brand img,header .brand img{width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important;min-width:34px!important;flex-basis:34px!important}.site-header .brand>span:last-child,header .brand>span:last-child{font-size:12px!important}.site-header .brand>span:last-child>span,header .brand>span:last-child>span{font-size:7px!important}}


/* =========================================================
   SHREE V37 — GOOGLE CALENDAR BOOKING / FINAL UI
   ========================================================= */
.booking-widget-v37{
  display:grid;
  gap:20px;
  min-width:0;
}
.booking-widget-v37 .booking-title{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin-bottom:0!important;
}
.booking-widget-v37 .booking-title>div{
  display:grid;
  gap:8px;
}
.booking-widget-v37 .booking-title strong{
  font-size:20px!important;
  letter-spacing:-.035em;
}
.booking-live-indicator{
  display:flex;
  align-items:center;
  gap:7px;
  font:500 7px "STA Mono";
  letter-spacing:.13em;
  color:var(--muted);
}
.booking-live-indicator i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 14px var(--pink-glow);
}
.booking-zone{
  font:500 7px "STA Mono"!important;
  letter-spacing:.13em!important;
  color:var(--muted)!important;
  padding-top:5px;
  white-space:nowrap;
}
.booking-calendar-panel,
.booking-availability-panel{
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,.26);
}
html[data-theme="dark"] .booking-calendar-panel,
html[data-theme="dark"] .booking-availability-panel{
  background:rgba(255,255,255,.025);
}
.booking-widget-v37 .booking-month{
  display:grid!important;
  grid-template-columns:42px 1fr 42px!important;
  align-items:center!important;
  gap:12px!important;
  margin-bottom:16px!important;
}
.booking-widget-v37 .booking-month strong{
  text-align:center;
  font-size:15px!important;
  letter-spacing:-.02em;
}
.booking-widget-v37 .booking-month button{
  width:42px!important;
  height:42px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
}
.booking-widget-v37 .booking-days{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  min-height:290px!important;
  visibility:visible!important;
  opacity:1!important;
}
.booking-widget-v37 .booking-day-name{
  display:grid!important;
  place-items:center!important;
  min-height:28px!important;
  padding:0!important;
  font:500 7px "STA Mono"!important;
  letter-spacing:.09em!important;
  color:var(--muted)!important;
}
.booking-widget-v37 .booking-day{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--ink)!important;
  font:500 11px "STA Display"!important;
  visibility:visible!important;
  opacity:1!important;
  cursor:pointer!important;
  appearance:none!important;
}
.booking-widget-v37 .booking-day:hover:not(:disabled){
  border-color:rgba(240,42,123,.38)!important;
  background:var(--pink-soft)!important;
  color:var(--pink)!important;
}
.booking-widget-v37 .booking-day.is-selected{
  border-color:var(--pink)!important;
  background:var(--pink)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(240,42,123,.20);
}
.booking-widget-v37 .booking-day:disabled,
.booking-widget-v37 .booking-day.is-past,
.booking-widget-v37 .booking-day.is-weekend{
  opacity:.23!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}
.booking-widget-v37 .booking-day-empty{
  display:block!important;
  height:38px!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
}
.booking-availability-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.booking-availability-head strong{
  font-size:13px;
}
.booking-availability-head span{
  font:500 7px "STA Mono";
  letter-spacing:.09em;
  color:var(--pink);
}
.booking-widget-v37 .booking-times{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  min-height:62px!important;
  max-height:230px!important;
  overflow:auto!important;
  margin:0!important;
  padding:0 2px 0 0!important;
  opacity:1!important;
  visibility:visible!important;
}
.booking-widget-v37 .booking-time{
  display:grid!important;
  place-items:center!important;
  min-height:44px!important;
  padding:9px!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--ink)!important;
  font:500 8px "STA Mono"!important;
  letter-spacing:.04em!important;
  cursor:pointer!important;
}
.booking-widget-v37 .booking-time:hover{
  border-color:rgba(240,42,123,.42)!important;
  color:var(--pink)!important;
}
.booking-widget-v37 .booking-time.is-selected{
  border-color:var(--pink)!important;
  background:var(--pink)!important;
  color:#fff!important;
}
.booking-empty-state,
.booking-loading{
  grid-column:1/-1;
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(120,120,130,.045);
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.booking-empty-state strong{
  color:var(--ink);
  font-size:11px;
}
.booking-error-state{
  border:1px solid rgba(240,42,123,.18);
}
.booking-spinner{
  width:15px;
  height:15px;
  border:1px solid var(--line);
  border-top-color:var(--pink);
  border-radius:50%;
  animation:staBookingSpin .75s linear infinite;
}
@keyframes staBookingSpin{to{transform:rotate(360deg)}}
.booking-widget-v37 .booking-form{
  margin:0!important;
  padding:18px!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.22);
}
html[data-theme="dark"] .booking-widget-v37 .booking-form{
  background:rgba(255,255,255,.02);
}
.booking-form-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:3px;
}
.booking-form-heading strong{
  font-size:13px;
}
.booking-form-heading span{
  font-size:9px;
  color:var(--muted);
}
.booking-widget-v37 [data-book-submit]:disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}
.booking-widget-v37 .booking-status.error{
  color:var(--pink)!important;
}

@media(max-width:700px){
  .booking-widget-v37 .booking-title,
  .booking-form-heading{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .booking-zone{white-space:normal}
  .booking-calendar-panel,
  .booking-availability-panel,
  .booking-widget-v37 .booking-form{
    padding:14px!important;
    border-radius:15px!important;
  }
  .booking-widget-v37 .booking-days{
    gap:4px!important;
    min-height:270px!important;
  }
  .booking-widget-v37 .booking-day{
    height:36px!important;
    min-height:36px!important;
    font-size:10px!important;
  }
  .booking-widget-v37 .booking-times{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .booking-spinner{animation:none}
}


/* =========================================================
   SHREE V38 — NAVBAR CONTRAST + BOOKING CONFIRMATION
   ========================================================= */

/* --- Glass navbar: keep the glass, fix readability --- */
html:not([data-theme="dark"]) header,
html:not([data-theme="dark"]) header.scrolled {
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.54) 52%,
      rgba(255,246,250,.62)
    ) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  backdrop-filter:blur(28px) saturate(165%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(165%) !important;
  box-shadow:
    0 18px 55px rgba(28,20,27,.09),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(25,20,24,.05) !important;
}

/* Brand must never disappear on light pages. */
html:not([data-theme="dark"]) header .brand,
html:not([data-theme="dark"]) header .brand > span:last-child {
  color:#15151a !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
}

html:not([data-theme="dark"]) header .brand > span:last-child > span {
  color:#675e64 !important;
  opacity:1 !important;
}

html:not([data-theme="dark"]) header .brand img {
  opacity:1 !important;
  visibility:visible !important;
  filter:drop-shadow(0 7px 18px rgba(232,63,120,.16)) !important;
}

/* Every navigation label stays readable through the glass. */
html:not([data-theme="dark"]) header .navlink {
  position:relative !important;
  z-index:2 !important;
  color:rgba(20,18,22,.72) !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
  border-radius:9px !important;
}

html:not([data-theme="dark"]) header .navlink:hover {
  color:#111116 !important;
  background:rgba(255,255,255,.38) !important;
}

/* Selected page: obvious without turning into a heavy black tab. */
html:not([data-theme="dark"]) header .navlink.active {
  color:#111116 !important;
  background:rgba(255,255,255,.58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(240,42,123,.13),
    0 6px 18px rgba(30,20,26,.04) !important;
  font-weight:600 !important;
}

html:not([data-theme="dark"]) header .navlink.active::after {
  content:"" !important;
  position:absolute !important;
  left:13px !important;
  right:13px !important;
  bottom:4px !important;
  height:2px !important;
  border-radius:999px !important;
  background:var(--pink) !important;
  box-shadow:0 0 12px rgba(240,42,123,.30) !important;
}

/* Dark theme keeps high-contrast glass identity. */
html[data-theme="dark"] header .brand,
html[data-theme="dark"] header .brand > span:last-child {
  color:#fff !important;
  opacity:1 !important;
}

html[data-theme="dark"] header .brand > span:last-child > span {
  color:rgba(255,255,255,.60) !important;
}

html[data-theme="dark"] header .navlink {
  color:rgba(255,255,255,.74) !important;
  opacity:1 !important;
}

html[data-theme="dark"] header .navlink.active {
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:inset 0 0 0 1px rgba(240,42,123,.18) !important;
}

/* --- Booking confirmation experience --- */
.booking-confirmation {
  position:relative;
  overflow:hidden;
  padding:34px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 8%, rgba(240,42,123,.13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,255,255,.23));
  box-shadow:
    0 30px 85px rgba(20,20,25,.08),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.booking-confirmation[hidden] {
  display:none !important;
}

.booking-confirmation::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(20,20,25,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(20,20,25,.025) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 20% 20%, black, transparent 76%);
}

.booking-confirmation-brand {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:26px;
}

.booking-confirmation-brand img {
  width:54px;
  height:54px;
  object-fit:contain;
  filter:drop-shadow(0 8px 20px rgba(240,42,123,.16));
}

.booking-confirmation-icon {
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
  font-size:26px;
  font-weight:700;
  box-shadow:
    0 16px 42px rgba(240,42,123,.28),
    0 0 0 10px rgba(240,42,123,.055);
}

.booking-confirmation-copy {
  position:relative;
  z-index:2;
}

.booking-confirmation-copy h3 {
  max-width:650px;
  margin:10px 0 16px;
  font-size:clamp(38px,5vw,64px);
  line-height:.94;
  letter-spacing:-.065em;
}

.booking-confirmation-copy > p {
  max-width:610px;
  color:var(--muted);
  line-height:1.65;
}

.booking-confirmation-details {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:30px 0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.22);
}

.booking-confirmation-details > div {
  padding:20px;
  min-width:0;
}

.booking-confirmation-details > div + div {
  border-left:1px solid var(--line);
}

.booking-confirmation-details span {
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font:500 7px "STA Mono";
  letter-spacing:.14em;
  text-transform:uppercase;
}

.booking-confirmation-details strong {
  display:block;
  color:var(--ink);
  font-size:13px;
  overflow-wrap:anywhere;
}

.booking-confirmation-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.booking-status.success {
  color:var(--pink) !important;
  font-weight:600;
}

html[data-theme="dark"] .booking-confirmation {
  background:
    radial-gradient(circle at 8% 8%, rgba(240,42,123,.15), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

html[data-theme="dark"] .booking-confirmation-details {
  background:rgba(255,255,255,.025);
}

html[data-theme="dark"] .booking-confirmation-details strong {
  color:#fff;
}

@media(max-width:700px) {
  .booking-confirmation {
    padding:24px;
    border-radius:18px;
  }

  .booking-confirmation-details {
    grid-template-columns:1fr;
  }

  .booking-confirmation-details > div + div {
    border-left:0;
    border-top:1px solid var(--line);
  }

  .booking-confirmation-brand img {
    width:46px;
    height:46px;
  }
}


/* =========================================================
   V39 — FINAL NAVBAR READABILITY BASELINE
   Preserves the glass treatment while ensuring brand and
   active-page labels remain readable in light and dark mode.
   ========================================================= */
html:not([data-theme="dark"]) header,
html:not([data-theme="dark"]) header.scrolled {
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,0.82),
      rgba(255,255,255,0.72) 52%,
      rgba(255,245,249,0.78)
    ) !important;
  border:1px solid rgba(255,255,255,0.95) !important;
  box-shadow:
    0 18px 48px rgba(22,18,22,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  backdrop-filter:blur(28px) saturate(165%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(165%) !important;
}
html:not([data-theme="dark"]) header .brand {
  color:#121218 !important;
  opacity:1 !important;
}
html:not([data-theme="dark"]) header .brand > span:last-child {
  color:#111218 !important;
  opacity:1 !important;
  visibility:visible !important;
}
html:not([data-theme="dark"]) header .brand > span:last-child > span {
  color:#5a5560 !important;
  opacity:1 !important;
}
html:not([data-theme="dark"]) header .brand img {
  opacity:1 !important;
  visibility:visible !important;
  filter:drop-shadow(0 6px 16px rgba(240,42,123,0.18)) !important;
}
html:not([data-theme="dark"]) header .navlink {
  color:rgba(20,18,22,0.78) !important;
  opacity:1 !important;
  visibility:visible !important;
  font-weight:500 !important;
}
html:not([data-theme="dark"]) header .navlink:hover {
  color:#0f1015 !important;
  background:rgba(255,255,255,0.42) !important;
  border-radius:10px !important;
}
html:not([data-theme="dark"]) header .navlink.active {
  color:#111218 !important;
  opacity:1 !important;
  background:rgba(255,255,255,0.62) !important;
  border-radius:10px !important;
  font-weight:700 !important;
  box-shadow:
    inset 0 0 0 1px rgba(240,42,123,0.14),
    0 6px 18px rgba(20,18,22,0.05) !important;
  position:relative !important;
}
html:not([data-theme="dark"]) header .navlink.active::after {
  content:"" !important;
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:4px !important;
  height:2px !important;
  border-radius:999px !important;
  background:var(--pink) !important;
  box-shadow:0 0 12px rgba(240,42,123,0.28) !important;
}
html[data-theme="dark"] header .brand,
html[data-theme="dark"] header .brand > span:last-child {
  color:#fff !important;
  opacity:1 !important;
}
html[data-theme="dark"] header .brand > span:last-child > span {
  color:rgba(255,255,255,0.66) !important;
}
html[data-theme="dark"] header .navlink {
  color:rgba(255,255,255,0.78) !important;
}
html[data-theme="dark"] header .navlink.active {
  color:#fff !important;
  background:rgba(255,255,255,0.08) !important;
  border-radius:10px !important;
}

/* keyboard accessibility without changing the visual language */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:2px solid var(--pink) !important;
  outline-offset:3px !important;
}