:root{
  --bg:#ffffff;
  --lav:#f2f3fc;
  --lav-2:#e9ecfb;
  --ink:#0f1222;
  --ink-2:#5c6376;
  --accent:#5b63f0;
  --accent-d:#454bd6;
  --accent-soft:#eceefe;
  --brand-blue:#1c4e7c;
  --brand-gold:#c29a4b;
  --line:#e6e8f4;
  --shadow:0 24px 60px rgba(24,28,64,.08);
  --shadow-sm:0 10px 30px rgba(24,28,64,.06);
  --sans:"Urbanist",system-ui,sans-serif;
  --mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1220px;margin:0 auto;padding:0 26px}
section{position:relative}

/* utilities */
.eb{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.eb::before{content:"»»";letter-spacing:-.1em;font-family:var(--sans);font-weight:800}
.eb.c{justify-content:center}
h2.title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.05}
h2.title .g{color:var(--accent)}
.lead{color:var(--ink-2);font-size:1.06rem}
.center{text-align:center}
.sec-head{max-width:660px;margin:0 auto 54px}
.sec-head.tc{text-align:center}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:14px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:100px;font-family:var(--sans);font-weight:700;font-size:.96rem;cursor:pointer;transition:.25s;border:1.5px solid transparent}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 28px rgba(91,99,240,.3)}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink)}

/* ===== NAV ===== */
header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:50px;width:auto;display:block}
@media(max-width:600px){.logo img{height:42px}}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:.92rem;font-weight:600;color:var(--ink);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.book{background:var(--accent);color:#fff!important;padding:12px 22px;border-radius:100px;font-weight:700;font-size:.9rem;box-shadow:0 10px 24px rgba(91,99,240,.32);transition:.25s}
.book:hover{background:var(--accent-d);transform:translateY(-2px)}
.book.active{background:var(--accent-d)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.burger span{width:25px;height:2px;background:var(--ink)}

/* ===== HOME HERO ===== */
.hero{position:relative;background:linear-gradient(180deg,#fff 0%,var(--lav) 100%);overflow:hidden;padding:clamp(46px,6vw,80px) 0 clamp(54px,7vw,92px);text-align:center}
.hero-outline{font-weight:800;letter-spacing:.02em;font-size:clamp(1.2rem,3.6vw,2.6rem);color:transparent;-webkit-text-stroke:1.5px rgba(91,99,240,.4);text-transform:uppercase;margin-bottom:.1em}
.hero-big{font-weight:900;letter-spacing:-.02em;line-height:.9;font-size:clamp(2.6rem,10vw,7.5rem);text-transform:uppercase}
.hero-sub{max-width:620px;margin:22px auto 30px;color:var(--ink-2);font-size:1.1rem}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,50px)}
/* scattered service chips across the hero (decorative, low opacity) */
.hero-chips{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-chips .chip{position:absolute;--rot:0deg;font-size:.82rem;font-weight:700;padding:9px 17px;border-radius:100px;color:#fff;box-shadow:var(--shadow-sm);white-space:nowrap;opacity:.28;transform:rotate(var(--rot));animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:rotate(var(--rot)) translateY(0)}50%{transform:rotate(var(--rot)) translateY(-12px)}}
.hero-chips .c1{top:13%;left:7%;--rot:-7deg;background:#f6b100;color:#25200a;animation-delay:-.4s}
.hero-chips .c2{top:9%;left:72%;--rot:6deg;background:#e5484d;animation-delay:-1.5s}
.hero-chips .c3{top:42%;left:85%;--rot:-4deg;background:#0f9d58;animation-delay:-2.3s}
.hero-chips .c4{top:77%;left:74%;--rot:7deg;background:var(--ink);animation-delay:-3s}
.hero-chips .c5{top:80%;left:10%;--rot:-5deg;background:var(--accent);animation-delay:-1s}
.hero-chips .c6{top:47%;left:4%;--rot:5deg;background:#7b3ff2;animation-delay:-2.7s}
.hero-chips .c7{top:27%;left:22%;--rot:-9deg;background:#00a3bf;animation-delay:-1.9s}
@media(max-width:700px){.hero-chips .c2,.hero-chips .c4,.hero-chips .c7{display:none}}
.hero-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:clamp(28px,4vw,44px)}
.hero-links a{font-weight:700;color:var(--accent);display:inline-flex;gap:6px;align-items:center;transition:.2s}
.hero-links a:hover{gap:10px}

/* ===== KPI BAND (under hero) ===== */
.kpi-band{background:linear-gradient(100deg,var(--accent),var(--accent-d));color:#fff}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:clamp(30px,4vw,48px) 0}
.kpi{text-align:center;padding:6px 22px;border-right:1px solid rgba(255,255,255,.22)}
.kpi:last-child{border-right:none}
.kpi .n{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:900;letter-spacing:-.02em;line-height:1}
.kpi .l{margin-top:9px;font-size:.92rem;color:rgba(255,255,255,.82);font-weight:600}
@media(max-width:700px){
  .kpi-grid{grid-template-columns:1fr 1fr;gap:26px 0}
  .kpi{border-right:none}
  .kpi:nth-child(odd){border-right:1px solid rgba(255,255,255,.22)}
}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--lav));border-bottom:1px solid var(--line);padding:clamp(50px,7vw,92px) 0;text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(91,99,240,.14) 1.3px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent 72%)}
.page-hero .inner{position:relative;z-index:2}
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.crumb a{color:var(--accent)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:900;letter-spacing:-.02em;line-height:1.04}
.page-hero p{color:var(--ink-2);max-width:60ch;margin:16px auto 0;font-size:1.06rem}

/* ===== BLOCK SPACING ===== */
.block{padding:clamp(60px,8vw,110px) 0}
.block.lav{background:var(--lav)}

/* ===== ABOUT / STORY ===== */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.story-grid h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.02em;margin:14px 0 20px;line-height:1.1}
.story-grid p{color:var(--ink-2);margin-bottom:16px}
.story-grid p em{color:var(--ink);font-style:italic;font-weight:600}
.media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/11;background:linear-gradient(135deg,#2b2f52,var(--ink));display:grid;place-items:center;box-shadow:var(--shadow)}
.media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.5px);background-size:16px 16px}
.media .play{width:66px;height:66px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-size:1.3rem;position:relative;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.media .cap{position:absolute;left:22px;top:20px;color:rgba(255,255,255,.9);font-weight:800;font-size:1.25rem}

/* mission / vision cards */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.mv{border:1px solid var(--line);border-radius:20px;padding:32px;background:#fff;box-shadow:var(--shadow-sm)}
.mv .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.mv h3{font-size:1.5rem;font-weight:800;margin-bottom:10px}
.mv p{color:var(--ink-2)}

/* stats */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.stat .n{font-size:2.4rem;font-weight:900;color:var(--accent);letter-spacing:-.02em}
.stat .l{font-size:.82rem;color:var(--ink-2);font-weight:600;line-height:1.3;margin-top:2px}

/* ===== SERVICE OVERVIEW CARDS ===== */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;transition:.3s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.svc .ic{width:48px;height:48px;color:var(--accent);margin-bottom:18px}
.svc h3{font-size:1.2rem;font-weight:800;margin-bottom:8px;letter-spacing:-.01em}
.svc p{color:var(--ink-2);font-size:.92rem;flex:1}
.svc .more{margin-top:16px;font-weight:700;color:var(--accent);font-size:.9rem}

/* ===== SERVICE DETAIL (services page) ===== */
.svc-detail{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-sm);margin-bottom:22px;scroll-margin-top:100px}
.svc-detail .head{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px}
.svc-detail .num{font-family:var(--mono);font-size:1rem;font-weight:700;color:#fff;background:var(--accent);width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 48px;box-shadow:0 8px 20px rgba(91,99,240,.3)}
.svc-detail h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.01em}
.svc-detail .tag{color:var(--ink-2);margin-top:4px}
.svc-detail .lbl{font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);margin-bottom:14px}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.prod{display:flex;align-items:center;gap:11px;background:var(--lav);border:1px solid var(--line);border-radius:11px;padding:11px 15px;font-size:.93rem;font-weight:600;transition:.2s}
.prod:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
.prod::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 7px}

/* ===== SERVICES: EDITORIAL ROWS ===== */
.svc-ed{display:flex;flex-direction:column}
.ed-row{display:grid;grid-template-columns:minmax(130px,230px) 1fr;gap:clamp(20px,4vw,54px);align-items:center;padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.ed-row:first-child{border-top:none}
.ed-row:nth-child(even){grid-template-columns:1fr minmax(130px,230px)}
.ed-row:nth-child(even) .ed-num{order:2}
.ed-num{font-size:clamp(4.5rem,13vw,11rem);font-weight:900;line-height:.78;color:var(--c);opacity:.16;letter-spacing:-.05em;text-align:center}
.ed-head .kn{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c);font-weight:700}
.ed-head h2{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin:8px 0 6px}
.ed-head p{color:var(--ink-2);margin-bottom:20px}
.ed-prods{display:flex;flex-wrap:wrap;gap:9px}
.ed-prods span{font-size:.86rem;font-weight:600;padding:8px 15px;border-radius:100px;border:1px solid var(--line);background:#fff;transition:.2s}
.ed-prods span:hover{background:var(--c);color:#fff;border-color:var(--c)}
@media(max-width:600px){
  .ed-row,.ed-row:nth-child(even){grid-template-columns:1fr}
  .ed-row:nth-child(even) .ed-num{order:0}
  .ed-num{text-align:left}
}

/* ===== WHY CHOOSE US ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow-sm);transition:.3s}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.why-card .ic{width:54px;height:54px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:20px}
.why-card h3{font-size:1.2rem;font-weight:800;margin-bottom:9px}
.why-card p{color:var(--ink-2);font-size:.94rem}

/* ===== INDUSTRIES (scrolling marquee) ===== */
.ind-marquee{display:flex;flex-direction:column;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ind-row{overflow:hidden}
.ind-track{display:flex;gap:14px;width:max-content}
.ind-track.r1{animation:indScroll 44s linear infinite}
.ind-track.r2{animation:indScroll 52s linear infinite reverse}
.ind-marquee:hover .ind-track{animation-play-state:paused}
@keyframes indScroll{to{transform:translateX(-50%)}}
.ind{flex:0 0 auto;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:100px;padding:12px 22px;font-weight:600;font-size:.96rem;transition:background .25s,color .25s,border-color .25s}
.ind:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.ind-track{animation:none!important}}

/* ===== PORTFOLIO ===== */
.pf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pf{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;text-align:center;padding:16px;font-weight:800;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:.3s}
.pf:hover{transform:translateY(-4px)}
.pf:nth-child(5n+1){background:linear-gradient(150deg,#5b63f0,#2f2f8f)}
.pf:nth-child(5n+2){background:linear-gradient(150deg,#1f2937,#0f1222)}
.pf:nth-child(5n+3){background:linear-gradient(150deg,#0f9d58,#0a6b3c)}
.pf:nth-child(5n+4){background:linear-gradient(150deg,#f6b100,#b87c00)}
.pf:nth-child(5n+5){background:linear-gradient(150deg,#e5484d,#8f1f22)}

/* ===== REVIEWS ===== */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rv{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow-sm)}
.rv .st{color:#f6b100;letter-spacing:2px;margin-bottom:16px}
.rv p{font-size:1.02rem;margin-bottom:22px}
.rv .who{display:flex;align-items:center;gap:12px}
.rv .av{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}
.rv .who b{display:block}
.rv .who small{color:var(--ink-2);font-size:.8rem}

/* ===== FAQ ===== */
.faq{max-width:840px;margin:0 auto}
.fitem{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;transition:.25s}
.fitem.open{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.fq{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--sans);font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink)}
.fq .x{flex:0 0 32px;width:32px;height:32px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.3rem;transition:.3s}
.fitem.open .fq .x{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .4s ease}
.fa p{padding:0 26px 24px;color:var(--ink-2);max-width:70ch;font-size:1.02rem}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.ci{display:flex;align-items:flex-start;gap:18px;margin-bottom:22px}
.ci .ico{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:0 0 56px;box-shadow:0 10px 24px rgba(91,99,240,.3)}
.ci .k{font-size:.82rem;color:var(--ink-2);font-weight:600}
.ci .v{font-size:1.12rem;font-weight:700;margin-top:2px;line-height:1.4}
.hours{background:var(--lav);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:8px}
.hours .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hours .row:last-child{border-bottom:none}
.hours .row b{font-weight:700}
.hours .row span{color:var(--ink-2)}
form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:.9rem;font-weight:700;margin-bottom:8px}
input,select,textarea{width:100%;font-family:var(--sans);font-size:.98rem;padding:14px 16px;background:var(--lav);border:1px solid var(--line);border-radius:12px;color:var(--ink);transition:.2s}
input::placeholder,textarea::placeholder{color:#9aa0b4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(91,99,240,.14)}
textarea{resize:vertical;min-height:120px}
.submit{background:var(--accent);color:#fff;border:none;padding:16px 40px;border-radius:100px;font-family:var(--sans);font-weight:800;font-size:1rem;letter-spacing:.04em;cursor:pointer;transition:.25s;box-shadow:0 12px 28px rgba(91,99,240,.32)}
.submit:hover{background:var(--accent-d);transform:translateY(-2px)}
.fnote{font-size:.85rem;color:var(--ink-2);margin-top:14px}

/* ===== CTA BAND ===== */
.cta-band{background:var(--ink);color:#fff;text-align:center;padding:clamp(56px,7vw,96px) 0}
.cta-band h2{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:900;letter-spacing:-.02em;max-width:20ch;margin:0 auto 16px}
.cta-band p{color:rgba(255,255,255,.7);max-width:52ch;margin:0 auto 30px}
.cta-band .btn-primary{box-shadow:0 12px 30px rgba(91,99,240,.5)}

/* ===== FOOTER ===== */
footer{background:#fff;border-top:1px solid var(--line);padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-brand .logo{margin-bottom:16px}
.foot-brand p{color:var(--ink-2);max-width:34ch;font-size:.94rem}
.foot-col h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.foot-col a,.foot-col p{display:block;color:var(--ink-2);font-size:.92rem;padding:5px 0;transition:.2s}
.foot-col a:hover{color:var(--accent);padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;padding-top:24px;flex-wrap:wrap;gap:12px;color:var(--ink-2);font-size:.86rem}
.foot-bottom .h{color:var(--accent)}

/* reveal */
.rvl{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rvl.in{opacity:1;transform:none}
.bar{height:7px;border-radius:100px;background:var(--lav-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:100px;background:var(--accent);width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}

/* ===== RESPONSIVE ===== */
@media(max-width:960px){
  .nav-links{position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;background:#fff;padding:14px 26px 24px;border-bottom:1px solid var(--line);transform:translateY(-135%);transition:.35s;box-shadow:var(--shadow)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-links .book{text-align:center;margin-top:10px;border-bottom:none}
  .burger{display:flex}
  .story-grid,.contact-grid,.mv-grid{grid-template-columns:1fr;gap:36px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .why-grid,.rv-grid{grid-template-columns:1fr 1fr}
  .pf-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .svc-grid,.why-grid,.rv-grid,.stat-row{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(3,1fr)}
  .pf-grid{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .svc-detail .head{flex-direction:column;gap:14px}
}

/* ===== ANIMATED STUDIO VISUAL (replaces video/image) ===== */
.studio-visual{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/12;background:radial-gradient(120% 120% at 70% 12%,#2b2f66,#151735 55%,#0c0d1f);box-shadow:var(--shadow)}
.studio-visual .sv{position:absolute;inset:0;width:100%;height:100%}
.sv-el{transform-box:fill-box;transform-origin:center}
.sv-blob.a{animation:svFloatA 13s ease-in-out infinite}
.sv-blob.b{animation:svFloatB 16s ease-in-out infinite}
.sv-draw{stroke-dasharray:260;stroke-dashoffset:260;animation:svDraw 4.5s ease-in-out infinite}
.sv-line{transform-origin:left center;animation:svGrow 4.5s ease-in-out infinite}
.sv-line.l2{animation-delay:.25s}.sv-line.l3{animation-delay:.5s}
.sv-swatch{animation:svPop 3.2s ease-in-out infinite}
.sv-swatch.s2{animation-delay:.18s}.sv-swatch.s3{animation-delay:.36s}.sv-swatch.s4{animation-delay:.54s}
.sv-ring{animation:svSpin 14s linear infinite}
.sv-tri{animation:svTri 12s ease-in-out infinite}
.sv-sq{animation:svSq 10s ease-in-out infinite}
.sv-dot{animation:svPulse 3s ease-in-out infinite}
.sv-dot.p2{animation-delay:.4s}.sv-dot.p3{animation-delay:.8s}.sv-dot.p4{animation-delay:1.2s}
.sv-pen{animation:svPen 5s ease-in-out infinite}

@keyframes svFloatA{50%{transform:translate(14px,-16px)}}
@keyframes svFloatB{50%{transform:translate(-16px,14px)}}
@keyframes svDraw{0%{stroke-dashoffset:260}45%{stroke-dashoffset:0}78%{stroke-dashoffset:0}100%{stroke-dashoffset:260}}
@keyframes svGrow{0%,18%{transform:scaleX(0);opacity:0}45%{transform:scaleX(1);opacity:1}80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:0}}
@keyframes svPop{0%,15%{transform:scale(0)}35%{transform:scale(1.14)}48%,82%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes svSpin{to{transform:rotate(360deg)}}
@keyframes svTri{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(0,-14px) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes svSq{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-12px,10px) rotate(45deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes svPulse{0%,100%{transform:scale(.65);opacity:.45}50%{transform:scale(1.15);opacity:1}}
@keyframes svPen{0%{transform:translate(0,0)}45%{transform:translate(58px,-32px)}55%{transform:translate(58px,-32px)}100%{transform:translate(0,0)}}

/* ===== HERO FLOATING SVG SHAPES ===== */
.hero{position:relative;overflow:hidden}
.hero>.wrap{position:relative;z-index:2}
.hero-decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-decor .hd{position:absolute;opacity:.55}
.hero-decor .hd svg{display:block}
.hd1{top:15%;left:6%;color:#5b63f0;animation:svFloatA 9s ease-in-out infinite}
.hd2{top:18%;right:8%;color:#f6b100;animation:svFloatB 11s ease-in-out infinite}
.hd3{top:60%;left:9%;color:#ec4899;animation:svTri 15s ease-in-out infinite}
.hd4{bottom:14%;right:11%;color:#22d3ee;animation:svFloatA 10s ease-in-out infinite}
.hd5{top:42%;right:19%;color:#0f9d58;animation:svPulse 4s ease-in-out infinite}
.hd6{bottom:22%;left:16%;color:#7b3ff2;animation:svFloatB 12s ease-in-out infinite}

@media(max-width:700px){.hd2,.hd3,.hd6{display:none}}
@media(prefers-reduced-motion:reduce){.studio-visual *,.hero-decor .hd{animation:none!important}}