#sms-root{position:relative;display:block;width:100%;max-width:100%;box-sizing:border-box;margin:0;padding:0;
overflow-x:clip;isolation:isolate;background:#050610;color:#f7f6ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:16px;line-height:normal;font-weight:400;letter-spacing:normal;text-align:left;text-transform:none;text-shadow:none}
#sms-root *,#sms-root *::before,#sms-root *::after{box-sizing:border-box}
.sms-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.sms-sec{position:relative}
#sms-01{
--ink: #050610;
--panel: rgba(15, 16, 34, 0.66);
--panel-strong: rgba(18, 20, 43, 0.92);
--text: #f7f6ff;
--muted: #a8aac1;
--line: rgba(255, 255, 255, 0.11);
--violet: #8b5cf6;
--violet-bright: #a987ff;
--blue: #45a6ff;
--coral: #ff7568;
--lime: #b6f36b;
--ease: cubic-bezier(.22, 1, .36, 1);
}
#sms-01 *{ box-sizing: border-box; }
#sms-01{ color-scheme: dark; }
#sms-01{
margin: 0;
min-width: 320px;
background: var(--ink);
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow-x:clip;
}
#sms-01 button, #sms-01 a{ font: inherit; }
#sms-01 a{ color: inherit; }
#sms-01 .hero{
position: relative;
min-height: 100svh;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(circle at 75% 42%, rgba(102, 60, 255, .22), transparent 28%),
radial-gradient(circle at 17% 90%, rgba(42, 115, 255, .12), transparent 30%),
linear-gradient(135deg, #050610 0%, #090917 50%, #070811 100%);
}
#sms-01 .hero::before{
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: .34;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, black, transparent 88%);
}
#sms-01 .noise{
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
opacity: .035;
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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
#sms-01 .glow{
position: absolute;
width: 42rem;
aspect-ratio: 1;
right: -12rem;
top: -17rem;
z-index: -2;
border-radius: 50%;
background: rgba(139, 92, 246, .15);
filter: blur(95px);
}
#sms-01 .hero-inner{
width: min(1460px, calc(100% - 64px));
min-height: 100svh;
margin: 0 auto;
padding: clamp(48px, 7vw, 108px) 0 68px;
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr);
gap: clamp(36px, 6vw, 110px);
align-items: center;
}
#sms-01 .copy{
position: relative;
z-index: 3;
max-width: 700px;
}
#sms-01 .eyebrow{
margin: 0 0 24px;
display: inline-flex;
align-items: center;
gap: 12px;
color: #d4c8ff;
font-size: .72rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
#sms-01 .eyebrow::before{
content: "";
width: 34px;
height: 1px;
background: linear-gradient(90deg, var(--violet), var(--blue));
box-shadow: 0 0 16px var(--violet);
}
#sms-01 h1{
margin: 0;
max-width: 13ch;
font-size: clamp(3.25rem, 6.5vw, 7.6rem);
line-height: .9;
letter-spacing: -.072em;
font-weight: 770;
text-wrap: balance;
}
#sms-01 h1 .gradient{
color: transparent;
background: linear-gradient(90deg, #fff 5%, #c9b8ff 45%, #74bbff 95%);
-webkit-background-clip: text;
background-clip: text;
}
#sms-01 .lede{
max-width: 600px;
margin: 30px 0 0;
color: var(--muted);
font-size: clamp(1rem, 1.35vw, 1.22rem);
line-height: 1.7;
}
#sms-01 .actions{
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
}
#sms-01 .button{
min-height: 54px;
padding: 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 1px solid transparent;
border-radius: 999px;
text-decoration: none;
font-weight: 750;
transition: transform .35s var(--ease), border-color .3s ease, background .3s ease;
}
#sms-01 .button:hover{ transform: translateY(-3px); }
#sms-01 .button-primary{
background: linear-gradient(120deg, var(--violet), #6944e6);
box-shadow: 0 16px 48px rgba(109, 70, 230, .28);
}
#sms-01 .button-primary::after{ content: "↗"; font-size: 1.1rem; }
#sms-01 .button-secondary{
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.045);
backdrop-filter: blur(12px);
}
#sms-01 .button-secondary:hover{
border-color: rgba(169,135,255,.62);
background: rgba(139,92,246,.09);
}
#sms-01 .trust{
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
color: #85889f;
font-size: .78rem;
font-weight: 650;
letter-spacing: .04em;
}
#sms-01 .trust span{ display: inline-flex; align-items: center; gap: 8px; }
#sms-01 .trust span::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(182,243,107,.8); }
#sms-01 .visual{
position: relative;
min-height: 650px;
display: grid;
place-items: center;
perspective: 1500px;
}
#sms-01 .orbit{
position: absolute;
left: 50%;
top: 52%;
width: clamp(420px, 47vw, 720px);
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
border: 1px solid rgba(139,92,246,.28);
transform: rotateX(69deg);
box-shadow: 0 0 90px rgba(104,68,230,.07), inset 0 0 70px rgba(69,166,255,.04);
}
#sms-01 .ripple{
position: absolute;
inset: 42%;
border: 1px solid rgba(169,135,255,.7);
border-radius: 50%;
opacity: 0;
animation: s01-ripple 5.4s ease-out infinite;
box-shadow: 0 0 18px rgba(139,92,246,.28);
}
#sms-01 .ripple:nth-child(2){ animation-delay: 1.35s; }
#sms-01 .ripple:nth-child(3){ animation-delay: 2.7s; }
#sms-01 .ripple:nth-child(4){ animation-delay: 4.05s; }
@keyframes s01-ripple{
0% { inset: 46%; opacity: 0; }
12% { opacity: .85; }
75% { opacity: .22; }
100% { inset: 2%; opacity: 0; }
}
#sms-01 .dashboard{
position: relative;
width: min(680px, 94%);
border: 1px solid rgba(255,255,255,.15);
border-radius: 24px;
overflow: hidden;
background: linear-gradient(145deg, rgba(20,21,46,.92), rgba(8,9,21,.84));
box-shadow:
0 60px 110px rgba(0,0,0,.52),
0 0 0 1px rgba(139,92,246,.08),
inset 0 1px 0 rgba(255,255,255,.07);
backdrop-filter: blur(30px);
transform: rotateY(-7deg) rotateX(3deg);
transform-style: preserve-3d;
transition: transform .25s ease-out;
}
#sms-01 .browser-bar{
height: 58px;
padding: 0 20px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--line);
background: rgba(255,255,255,.025);
}
#sms-01 .dots{ display: flex; gap: 7px; }
#sms-01 .dots i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
#sms-01 .dots i:first-child{ background: var(--coral); }
#sms-01 .dots i:nth-child(2){ background: #f2be57; }
#sms-01 .dots i:nth-child(3){ background: var(--lime); }
#sms-01 .address{
flex: 1;
height: 30px;
display: flex;
align-items: center;
gap: 9px;
padding: 0 13px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 9px;
color: #8f91a6;
background: rgba(0,0,0,.16);
font-size: .7rem;
letter-spacing: .04em;
}
#sms-01 .lock{ color: var(--lime); }
#sms-01 .screen{
min-height: 465px;
padding: 34px;
display: grid;
grid-template-columns: 1.18fr .82fr;
gap: 22px;
}
#sms-01 .site-preview{
position: relative;
min-height: 390px;
padding: 30px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 17px;
overflow: hidden;
background:
radial-gradient(circle at 78% 22%, rgba(139,92,246,.28), transparent 32%),
linear-gradient(145deg, #13152c, #0b0c1c);
}
#sms-01 .mini-nav{ display: flex; justify-content: space-between; align-items: center; }
#sms-01 .mini-logo{ font-size: .62rem; font-weight: 850; letter-spacing: .14em; }
#sms-01 .mini-menu{ display: flex; gap: 7px; }
#sms-01 .mini-menu i{ width: 20px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.22); }
#sms-01 .mini-label{ margin: 68px 0 14px; color: #baa7ff; font-size: .56rem; font-weight: 800; letter-spacing: .16em; }
#sms-01 .mini-title{ max-width: 8ch; font-size: clamp(2.2rem, 3.4vw, 3.5rem); line-height: .9; letter-spacing: -.065em; font-weight: 760; }
#sms-01 .mini-copy{ width: 74%; height: 5px; margin-top: 22px; border-radius: 9px; background: rgba(255,255,255,.19); box-shadow: 0 12px 0 rgba(255,255,255,.09), 0 24px 0 rgba(255,255,255,.07); }
#sms-01 .mini-button{ width: 102px; height: 31px; margin-top: 48px; border-radius: 999px; background: linear-gradient(90deg, var(--violet), #6f4ce4); box-shadow: 0 10px 28px rgba(109,70,230,.34); }
#sms-01 .site-preview::after{
content: "";
position: absolute;
right: -58px;
bottom: -64px;
width: 220px;
aspect-ratio: 1;
border: 1px solid rgba(69,166,255,.24);
border-radius: 50%;
box-shadow: 0 0 0 26px rgba(69,166,255,.035), 0 0 0 52px rgba(139,92,246,.035);
}
#sms-01 .signals{
display: grid;
align-content: center;
gap: 12px;
}
#sms-01 .signal{
position: relative;
padding: 16px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
background: rgba(255,255,255,.035);
overflow: hidden;
transition: transform .35s var(--ease), border-color .3s ease, background .3s ease;
}
#sms-01 .signal:hover{ transform: translateX(-6px); background: rgba(255,255,255,.065); }
#sms-01 .signal::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); box-shadow: 0 0 12px var(--signal); }
#sms-01 .signal-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#sms-01 .signal-name{ font-size: .68rem; font-weight: 850; letter-spacing: .14em; color: var(--signal); }
#sms-01 .signal-status{ display: flex; align-items: center; gap: 6px; color: #85889c; font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }
#sms-01 .signal-status::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px var(--signal); }
#sms-01 .signal p{ margin: 10px 0 0; color: #b1b3c5; font-size: .68rem; line-height: 1.5; }
#sms-01 .signal-seo{ --signal: var(--blue); }
#sms-01 .signal-aeo{ --signal: var(--violet-bright); }
#sms-01 .signal-geo{ --signal: var(--coral); }
#sms-01 .query-card{
position: absolute;
left: -7%;
top: 12%;
width: min(290px, 42%);
padding: 15px 16px;
display: flex;
align-items: center;
gap: 11px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 14px;
background: rgba(15,16,34,.84);
box-shadow: 0 20px 50px rgba(0,0,0,.34);
backdrop-filter: blur(18px);
transform: translateZ(72px);
animation: s01-float 4.8s ease-in-out infinite;
}
#sms-01 .search-icon{ width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: rgba(69,166,255,.12); color: var(--blue); }
#sms-01 .query-copy{ min-width: 0; }
#sms-01 .query-copy small{ display: block; color: #6f7287; font-size: .52rem; text-transform: uppercase; letter-spacing: .1em; }
#sms-01 .query-copy strong{ display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .68rem; }
#sms-01 .inquiry{
position: absolute;
right: -5%;
bottom: 11%;
width: 250px;
padding: 16px;
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
border: 1px solid rgba(182,243,107,.22);
border-radius: 15px;
background: rgba(13,18,24,.88);
box-shadow: 0 24px 64px rgba(0,0,0,.42), 0 0 40px rgba(182,243,107,.06);
backdrop-filter: blur(18px);
transform: translateZ(95px);
animation: s01-float 5.6s 1s ease-in-out infinite;
}
#sms-01 .check{ width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #071008; background: var(--lime); box-shadow: 0 0 22px rgba(182,243,107,.28); font-weight: 900; }
#sms-01 .inquiry small{ display: block; color: #797d8d; font-size: .55rem; text-transform: uppercase; letter-spacing: .1em; }
#sms-01 .inquiry strong{ display: block; margin-top: 4px; font-size: .73rem; }
@keyframes s01-float{
0%, 100% { translate: 0 0; }
50% { translate: 0 -10px; }
}
#sms-01 .index{
position: absolute;
right: 26px;
top: 50%;
translate: 0 -50%;
display: grid;
gap: 12px;
color: #717387;
font-size: .56rem;
font-weight: 800;
letter-spacing: .08em;
}
#sms-01 .index span{ display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
#sms-01 .index span::after{ content: ""; width: 16px; height: 1px; background: currentColor; }
#sms-01 .index .active{ color: white; }
#sms-01 .index .active::after{ width: 32px; background: var(--violet-bright); box-shadow: 0 0 10px var(--violet); }
#sms-01 .scroll-cue{
position: absolute;
left: 50%;
bottom: 24px;
translate: -50% 0;
display: flex;
align-items: center;
gap: 10px;
color: #74768a;
font-size: .6rem;
letter-spacing: .16em;
text-transform: uppercase;
}
#sms-01 .scroll-cue::before{ content: ""; width: 1px; height: 24px; background: linear-gradient(var(--violet-bright), transparent); animation: s01-cue 1.8s ease-in-out infinite; }
@keyframes s01-cue{ 50% { transform: scaleY(.45); transform-origin: bottom; opacity: .4; } }
@media (max-width: 1080px){#sms-01 .hero-inner{ width: min(100% - 40px, 900px); }
#sms-01 .hero-inner{ grid-template-columns: 1fr; padding-top: 72px; }
#sms-01 .copy{ max-width: 820px; }
#sms-01 h1{ max-width: 12ch; font-size: clamp(4rem, 10.5vw, 7rem); }
#sms-01 .visual{ min-height: 680px; }
#sms-01 .index{ display: none; }}
@media (max-width: 760px){#sms-01 .hero-inner{ width: calc(100% - 32px); min-height: auto; padding: 54px 0 100px; gap: 44px; }
#sms-01 .eyebrow{ font-size: .62rem; }
#sms-01 h1{ max-width: 10.5ch; font-size: clamp(3.35rem, 16vw, 5.6rem); }
#sms-01 .lede{ margin-top: 24px; font-size: 1rem; }
#sms-01 .actions{ display: grid; }
#sms-01 .button{ width: 100%; }
#sms-01 .trust{ margin-top: 28px; display: grid; }
#sms-01 .visual{ min-height: 610px; width: calc(100% + 14px); margin-left: -7px; }
#sms-01 .orbit{ width: 490px; }
#sms-01 .dashboard{ width: 100%; transform: none; border-radius: 19px; }
#sms-01 .screen{ min-height: 360px; padding: 18px; grid-template-columns: 1fr; }
#sms-01 .site-preview{ min-height: 300px; padding: 22px; }
#sms-01 .mini-label{ margin-top: 48px; }
#sms-01 .mini-title{ font-size: 2.7rem; }
#sms-01 .signals{ position: absolute; left: 30px; right: 30px; bottom: -100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#sms-01 .signal{ padding: 11px 9px; background: rgba(13,14,30,.9); }
#sms-01 .signal p, #sms-01 .signal-status{ display: none; }
#sms-01 .signal-name{ font-size: .57rem; }
#sms-01 .query-card{ left: 10px; top: -28px; width: 68%; }
#sms-01 .inquiry{ right: 8px; bottom: 20px; width: 210px; }
#sms-01 .scroll-cue{ display: none; }}
@media (max-width: 430px){#sms-01 .brand{ font-size: .63rem; letter-spacing: .11em; }
#sms-01 .brand-mark{ width: 34px; }
#sms-01 h1{ font-size: clamp(3rem, 15vw, 4.2rem); }
#sms-01 .visual{ min-height: 610px; }
#sms-01 .browser-bar{ padding: 0 13px; }
#sms-01 .address{ font-size: .58rem; }
#sms-01 .query-card{ width: 74%; }
#sms-01 .inquiry{ width: 190px; }}
@media (prefers-reduced-motion: reduce){#sms-01 *, #sms-01 *::before, #sms-01 *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
#sms-01 .dashboard{ transform: none !important; }}
#sms-02{
--ink: #ffffff;
--ink-soft: #f4f4f8;
--panel: rgba(255, 255, 255, .84);
--text: #11121c;
--muted: #656879;
--line: rgba(17, 18, 28, .12);
--violet: #8b5cf6;
--violet-light: #b8a1ff;
--blue: #45a6ff;
--coral: #ff7568;
--green: #b6f36b;
--ease: cubic-bezier(.22, 1, .36, 1);
}
#sms-02 *{ box-sizing: border-box; }
#sms-02{ color-scheme: light; }
#sms-02{
margin: 0;
min-width: 320px;
color: var(--text);
background: #ffffff;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow-x:clip;
}
#sms-02 a{ color: inherit; }
#sms-02 .about{
position: relative;
min-height: 100svh;
padding: clamp(76px, 9vw, 150px) 0;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(circle at 5% 18%, rgba(69, 166, 255, .10), transparent 27%),
radial-gradient(circle at 91% 78%, rgba(139, 92, 246, .11), transparent 29%),
linear-gradient(145deg, #ffffff, #f8f8fc 55%, #ffffff);
}
#sms-02 .about::before{
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: .28;
background-image:
linear-gradient(rgba(17,18,28,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(17,18,28,.055) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}
#sms-02 .section-number{
position: absolute;
top: 44px;
right: clamp(24px, 5vw, 78px);
color: rgba(17,18,28,.10);
font-size: clamp(3rem, 7vw, 7rem);
line-height: 1;
font-weight: 800;
letter-spacing: -.08em;
user-select: none;
}
#sms-02 .wrap{
width: min(1380px, calc(100% - 64px));
margin: 0 auto;
}
#sms-02 .intro{
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(360px, 1.28fr);
gap: clamp(36px, 8vw, 130px);
align-items: end;
margin-bottom: clamp(55px, 8vw, 112px);
}
#sms-02 .eyebrow{
margin: 0;
display: inline-flex;
align-items: center;
gap: 12px;
color: #6844d6;
font-size: .72rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
#sms-02 .eyebrow::before{
content: "";
width: 34px;
height: 1px;
background: linear-gradient(90deg, var(--blue), var(--violet));
box-shadow: 0 0 14px var(--violet);
}
#sms-02 h2{
max-width: 12ch;
margin: 22px 0 0;
font-size: clamp(3.2rem, 6.3vw, 7rem);
line-height: .92;
letter-spacing: -.068em;
font-weight: 775;
text-wrap: balance;
}
#sms-02 h2 em{
color: transparent;
background: linear-gradient(90deg, #11121c 4%, #6844d6 58%, #287fc8);
-webkit-background-clip: text;
background-clip: text;
font-style: normal;
}
#sms-02 .intro-copy{
max-width: 680px;
padding-bottom: 10px;
}
#sms-02 .intro-copy p{
margin: 0;
color: var(--muted);
font-size: clamp(1.05rem, 1.45vw, 1.34rem);
line-height: 1.75;
}
#sms-02 .intro-copy strong{ color: #11121c; font-weight: 720; }
#sms-02 .origin-line{
margin-top: 28px;
display: flex;
align-items: center;
gap: 14px;
color: #303240;
font-size: .8rem;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
}
#sms-02 .origin-line::before{
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 15px rgba(182,243,107,.72);
}
#sms-02 .story-grid{
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
gap: clamp(28px, 4vw, 64px);
align-items: stretch;
}
#sms-02 .image-stage{
position: relative;
min-height: 660px;
border: 1px solid var(--line);
border-radius: 28px;
overflow: hidden;
background: #101121;
box-shadow: 0 44px 100px rgba(0,0,0,.36);
}
#sms-02 .image-stage::before{
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(to top, rgba(5,6,16,.94), transparent 56%),
linear-gradient(120deg, rgba(5,6,16,.3), transparent 52%);
}
#sms-02 .image-stage img{
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
object-position: center;
filter: saturate(.72) contrast(1.05) brightness(.78);
transform: scale(1.045);
transition: transform 1.2s var(--ease), filter .6s ease;
}
#sms-02 .image-stage:hover img{
transform: scale(1.09);
filter: saturate(.9) contrast(1.04) brightness(.84);
}
#sms-02 .image-grid{
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: .28;
background-image:
linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
background-size: 25% 25%;
}
#sms-02 .image-label{
position: absolute;
z-index: 4;
top: 28px;
left: 28px;
padding: 10px 14px;
display: inline-flex;
align-items: center;
gap: 9px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
color: #eeeaff;
background: rgba(9,10,24,.64);
backdrop-filter: blur(14px);
font-size: .66rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
#sms-02 .image-label::before{
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--violet-light);
box-shadow: 0 0 12px var(--violet);
}
#sms-02 .image-caption{
position: absolute;
z-index: 4;
left: 34px;
right: 34px;
bottom: 34px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
}
#sms-02 .image-caption p{
max-width: 520px;
margin: 0;
color: #f2f0fb;
font-size: clamp(1.35rem, 2vw, 2.05rem);
line-height: 1.25;
letter-spacing: -.03em;
font-weight: 640;
}
#sms-02 .experience{
flex: 0 0 auto;
text-align: right;
}
#sms-02 .experience strong{
display: block;
color: white;
font-size: clamp(2.6rem, 4.6vw, 5rem);
line-height: .8;
letter-spacing: -.06em;
}
#sms-02 .experience span{
display: block;
margin-top: 11px;
color: #a7a9ba;
font-size: .62rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
#sms-02 .cards{
display: grid;
gap: 14px;
}
#sms-02 .card{
position: relative;
min-height: 196px;
padding: clamp(24px, 3vw, 38px);
border: 1px solid var(--line);
border-radius: 23px;
overflow: hidden;
background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,247,251,.86));
box-shadow: 0 18px 55px rgba(29,26,58,.055);
transition: transform .42s var(--ease), border-color .3s ease, background .3s ease;
}
#sms-02 .card::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
opacity: .75;
background: linear-gradient(90deg, var(--accent), transparent 70%);
}
#sms-02 .card:hover{
transform: translateX(-8px);
border-color: rgba(104,68,214,.25);
background: linear-gradient(135deg, #ffffff, #f5f3ff);
}
#sms-02 .card:nth-child(1){ --accent: var(--blue); }
#sms-02 .card:nth-child(2){ --accent: var(--violet-light); }
#sms-02 .card:nth-child(3){ --accent: var(--coral); }
#sms-02 .card-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
#sms-02 .card-number{
color: var(--accent);
font-size: .65rem;
font-weight: 850;
letter-spacing: .14em;
}
#sms-02 .card-line{
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--accent), transparent);
opacity: .35;
}
#sms-02 .card h3{
margin: 21px 0 10px;
font-size: clamp(1.35rem, 2vw, 1.8rem);
letter-spacing: -.035em;
}
#sms-02 .card p{
margin: 0;
color: var(--muted);
font-size: .93rem;
line-height: 1.65;
}
#sms-02 .footer-row{
margin-top: clamp(42px, 6vw, 78px);
padding-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
border-top: 1px solid var(--line);
}
#sms-02 .footer-row p{
max-width: 700px;
margin: 0;
color: #656879;
font-size: .87rem;
line-height: 1.6;
}
#sms-02 .button{
min-height: 52px;
padding: 0 23px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 1px solid rgba(17,18,28,.16);
border-radius: 999px;
color: #ffffff;
background: linear-gradient(120deg, var(--violet), #6844d6);
box-shadow: 0 14px 38px rgba(104,68,214,.18);
text-decoration: none;
font-weight: 750;
transition: transform .35s var(--ease), background .3s ease, border-color .3s ease;
}
#sms-02 .button::after{ content: "↗"; }
#sms-02 .button:hover{
transform: translateY(-3px);
border-color: rgba(104,68,214,.62);
background: linear-gradient(120deg, #794ce6, #5735c3);
}
@media (max-width: 1040px){#sms-02 .intro{ grid-template-columns: 1fr; align-items: start; }
#sms-02 .intro-copy{ max-width: 780px; }
#sms-02 .story-grid{ grid-template-columns: 1fr; }
#sms-02 .image-stage{ min-height: 620px; }
#sms-02 .cards{ grid-template-columns: repeat(3, 1fr); }
#sms-02 .card{ min-height: 250px; }
#sms-02 .card:hover{ transform: translateY(-7px); }}
@media (max-width: 760px){#sms-02 .about{ padding: 76px 0 88px; }
#sms-02 .wrap{ width: calc(100% - 32px); }
#sms-02 .section-number{ top: 22px; right: 18px; font-size: 3.2rem; }
#sms-02 .intro{ gap: 30px; margin-bottom: 48px; }
#sms-02 .eyebrow{ font-size: .62rem; }
#sms-02 h2{ max-width: 10ch; font-size: clamp(3rem, 15vw, 5.2rem); }
#sms-02 .intro-copy p{ font-size: 1rem; line-height: 1.72; }
#sms-02 .origin-line{ align-items: flex-start; font-size: .68rem; line-height: 1.5; }
#sms-02 .image-stage{ min-height: 520px; border-radius: 22px; }
#sms-02 .image-stage img{ object-position: 58% center; }
#sms-02 .image-caption{ left: 22px; right: 22px; bottom: 24px; display: grid; }
#sms-02 .image-caption p{ font-size: 1.35rem; }
#sms-02 .experience{ text-align: left; }
#sms-02 .experience strong{ font-size: 3.5rem; }
#sms-02 .cards{ grid-template-columns: 1fr; }
#sms-02 .card{ min-height: auto; padding: 27px; }
#sms-02 .footer-row{ align-items: stretch; display: grid; }
#sms-02 .button{ width: 100%; }}
@media (prefers-reduced-motion: reduce){#sms-02 *, #sms-02 *::before, #sms-02 *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
#sms-02 .image-stage img, #sms-02 .card{ transform: none !important; }}
#sms-03{
--bg: #080914;
--panel: rgba(255, 255, 255, .055);
--panel-strong: rgba(255, 255, 255, .09);
--text: #f7f7fb;
--muted: #aeb1c2;
--line: rgba(255, 255, 255, .12);
--violet: #9b72ff;
--blue: #47b5ff;
--coral: #ff776b;
--lime: #bdff78;
--ease: cubic-bezier(.22, 1, .36, 1);
}
#sms-03 *{ box-sizing: border-box; }
#sms-03{
color-scheme: dark;
scroll-behavior: smooth;
}
#sms-03{
margin: 0;
min-width: 320px;
overflow-x:clip;
color: var(--text);
background: var(--bg);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#sms-03 a{ color: inherit; }
#sms-03 .why{
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(82px, 10vw, 158px) 0;
background:
radial-gradient(circle at 8% 14%, rgba(71, 181, 255, .14), transparent 28%),
radial-gradient(circle at 92% 76%, rgba(155, 114, 255, .17), transparent 31%),
linear-gradient(145deg, #090a16 0%, #101021 53%, #080914 100%);
}
#sms-03 .why::before{
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: .22;
background-image:
linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, black 16%, black 85%, transparent);
}
#sms-03 .glow{
position: absolute;
width: 520px;
aspect-ratio: 1;
left: var(--x, 70%);
top: var(--y, 35%);
z-index: -2;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(155,114,255,.12), transparent 67%);
transition: left .8s var(--ease), top .8s var(--ease);
}
#sms-03 .section-number{
position: absolute;
top: 42px;
right: clamp(24px, 5vw, 78px);
color: rgba(255,255,255,.075);
font-size: clamp(3rem, 7vw, 7rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.08em;
user-select: none;
}
#sms-03 .wrap{
width: min(1380px, calc(100% - 64px));
margin: 0 auto;
}
#sms-03 .intro{
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .7fr);
gap: clamp(44px, 8vw, 130px);
align-items: end;
margin-bottom: clamp(54px, 7vw, 94px);
}
#sms-03 .eyebrow{
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: var(--lime);
font-size: .76rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .18em;
text-transform: uppercase;
}
#sms-03 .eyebrow::before{
content: "";
width: 34px;
height: 1px;
background: currentColor;
box-shadow: 8px 0 22px currentColor;
}
#sms-03 h2{
max-width: 850px;
margin: 0;
font-size: clamp(3rem, 7vw, 7.1rem);
line-height: .91;
letter-spacing: -.07em;
text-wrap: balance;
}
#sms-03 h2 .gradient{
color: transparent;
background: linear-gradient(100deg, #ffffff 4%, #b7a0ff 48%, #68c2ff 95%);
background-clip: text;
-webkit-background-clip: text;
}
#sms-03 .intro-copy{
margin: 0;
color: var(--muted);
font-size: clamp(1rem, 1.25vw, 1.16rem);
line-height: 1.75;
}
#sms-03 .intro-copy strong{
color: #fff;
font-weight: 650;
}
#sms-03 .cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
perspective: 1200px;
}
#sms-03 .card{
--rotate-x: 0deg;
--rotate-y: 0deg;
position: relative;
min-height: 390px;
overflow: hidden;
padding: clamp(26px, 3vw, 42px);
border: 1px solid var(--line);
border-radius: 28px;
background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
box-shadow: 0 30px 80px rgba(0,0,0,.24);
transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
transform-style: preserve-3d;
transition: transform .18s ease, border-color .35s ease, background .35s ease;
}
#sms-03 .card::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 42%);
transition: opacity .35s ease;
}
#sms-03 .card:hover{
border-color: rgba(255,255,255,.27);
background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
}
#sms-03 .card:hover::before{ opacity: 1; }
#sms-03 .card-top, #sms-03 .card h3, #sms-03 .card p, #sms-03 .card .micro{
position: relative;
z-index: 1;
transform: translateZ(22px);
}
#sms-03 .card-top{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 62px;
}
#sms-03 .icon{
display: grid;
width: 54px;
height: 54px;
place-items: center;
border: 1px solid rgba(255,255,255,.16);
border-radius: 17px;
background: rgba(255,255,255,.07);
}
#sms-03 .icon svg{
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}
#sms-03 .card:nth-child(1) .icon{ color: var(--blue); }
#sms-03 .card:nth-child(2) .icon{ color: var(--violet); }
#sms-03 .card:nth-child(3) .icon{ color: var(--coral); }
#sms-03 .index{
color: rgba(255,255,255,.35);
font-size: .75rem;
font-weight: 800;
letter-spacing: .15em;
}
#sms-03 .card h3{
margin: 0 0 18px;
font-size: clamp(1.45rem, 2.3vw, 2.15rem);
line-height: 1.05;
letter-spacing: -.035em;
}
#sms-03 .card p{
margin: 0;
color: var(--muted);
font-size: .98rem;
line-height: 1.7;
}
#sms-03 .micro{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 26px;
}
#sms-03 .micro span{
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 999px;
color: rgba(255,255,255,.73);
background: rgba(255,255,255,.04);
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
#sms-03 .ripple-panel{
position: relative;
display: grid;
grid-template-columns: minmax(270px, .74fr) minmax(0, 1.3fr);
gap: clamp(42px, 7vw, 100px);
align-items: center;
overflow: hidden;
margin-top: 20px;
padding: clamp(34px, 5vw, 68px);
border: 1px solid var(--line);
border-radius: 30px;
background: rgba(255,255,255,.045);
}
#sms-03 .ripple-visual{
position: relative;
min-height: 290px;
display: grid;
place-items: center;
}
#sms-03 .core{
position: relative;
z-index: 4;
display: grid;
width: 92px;
aspect-ratio: 1;
place-items: center;
border-radius: 50%;
color: #090a16;
background: linear-gradient(135deg, var(--lime), #71dfff);
box-shadow: 0 0 58px rgba(189,255,120,.28);
font-size: .72rem;
font-weight: 900;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
}
#sms-03 .ring{
position: absolute;
width: 116px;
aspect-ratio: 1;
border: 1px solid rgba(189,255,120,.45);
border-radius: 50%;
animation: s03-ripple 4.8s linear infinite;
}
#sms-03 .ring:nth-child(2){ animation-delay: -1.2s; }
#sms-03 .ring:nth-child(3){ animation-delay: -2.4s; }
#sms-03 .ring:nth-child(4){ animation-delay: -3.6s; }
@keyframes s03-ripple{
0% { opacity: .05; transform: scale(.55); }
18% { opacity: .8; }
100% { opacity: 0; transform: scale(2.65); }
}
#sms-03 .truth-label{
margin: 0 0 14px;
color: var(--lime);
font-size: .74rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
#sms-03 .truth h3{
max-width: 760px;
margin: 0 0 18px;
font-size: clamp(2rem, 4vw, 4.3rem);
line-height: 1;
letter-spacing: -.055em;
text-wrap: balance;
}
#sms-03 .truth p{
max-width: 770px;
margin: 0;
color: var(--muted);
font-size: clamp(1rem, 1.3vw, 1.13rem);
line-height: 1.75;
}
#sms-03 .truth strong{
color: #fff;
font-weight: 680;
}
#sms-03 .action-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
margin-top: 30px;
}
#sms-03 .button{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 54px;
padding: 0 24px;
border-radius: 999px;
color: #0a0b13;
background: #fff;
box-shadow: 0 16px 40px rgba(0,0,0,.25);
font-size: .85rem;
font-weight: 800;
letter-spacing: .02em;
text-decoration: none;
transition: transform .25s var(--ease), box-shadow .25s ease;
}
#sms-03 .button:hover{
transform: translateY(-3px);
box-shadow: 0 22px 48px rgba(0,0,0,.34);
}
#sms-03 .button span{
font-size: 1.15rem;
transition: transform .25s var(--ease);
}
#sms-03 .button:hover span{ transform: translateX(4px); }
#sms-03 .no-guarantee{
color: rgba(255,255,255,.52);
font-size: .77rem;
line-height: 1.5;
}
#sms-03 .reveal{
opacity: 0;
transform: translateY(28px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
}
#sms-03 .reveal.is-visible{
opacity: 1;
transform: translateY(0);
}
#sms-03 .cards .reveal:nth-child(2){ transition-delay: .09s; }
#sms-03 .cards .reveal:nth-child(3){ transition-delay: .18s; }
@media (max-width: 980px){#sms-03 .intro{
grid-template-columns: 1fr;
gap: 28px;
}
#sms-03 .intro-copy{ max-width: 720px; }
#sms-03 .cards{ grid-template-columns: 1fr; }
#sms-03 .card{
min-height: auto;
}
#sms-03 .card-top{ margin-bottom: 40px; }
#sms-03 .ripple-panel{
grid-template-columns: 1fr;
}
#sms-03 .ripple-visual{ min-height: 230px; }}
@media (max-width: 620px){#sms-03 .why{ padding: 78px 0; }
#sms-03 .wrap{ width: min(100% - 34px, 1380px); }
#sms-03 .section-number{ top: 22px; }
#sms-03 h2{
font-size: clamp(2.65rem, 15vw, 4.5rem);
letter-spacing: -.065em;
}
#sms-03 .card, #sms-03 .ripple-panel{ border-radius: 22px; }
#sms-03 .ripple-panel{ padding: 28px 22px 32px; }
#sms-03 .ripple-visual{ min-height: 210px; }
#sms-03 .no-guarantee{ width: 100%; }}
@media (prefers-reduced-motion: reduce){#sms-03{ scroll-behavior: auto; }
#sms-03 *, #sms-03 *::before, #sms-03 *::after{
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
#sms-03 .reveal{ opacity: 1; transform: none; }
#sms-03 .card{ transform: none !important; }}
#sms-04{--ink:#11121c;--muted:#696c7c;--paper:#fff;--line:rgba(17,18,28,.12);--violet:#8257f6;--blue:#238eea;--green:#21845d;--coral:#ee6558;--ease:cubic-bezier(.22,1,.36,1)}
#sms-04 *{box-sizing:border-box}
#sms-04{color-scheme:light;scroll-behavior:smooth}
#sms-04{margin:0;min-width:320px;overflow-x:clip;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sms-04 a{color:inherit}
#sms-04 .foundation{position:relative;isolation:isolate;overflow:hidden;padding:clamp(82px,9vw,146px) 0;background:radial-gradient(circle at 92% 9%,rgba(35,142,234,.09),transparent 27%),radial-gradient(circle at 4% 88%,rgba(130,87,246,.09),transparent 28%),linear-gradient(145deg,#fff,#f8f8fc 52%,#fff)}
#sms-04 .foundation:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.25;background-image:linear-gradient(rgba(17,18,28,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(17,18,28,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 87%,transparent)}
#sms-04 .section-number{position:absolute;top:40px;right:clamp(24px,5vw,78px);color:rgba(17,18,28,.08);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1;letter-spacing:-.08em;user-select:none}
#sms-04 .wrap{width:min(1460px,calc(100% - 56px));margin:0 auto}
#sms-04 .heading{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.65fr);gap:clamp(42px,8vw,128px);align-items:end;margin-bottom:clamp(50px,7vw,84px)}
#sms-04 .eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--violet);font-size:.76rem;font-weight:850;line-height:1.2;letter-spacing:.18em;text-transform:uppercase}
#sms-04 .eyebrow:before{content:"";width:34px;height:1px;background:currentColor;box-shadow:8px 0 22px currentColor}
#sms-04 h2{max-width:970px;margin:0;font-size:clamp(3rem,6.7vw,6.8rem);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
#sms-04 h2 span{color:transparent;background:linear-gradient(100deg,#171824 4%,var(--violet) 52%,var(--blue) 96%);background-clip:text;-webkit-background-clip:text}
#sms-04 .heading-copy{margin:0;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
#sms-04 .heading-copy strong{color:var(--ink);font-weight:700}
#sms-04 .service-grid{display:flex;gap:14px;min-height:650px;perspective:1400px}
#sms-04 .service-card{--mx:50%;--my:50%;--lift:0px;position:relative;flex:1 1 0;min-width:0;overflow:hidden;padding:28px;border:1px solid rgba(255,255,255,.15);border-radius:30px;color:#fff;background:#10111c;box-shadow:0 28px 70px rgba(21,20,38,.15);transform:translateY(var(--lift));cursor:pointer;outline:none;transition:flex .55s var(--ease),transform .45s var(--ease),filter .45s ease,box-shadow .45s ease}
#sms-04 .service-card:before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx) var(--my),var(--glow),transparent 43%),linear-gradient(165deg,var(--wash),transparent 49%),#10111c}
#sms-04 .service-card:after{content:"";position:absolute;inset:0;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent 84%)}
#sms-04 .service-grid:has(.service-card:hover) .service-card:not(:hover), #sms-04 .service-grid.has-active .service-card:not(.is-active){filter:saturate(.68) brightness(.8)}
#sms-04 .service-card:hover, #sms-04 .service-card.is-active{flex:1.34 1 0;--lift:-10px;z-index:2;box-shadow:0 38px 90px rgba(21,20,38,.25)}
#sms-04 .service-card:focus-visible{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--color),0 32px 80px rgba(21,20,38,.23)}
#sms-04 .service-card.web{--color:var(--violet);--wash:rgba(130,87,246,.42);--glow:rgba(130,87,246,.28)}
#sms-04 .service-card.search{--color:var(--blue);--wash:rgba(35,142,234,.42);--glow:rgba(35,142,234,.28)}
#sms-04 .service-card.local{--color:var(--green);--wash:rgba(33,132,93,.44);--glow:rgba(60,202,145,.25)}
#sms-04 .service-card.social{--color:var(--coral);--wash:rgba(238,101,88,.43);--glow:rgba(238,101,88,.28)}
#sms-04 .card-content{position:relative;z-index:3;display:flex;min-height:592px;flex-direction:column}
#sms-04 .card-top{display:flex;align-items:center;justify-content:space-between}
#sms-04 .number{color:rgba(255,255,255,.7);font-size:.72rem;font-weight:900;letter-spacing:.15em}
#sms-04 .icon{display:grid;width:50px;height:50px;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);transition:transform .45s var(--ease),background .35s ease}
#sms-04 .service-card:hover .icon, #sms-04 .service-card.is-active .icon{background:var(--color);transform:rotate(-7deg) scale(1.08)}
#sms-04 .icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
#sms-04 .visual{position:relative;height:212px;margin:38px 0 24px;display:grid;place-items:center}
#sms-04 .orb{position:relative;width:126px;aspect-ratio:1;border:1px solid rgba(255,255,255,.21);border-radius:50%;background:radial-gradient(circle at 35% 27%,rgba(255,255,255,.75),var(--color) 18%,rgba(255,255,255,.04) 62%);box-shadow:0 0 55px var(--glow);transition:transform .65s var(--ease),box-shadow .5s ease}
#sms-04 .service-card:hover .orb, #sms-04 .service-card.is-active .orb{transform:scale(1.12) rotate(12deg);box-shadow:0 0 85px var(--glow)}
#sms-04 .orbit-line{position:absolute;width:185px;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:50%;animation:s04-orbitPulse 4.6s ease-in-out infinite}
#sms-04 .orbit-line.two{width:226px;animation-delay:-2.3s}
@keyframes s04-orbitPulse{0%,100%{opacity:.28;transform:scale(.94)}50%{opacity:.78;transform:scale(1.04)}}
#sms-04 .satellite{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff;animation:s04-travel 7s linear infinite}
@keyframes s04-travel{from{transform:rotate(0) translateX(94px) rotate(0)}to{transform:rotate(360deg) translateX(94px) rotate(-360deg)}}
#sms-04 .service-card h3{margin:auto 0 14px;font-size:clamp(1.55rem,2.35vw,2.4rem);line-height:1;letter-spacing:-.045em;text-wrap:balance}
#sms-04 .service-card p{margin:0;color:rgba(255,255,255,.68);font-size:.93rem;line-height:1.67}
#sms-04 .details{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .4s ease}
#sms-04 .service-card:hover .details, #sms-04 .service-card.is-active .details{grid-template-rows:1fr;opacity:1}
#sms-04 .details-inner{overflow:hidden}
#sms-04 .tags{display:flex;flex-wrap:wrap;gap:7px;padding-top:22px}
#sms-04 .tags span{padding:7px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:rgba(255,255,255,.76);background:rgba(255,255,255,.06);font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
#sms-04 .card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:25px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#sms-04 .arrow{display:grid;width:35px;height:35px;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#fff;font-size:1rem;transition:transform .35s var(--ease),background .35s ease}
#sms-04 .service-card:hover .arrow, #sms-04 .service-card.is-active .arrow{background:var(--color);transform:rotate(45deg)}
#sms-04 .connection-bar{display:grid;grid-template-columns:auto minmax(100px,1fr) auto;gap:22px;align-items:center;margin-top:22px;padding:25px 28px;border:1px solid var(--line);border-radius:23px;background:rgba(255,255,255,.8);box-shadow:0 18px 55px rgba(21,20,38,.06)}
#sms-04 .connection-label{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
#sms-04 .signal-line{position:relative;height:2px;overflow:hidden;background:linear-gradient(90deg,var(--violet),var(--blue),var(--green),var(--coral))}
#sms-04 .signal-line:after{content:"";position:absolute;top:-3px;left:-8px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 15px 5px rgba(130,87,246,.65);animation:s04-signal 4s linear infinite}
@keyframes s04-signal{to{left:calc(100% + 8px)}}
#sms-04 .connection-copy{max-width:520px;margin:0;color:var(--muted);font-size:.86rem;line-height:1.55;text-align:right}
#sms-04 .bottom-row{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-top:clamp(34px,5vw,62px);padding-top:28px;border-top:1px solid var(--line)}
#sms-04 .bottom-row p{max-width:760px;margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}
#sms-04 .button{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 25px;border-radius:999px;color:#fff;background:var(--ink);box-shadow:0 15px 38px rgba(17,18,28,.18);font-size:.85rem;font-weight:800;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-04 .button:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(17,18,28,.26)}
#sms-04 .button span{font-size:1.15rem;transition:transform .25s var(--ease)}
#sms-04 .button:hover span{transform:translateX(4px)}
#sms-04 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
#sms-04 .reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1100px){#sms-04 .heading{grid-template-columns:1fr;gap:28px}
#sms-04 .heading-copy{max-width:760px}
#sms-04 .service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
#sms-04 .service-card, #sms-04 .service-card:hover, #sms-04 .service-card.is-active{min-height:560px;transform:none}
#sms-04 .card-content{min-height:502px}
#sms-04 .details{grid-template-rows:1fr;opacity:1}
#sms-04 .visual{height:180px}}
@media(max-width:680px){#sms-04 .foundation{padding:78px 0}
#sms-04 .wrap{width:min(100% - 34px,1460px)}
#sms-04 .section-number{top:22px}
#sms-04 h2{font-size:clamp(2.65rem,15vw,4.5rem);letter-spacing:-.065em}
#sms-04 .service-grid{grid-template-columns:1fr}
#sms-04 .service-card, #sms-04 .service-card:hover, #sms-04 .service-card.is-active{min-height:510px;padding:23px;border-radius:23px}
#sms-04 .card-content{min-height:462px}
#sms-04 .visual{height:155px;margin:30px 0 20px}
#sms-04 .orb{width:105px}
#sms-04 .orbit-line{width:150px}
#sms-04 .orbit-line.two{width:188px}
#sms-04 .connection-bar{grid-template-columns:1fr;gap:14px}
#sms-04 .signal-line{width:100%}
#sms-04 .connection-copy{text-align:left}
#sms-04 .bottom-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){#sms-04{scroll-behavior:auto}
#sms-04 *, #sms-04 *:before, #sms-04 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
#sms-04 .reveal{opacity:1;transform:none}}
#sms-05{
--bg: #080914;
--panel: #111321;
--text: #f8f8fc;
--muted: #adb0c0;
--line: rgba(255,255,255,.12);
--violet: #9a72ff;
--blue: #4bb9ff;
--lime: #bcf477;
--coral: #ff776b;
--ease: cubic-bezier(.22,1,.36,1);
}
#sms-05 *{ box-sizing: border-box; }
#sms-05{ color-scheme: dark; }
#sms-05{
margin: 0;
min-width: 320px;
overflow-x:clip;
color: var(--text);
background: var(--bg);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#sms-05 a{ color: inherit; }
#sms-05 .packages{
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(82px,9vw,148px) 0;
background:
radial-gradient(circle at 7% 13%, rgba(75,185,255,.14), transparent 28%),
radial-gradient(circle at 92% 78%, rgba(154,114,255,.16), transparent 31%),
linear-gradient(145deg,#080914,#111225 52%,#080914);
}
#sms-05 .packages::before{
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: .2;
background-image:
linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.07) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom,transparent,#000 15%,#000 86%,transparent);
}
#sms-05 .section-number{
position: absolute;
top: 40px;
right: clamp(24px,5vw,78px);
color: rgba(255,255,255,.075);
font-size: clamp(3rem,7vw,7rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.08em;
user-select: none;
}
#sms-05 .wrap{
width: min(1380px,calc(100% - 60px));
margin: 0 auto;
}
#sms-05 .heading{
display: grid;
grid-template-columns: minmax(0,1.05fr) minmax(320px,.68fr);
gap: clamp(42px,8vw,128px);
align-items: end;
margin-bottom: clamp(54px,7vw,88px);
}
#sms-05 .eyebrow{
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: var(--lime);
font-size: .76rem;
font-weight: 850;
letter-spacing: .18em;
text-transform: uppercase;
}
#sms-05 .eyebrow::before{
content: "";
width: 34px;
height: 1px;
background: currentColor;
box-shadow: 8px 0 22px currentColor;
}
#sms-05 h2{
max-width: 900px;
margin: 0;
font-size: clamp(3rem,6.8vw,6.8rem);
line-height: .92;
letter-spacing: -.07em;
text-wrap: balance;
}
#sms-05 h2 span{
color: transparent;
background: linear-gradient(100deg,#fff 6%,#bba6ff 53%,#74cbff 96%);
background-clip: text;
-webkit-background-clip: text;
}
#sms-05 .heading-copy{
margin: 0;
color: var(--muted);
font-size: clamp(1rem,1.25vw,1.16rem);
line-height: 1.75;
}
#sms-05 .heading-copy strong{ color: #fff; }
#sms-05 .package-grid{
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 18px;
align-items: stretch;
perspective: 1400px;
}
#sms-05 .package-card{
--mx: 50%;
--my: 30%;
position: relative;
min-height: 680px;
overflow: hidden;
padding: clamp(28px,3vw,42px);
border: 1px solid var(--line);
border-radius: 30px;
color: var(--text);
background: linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
box-shadow: 0 28px 80px rgba(0,0,0,.22);
cursor: pointer;
outline: none;
transform: translateY(0) scale(1);
transition:
transform .5s var(--ease),
border-color .4s ease,
filter .4s ease,
box-shadow .4s ease;
}
#sms-05 .package-card::before{
content: "";
position: absolute;
inset: 0;
opacity: 0;
background: radial-gradient(560px circle at var(--mx) var(--my),var(--glow),transparent 44%);
transition: opacity .4s ease;
}
#sms-05 .package-card::after{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--accent);
transform: scaleX(.18);
transform-origin: left;
transition: transform .55s var(--ease);
}
#sms-05 .package-card:hover, #sms-05 .package-card.is-active{
z-index: 2;
border-color: color-mix(in srgb,var(--accent) 60%,transparent);
transform: translateY(-12px) scale(1.018);
box-shadow: 0 38px 100px rgba(0,0,0,.34);
}
#sms-05 .package-card:hover::before, #sms-05 .package-card.is-active::before{ opacity: 1; }
#sms-05 .package-card:hover::after, #sms-05 .package-card.is-active::after{ transform: scaleX(1); }
#sms-05 .package-grid:has(.package-card:hover) .package-card:not(:hover), #sms-05 .package-grid.has-active .package-card:not(.is-active){
filter: saturate(.65) brightness(.72);
transform: scale(.98);
}
#sms-05 .package-card:focus-visible{
box-shadow: 0 0 0 4px var(--bg),0 0 0 7px var(--accent),0 38px 100px rgba(0,0,0,.34);
}
#sms-05 .basic{ --accent: var(--blue); --glow: rgba(75,185,255,.19); }
#sms-05 .premium{ --accent: var(--violet); --glow: rgba(154,114,255,.23); }
#sms-05 .elite{ --accent: var(--coral); --glow: rgba(255,119,107,.18); }
#sms-05 .card-inner{
position: relative;
z-index: 2;
display: flex;
min-height: 594px;
flex-direction: column;
}
#sms-05 .card-top{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
#sms-05 .tier{
margin: 0 0 9px;
color: var(--accent);
font-size: .7rem;
font-weight: 900;
letter-spacing: .15em;
text-transform: uppercase;
}
#sms-05 .package-card h3{
margin: 0;
font-size: clamp(1.7rem,2.5vw,2.65rem);
line-height: 1;
letter-spacing: -.045em;
}
#sms-05 .platform{
flex: 0 0 auto;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 999px;
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.055);
font-size: .65rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
#sms-05 .scope-block{
margin: 45px 0 34px;
padding-bottom: 31px;
border-bottom: 1px solid rgba(255,255,255,.11);
}
#sms-05 .scope-label{
margin: 0 0 8px;
color: rgba(255,255,255,.46);
font-size: .69rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
#sms-05 .scope-title{
margin: 0;
color: #fff;
font-size: clamp(1.65rem,2.6vw,2.85rem);
font-weight: 780;
line-height: 1.05;
letter-spacing: -.045em;
}
#sms-05 .description{
min-height: 78px;
margin: 0 0 26px;
color: var(--muted);
font-size: .96rem;
line-height: 1.65;
}
#sms-05 .features{
display: grid;
gap: 13px;
margin: 0;
padding: 0;
list-style: none;
}
#sms-05 .features li{
position: relative;
padding-left: 25px;
color: rgba(255,255,255,.8);
font-size: .88rem;
line-height: 1.45;
}
#sms-05 .features li::before{
content: "";
position: absolute;
top: .38em;
left: 0;
width: 11px;
height: 6px;
border-left: 1.8px solid var(--accent);
border-bottom: 1.8px solid var(--accent);
transform: rotate(-45deg);
}
#sms-05 .best-fit{
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .5s var(--ease),opacity .4s ease;
}
#sms-05 .package-card:hover .best-fit, #sms-05 .package-card.is-active .best-fit{
grid-template-rows: 1fr;
opacity: 1;
}
#sms-05 .best-fit-inner{ overflow: hidden; }
#sms-05 .best-fit p{
margin: 25px 0 0;
padding: 15px;
border: 1px solid color-mix(in srgb,var(--accent) 32%,transparent);
border-radius: 15px;
color: rgba(255,255,255,.72);
background: color-mix(in srgb,var(--accent) 9%,transparent);
font-size: .78rem;
line-height: 1.55;
}
#sms-05 .best-fit strong{ color: #fff; }
#sms-05 .card-action{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 30px;
}
#sms-05 .package-link{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 51px;
padding: 0 19px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 999px;
color: #fff;
background: rgba(255,255,255,.07);
font-size: .78rem;
font-weight: 850;
text-decoration: none;
transition: color .3s ease,background .3s ease,transform .3s var(--ease);
}
#sms-05 .package-card:hover .package-link, #sms-05 .package-card.is-active .package-link{
color: #090a13;
background: var(--accent);
}
#sms-05 .package-link:hover{ transform: translateY(-2px); }
#sms-05 .expand-icon{
display: grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid rgba(255,255,255,.14);
border-radius: 50%;
color: rgba(255,255,255,.75);
transition: transform .35s var(--ease),background .35s ease;
}
#sms-05 .package-card:hover .expand-icon, #sms-05 .package-card.is-active .expand-icon{
color: #090a13;
background: var(--accent);
transform: rotate(45deg);
}
#sms-05 .platform-note{
display: grid;
grid-template-columns: auto minmax(100px,1fr) minmax(280px,.9fr);
gap: 22px;
align-items: center;
margin-top: 22px;
padding: 24px 28px;
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(255,255,255,.045);
}
#sms-05 .note-label{
color: var(--lime);
font-size: .7rem;
font-weight: 900;
letter-spacing: .13em;
text-transform: uppercase;
}
#sms-05 .note-line{
height: 1px;
background: linear-gradient(90deg,var(--lime),rgba(255,255,255,.08));
}
#sms-05 .platform-note p{
margin: 0;
color: var(--muted);
font-size: .84rem;
line-height: 1.55;
text-align: right;
}
#sms-05 .bottom-row{
display: flex;
justify-content: space-between;
gap: 28px;
align-items: center;
margin-top: clamp(34px,5vw,60px);
padding-top: 28px;
border-top: 1px solid var(--line);
}
#sms-05 .bottom-row p{
max-width: 790px;
margin: 0;
color: var(--muted);
font-size: .9rem;
line-height: 1.65;
}
#sms-05 .main-button{
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 56px;
padding: 0 25px;
border-radius: 999px;
color: #0a0b13;
background: #fff;
box-shadow: 0 16px 40px rgba(0,0,0,.25);
font-size: .84rem;
font-weight: 850;
text-decoration: none;
transition: transform .25s var(--ease),box-shadow .25s ease;
}
#sms-05 .main-button:hover{
transform: translateY(-3px);
box-shadow: 0 22px 50px rgba(0,0,0,.34);
}
#sms-05 .main-button span{ font-size: 1.15rem; }
#sms-05 .reveal{
opacity: 0;
transform: translateY(26px);
transition: opacity .85s var(--ease),transform .85s var(--ease);
}
#sms-05 .reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (max-width: 1040px){#sms-05 .heading{ grid-template-columns: 1fr; gap: 28px; }
#sms-05 .heading-copy{ max-width: 760px; }
#sms-05 .package-grid{ grid-template-columns: 1fr; }
#sms-05 .package-card{ min-height: 0; }
#sms-05 .package-card:hover, #sms-05 .package-card.is-active{ transform: translateY(-5px); }
#sms-05 .card-inner{ min-height: 0; }
#sms-05 .description{ min-height: 0; }
#sms-05 .best-fit{ grid-template-rows: 1fr; opacity: 1; }
#sms-05 .card-action{ margin-top: 35px; }}
@media (max-width: 680px){#sms-05 .packages{ padding: 78px 0; }
#sms-05 .wrap{ width: min(100% - 34px,1380px); }
#sms-05 .section-number{ top: 22px; }
#sms-05 h2{ font-size: clamp(2.65rem,15vw,4.5rem); letter-spacing: -.065em; }
#sms-05 .package-card{ padding: 25px 22px; border-radius: 23px; }
#sms-05 .scope-block{ margin: 34px 0 28px; }
#sms-05 .platform-note{ grid-template-columns: 1fr; gap: 14px; }
#sms-05 .platform-note p{ text-align: left; }
#sms-05 .bottom-row{ align-items: flex-start; flex-direction: column; }}
@media (prefers-reduced-motion: reduce){#sms-05 *, #sms-05 *::before, #sms-05 *::after{
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
#sms-05 .reveal{ opacity: 1; transform: none; }}
#sms-06{
--ink: #11121c;
--muted: #686b7c;
--paper: #ffffff;
--soft: #f5f5fa;
--line: rgba(17,18,28,.12);
--violet: #8257f6;
--blue: #238eea;
--lime: #7aad35;
--coral: #ee6558;
--active: #8257f6;
--active-soft: rgba(130,87,246,.13);
--ease: cubic-bezier(.22,1,.36,1);
}
#sms-06 *{ box-sizing: border-box; }
#sms-06{ color-scheme: light; scroll-behavior: smooth; }
#sms-06{
margin: 0;
min-width: 320px;
overflow-x:clip;
color: var(--ink);
background: var(--paper);
font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#sms-06 a{ color: inherit; }
#sms-06 .process{
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(82px,9vw,148px) 0;
background:
radial-gradient(circle at 92% 12%,rgba(35,142,234,.09),transparent 28%),
radial-gradient(circle at 3% 88%,rgba(130,87,246,.09),transparent 28%),
linear-gradient(145deg,#fff,#f8f8fc 55%,#fff);
}
#sms-06 .process::before{
content: "";
position: absolute;
inset: 0;
z-index: -2;
opacity: .26;
background-image:
linear-gradient(rgba(17,18,28,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(17,18,28,.055) 1px,transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom,transparent,#000 15%,#000 87%,transparent);
}
#sms-06 .section-number{
position: absolute;
top: 40px;
right: clamp(24px,5vw,78px);
color: rgba(17,18,28,.08);
font-size: clamp(3rem,7vw,7rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.08em;
user-select: none;
}
#sms-06 .wrap{ width: min(1380px,calc(100% - 60px)); margin: 0 auto; }
#sms-06 .heading{
display: grid;
grid-template-columns: minmax(0,1.05fr) minmax(320px,.68fr);
gap: clamp(42px,8vw,128px);
align-items: end;
margin-bottom: clamp(52px,7vw,86px);
}
#sms-06 .eyebrow{
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: var(--violet);
font-size: .76rem;
font-weight: 850;
letter-spacing: .18em;
text-transform: uppercase;
}
#sms-06 .eyebrow::before{
content: "";
width: 34px;
height: 1px;
background: currentColor;
box-shadow: 8px 0 22px currentColor;
}
#sms-06 h2{
max-width: 940px;
margin: 0;
font-size: clamp(3rem,6.8vw,6.8rem);
line-height: .92;
letter-spacing: -.07em;
text-wrap: balance;
}
#sms-06 h2 span{
color: transparent;
background: linear-gradient(100deg,#171824 4%,var(--violet) 50%,var(--blue) 96%);
background-clip: text;
-webkit-background-clip: text;
}
#sms-06 .heading-copy{
margin: 0;
color: var(--muted);
font-size: clamp(1rem,1.25vw,1.16rem);
line-height: 1.75;
}
#sms-06 .heading-copy strong{ color: var(--ink); }
#sms-06 .journey{
position: relative;
padding: 34px;
border: 1px solid var(--line);
border-radius: 30px;
background: rgba(255,255,255,.8);
box-shadow: 0 30px 90px rgba(24,23,42,.09);
backdrop-filter: blur(18px);
}
#sms-06 .step-tabs{
position: relative;
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 12px;
padding-bottom: 34px;
}
#sms-06 .track{
position: absolute;
left: 8%;
right: 8%;
bottom: 15px;
height: 2px;
overflow: hidden;
background: rgba(17,18,28,.1);
}
#sms-06 .track-fill{
position: absolute;
inset: 0;
background: linear-gradient(90deg,var(--violet),var(--blue),var(--lime),var(--coral));
transform: scaleX(var(--progress,.1));
transform-origin: left;
transition: transform .65s var(--ease);
}
#sms-06 .signal{
position: absolute;
top: 50%;
left: var(--signal,10%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 4px var(--active),0 0 24px 8px var(--active-soft);
transform: translate(-50%,-50%);
transition: left .65s var(--ease),box-shadow .45s ease;
}
#sms-06 .step-tab{
position: relative;
z-index: 2;
min-height: 118px;
padding: 18px 15px;
border: 1px solid transparent;
border-radius: 18px;
color: var(--ink);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
transition: background .35s ease,border-color .35s ease,transform .35s var(--ease);
}
#sms-06 .step-tab:hover{ transform: translateY(-4px); background: rgba(17,18,28,.035); }
#sms-06 .step-tab.is-active{
border-color: color-mix(in srgb,var(--step-color) 35%,transparent);
background: color-mix(in srgb,var(--step-color) 8%,white);
transform: translateY(-5px);
}
#sms-06 .step-tab:focus-visible{ outline: 3px solid color-mix(in srgb,var(--step-color) 65%,white); outline-offset: 3px; }
#sms-06 .tab-number{
display: block;
margin-bottom: 23px;
color: var(--step-color);
font-size: .68rem;
font-weight: 900;
letter-spacing: .13em;
}
#sms-06 .tab-title{
display: block;
font-size: clamp(.88rem,1.15vw,1.05rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.02em;
}
#sms-06 .step-tab:nth-child(1){ --step-color: var(--violet); }
#sms-06 .step-tab:nth-child(2){ --step-color: var(--blue); }
#sms-06 .step-tab:nth-child(3){ --step-color: #258965; }
#sms-06 .step-tab:nth-child(4){ --step-color: #cb7b21; }
#sms-06 .step-tab:nth-child(5){ --step-color: var(--coral); }
#sms-06 .detail{
position: relative;
display: grid;
grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
min-height: 520px;
overflow: hidden;
border: 1px solid rgba(17,18,28,.12);
border-radius: 25px;
background: #0d0f1c;
box-shadow: 0 28px 70px rgba(20,19,38,.15);
}
#sms-06 .detail-visual{
position: relative;
overflow: hidden;
min-height: 520px;
background:
radial-gradient(circle at 50% 45%,var(--active-soft),transparent 35%),
linear-gradient(145deg,#151728,#090a14);
}
#sms-06 .detail-visual::before{
content: "";
position: absolute;
inset: 0;
opacity: .25;
background-image:
linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(circle,#000,transparent 74%);
}
#sms-06 .visual-label{
position: absolute;
top: 28px;
left: 28px;
z-index: 3;
display: flex;
align-items: center;
gap: 9px;
color: rgba(255,255,255,.62);
font-size: .68rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
#sms-06 .visual-label::before{
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--active);
box-shadow: 0 0 17px var(--active);
}
#sms-06 .ripple-visual{
position: absolute;
inset: 70px 10px 45px;
display: grid;
place-items: center;
}
#sms-06 .phase-core{
position: relative;
z-index: 4;
display: grid;
width: 142px;
aspect-ratio: 1;
place-items: center;
padding: 20px;
border: 1px solid rgba(255,255,255,.24);
border-radius: 50%;
color: #fff;
background: linear-gradient(145deg,color-mix(in srgb,var(--active) 82%,white),var(--active));
box-shadow: 0 0 70px var(--active-soft);
text-align: center;
transition: background .5s ease,box-shadow .5s ease;
}
#sms-06 .phase-core small{
display: block;
margin-bottom: 6px;
color: rgba(255,255,255,.72);
font-size: .61rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
#sms-06 .phase-core strong{
display: block;
font-size: 1.05rem;
line-height: 1.08;
letter-spacing: -.025em;
}
#sms-06 .ring{
position: absolute;
width: 180px;
aspect-ratio: 1;
border: 1px solid color-mix(in srgb,var(--active) 55%,transparent);
border-radius: 50%;
animation: s06-ripple 5s linear infinite;
}
#sms-06 .ring:nth-child(2){ animation-delay: -1.25s; }
#sms-06 .ring:nth-child(3){ animation-delay: -2.5s; }
#sms-06 .ring:nth-child(4){ animation-delay: -3.75s; }
@keyframes s06-ripple{
0% { opacity: .05; transform: scale(.55); }
18% { opacity: .75; }
100% { opacity: 0; transform: scale(2.2); }
}
#sms-06 .detail-copy{
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(36px,5vw,76px);
color: #fff;
background:
radial-gradient(circle at 100% 0,var(--active-soft),transparent 35%),
#111321;
transition: background .5s ease;
}
#sms-06 .phase-label{
margin: 0 0 15px;
color: color-mix(in srgb,var(--active) 78%,white);
font-size: .72rem;
font-weight: 900;
letter-spacing: .15em;
text-transform: uppercase;
}
#sms-06 .detail-copy h3{
max-width: 720px;
margin: 0 0 21px;
font-size: clamp(2.4rem,4.7vw,5rem);
line-height: .95;
letter-spacing: -.06em;
text-wrap: balance;
}
#sms-06 .phase-description{
max-width: 720px;
margin: 0;
color: rgba(255,255,255,.67);
font-size: clamp(1rem,1.25vw,1.13rem);
line-height: 1.75;
}
#sms-06 .deliverables{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 28px;
}
#sms-06 .deliverables span{
padding: 8px 11px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 999px;
color: rgba(255,255,255,.72);
background: rgba(255,255,255,.05);
font-size: .68rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
#sms-06 .detail-nav{
display: flex;
align-items: center;
gap: 10px;
margin-top: 34px;
}
#sms-06 .nav-button{
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
color: #fff;
background: rgba(255,255,255,.06);
font: inherit;
cursor: pointer;
transition: color .3s ease,background .3s ease,transform .3s var(--ease);
}
#sms-06 .nav-button:hover{
color: #090a13;
background: var(--active);
transform: translateY(-2px);
}
#sms-06 .nav-button:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
#sms-06 .phase-count{
margin-left: 5px;
color: rgba(255,255,255,.45);
font-size: .7rem;
font-weight: 850;
letter-spacing: .1em;
}
#sms-06 .bottom-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: clamp(35px,5vw,62px);
padding-top: 28px;
border-top: 1px solid var(--line);
}
#sms-06 .bottom-row p{
max-width: 780px;
margin: 0;
color: var(--muted);
font-size: .93rem;
line-height: 1.65;
}
#sms-06 .button{
display: inline-flex;
flex: 0 0 auto;
min-height: 56px;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 25px;
border-radius: 999px;
color: #fff;
background: var(--ink);
box-shadow: 0 15px 38px rgba(17,18,28,.18);
font-size: .84rem;
font-weight: 850;
text-decoration: none;
transition: transform .25s var(--ease),box-shadow .25s ease;
}
#sms-06 .button:hover{ transform: translateY(-3px); box-shadow: 0 21px 48px rgba(17,18,28,.26); }
#sms-06 .button span{ font-size: 1.15rem; }
#sms-06 .swap{ animation: s06-swapIn .48s var(--ease); }
@keyframes s06-swapIn{ from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
#sms-06 .reveal{ opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease),transform .85s var(--ease); }
#sms-06 .reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (max-width: 980px){#sms-06 .heading{ grid-template-columns: 1fr; gap: 28px; }
#sms-06 .heading-copy{ max-width: 760px; }
#sms-06 .step-tabs{ grid-template-columns: repeat(5,180px); overflow-x: auto; padding-bottom: 30px; scroll-snap-type: x mandatory; }
#sms-06 .step-tab{ scroll-snap-align: start; }
#sms-06 .track{ display: none; }
#sms-06 .detail{ grid-template-columns: 1fr; }
#sms-06 .detail-visual{ min-height: 370px; }
#sms-06 .detail-copy{ min-height: 430px; }}
@media (max-width: 650px){#sms-06 .process{ padding: 78px 0; }
#sms-06 .wrap{ width: min(100% - 34px,1380px); }
#sms-06 .section-number{ top: 22px; }
#sms-06 h2{ font-size: clamp(2.65rem,15vw,4.5rem); letter-spacing: -.065em; }
#sms-06 .journey{ padding: 15px; border-radius: 23px; }
#sms-06 .step-tabs{ grid-template-columns: repeat(5,156px); gap: 8px; }
#sms-06 .step-tab{ min-height: 103px; padding: 15px 13px; }
#sms-06 .tab-number{ margin-bottom: 18px; }
#sms-06 .detail{ border-radius: 18px; }
#sms-06 .detail-visual{ min-height: 310px; }
#sms-06 .ripple-visual{ transform: scale(.78); }
#sms-06 .detail-copy{ min-height: 470px; padding: 32px 24px; }
#sms-06 .bottom-row{ align-items: flex-start; flex-direction: column; }}
@media (prefers-reduced-motion: reduce){#sms-06 *, #sms-06 *::before, #sms-06 *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
#sms-06 .reveal{ opacity: 1; transform: none; }}
#sms-07{--bg:#080914;--text:#f8f8fc;--muted:#adb0c0;--line:rgba(255,255,255,.12);--violet:#9a72ff;--blue:#4bb9ff;--lime:#bcf477;--ease:cubic-bezier(.22,1,.36,1)}
#sms-07 *{box-sizing:border-box}
#sms-07{color-scheme:dark}
#sms-07{margin:0;min-width:320px;overflow-x:clip;color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sms-07 a{color:inherit}
#sms-07 .work{position:relative;isolation:isolate;overflow:hidden;padding:clamp(82px,9vw,148px) 0;background:radial-gradient(circle at 8% 14%,rgba(75,185,255,.14),transparent 28%),radial-gradient(circle at 91% 82%,rgba(154,114,255,.17),transparent 31%),linear-gradient(145deg,#080914,#111225 52%,#080914)}
#sms-07 .work:before{content:"";position:absolute;inset:0;z-index:-3;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 87%,transparent)}
#sms-07 .section-number{position:absolute;top:40px;right:clamp(24px,5vw,78px);color:rgba(255,255,255,.075);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1;letter-spacing:-.08em;user-select:none}
#sms-07 .wrap{width:min(1420px,calc(100% - 60px));margin:0 auto}
#sms-07 .heading{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(320px,.65fr);gap:clamp(42px,8vw,128px);align-items:end;margin-bottom:clamp(52px,7vw,86px)}
#sms-07 .eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--lime);font-size:.76rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
#sms-07 .eyebrow:before{content:"";width:34px;height:1px;background:currentColor;box-shadow:8px 0 22px currentColor}
#sms-07 h2{max-width:950px;margin:0;font-size:clamp(3rem,6.8vw,6.8rem);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
#sms-07 h2 span{color:transparent;background:linear-gradient(100deg,#fff 6%,#bba6ff 52%,#74cbff 96%);background-clip:text;-webkit-background-clip:text}
#sms-07 .heading-copy{margin:0;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
#sms-07 .heading-copy strong{color:#fff}
#sms-07 .showcase{position:relative}
#sms-07 .browser{--rx:0deg;--ry:0deg;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:31px;background:#10111c;box-shadow:0 45px 120px rgba(0,0,0,.4);transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .2s ease,border-color .4s ease}
#sms-07 .browser:hover{border-color:rgba(255,255,255,.29)}
#sms-07 .browser-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:62px;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045)}
#sms-07 .dots{display:flex;gap:7px}
#sms-07 .dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
#sms-07 .dots span:first-child{background:#ff776b}
#sms-07 .dots span:nth-child(2){background:#ffd36a}
#sms-07 .dots span:nth-child(3){background:#9fe06e}
#sms-07 .address{max-width:400px;overflow:hidden;padding:9px 19px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:rgba(255,255,255,.5);background:rgba(0,0,0,.15);font-size:.67rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
#sms-07 .live{justify-self:end;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.58);font-size:.67rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
#sms-07 .live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 15px rgba(188,244,119,.7)}
#sms-07 .screen{position:relative;height:clamp(520px,58vw,800px);overflow:hidden;background:#171827}
#sms-07 .project-image{width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(.93) contrast(1.02);transform:scale(1.01);transition:opacity .35s ease,transform 1.1s var(--ease)}
#sms-07 .browser:hover .project-image{transform:scale(1.035)}
#sms-07 .screen:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,13,.94),transparent 48%);pointer-events:none}
#sms-07 .project-info{position:absolute;left:clamp(25px,5vw,70px);right:clamp(25px,5vw,70px);bottom:clamp(25px,5vw,64px);z-index:3;display:flex;align-items:end;justify-content:space-between;gap:30px}
#sms-07 .project-index{display:block;margin-bottom:10px;color:var(--lime);font-size:.7rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
#sms-07 .project-title{margin:0;font-size:clamp(2.4rem,6vw,6.5rem);line-height:.9;letter-spacing:-.065em;text-wrap:balance}
#sms-07 .project-link{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:11px;min-height:56px;padding:0 24px;border-radius:999px;color:#090a13;background:#fff;box-shadow:0 15px 40px rgba(0,0,0,.3);font-size:.81rem;font-weight:850;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s ease}
#sms-07 .project-link:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.4)}
#sms-07 .project-link span{font-size:1.1rem}
#sms-07 .project-nav{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:12px;margin-top:17px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory}
#sms-07 .project-tab{--tab-color:var(--violet);position:relative;min-height:155px;overflow:hidden;padding:19px;border:1px solid rgba(255,255,255,.11);border-radius:20px;color:#fff;background:rgba(255,255,255,.045);font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;transition:transform .35s var(--ease),border-color .35s ease,background .35s ease}
#sms-07 .project-tab:before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--tab-color) 27%,transparent),transparent 55%);transition:opacity .35s ease}
#sms-07 .project-tab:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.23)}
#sms-07 .project-tab.is-active{border-color:color-mix(in srgb,var(--tab-color) 60%,transparent);background:color-mix(in srgb,var(--tab-color) 10%,rgba(255,255,255,.045));transform:translateY(-5px)}
#sms-07 .project-tab.is-active:before, #sms-07 .project-tab:hover:before{opacity:1}
#sms-07 .project-tab:after{content:"";position:absolute;left:19px;right:19px;bottom:0;height:3px;border-radius:999px 999px 0 0;background:var(--tab-color);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
#sms-07 .project-tab.is-active:after{transform:scaleX(1)}
#sms-07 .project-tab>*{position:relative;z-index:2}
#sms-07 .tab-index{display:block;margin-bottom:34px;color:rgba(255,255,255,.45);font-size:.65rem;font-weight:900;letter-spacing:.13em}
#sms-07 .tab-title{display:block;font-size:.95rem;font-weight:820;line-height:1.2}
#sms-07 .tab-domain{display:block;margin-top:7px;color:rgba(255,255,255,.48);font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sms-07 .project-tab:nth-child(1){--tab-color:#9a72ff}
#sms-07 .project-tab:nth-child(2){--tab-color:#4bb9ff}
#sms-07 .project-tab:nth-child(3){--tab-color:#50b68b}
#sms-07 .project-tab:nth-child(4){--tab-color:#ff9a5d}
#sms-07 .project-tab:nth-child(5){--tab-color:#ff776b}
#sms-07 .bottom-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:clamp(32px,5vw,58px);padding-top:27px;border-top:1px solid var(--line)}
#sms-07 .bottom-row p{max-width:790px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}
#sms-07 .controls{display:flex;gap:9px}
#sms-07 .control{display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;color:#fff;background:rgba(255,255,255,.055);font:inherit;cursor:pointer;transition:color .3s ease,background .3s ease,transform .3s var(--ease)}
#sms-07 .control:hover{color:#090a13;background:#fff;transform:translateY(-3px)}
#sms-07 .swap{animation:s07-swap .55s var(--ease)}
@keyframes s07-swap{from{opacity:.25;transform:scale(1.04)}to{opacity:1;transform:scale(1.01)}}
#sms-07 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
#sms-07 .reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:980px){#sms-07 .heading{grid-template-columns:1fr;gap:28px}
#sms-07 .heading-copy{max-width:760px}
#sms-07 .project-nav{grid-template-columns:repeat(5,210px)}
#sms-07 .screen{height:clamp(520px,78vw,720px)}}
@media(max-width:650px){#sms-07 .work{padding:78px 0}
#sms-07 .wrap{width:min(100% - 34px,1420px)}
#sms-07 .section-number{top:22px}
#sms-07 h2{font-size:clamp(2.65rem,15vw,4.5rem);letter-spacing:-.065em}
#sms-07 .browser{border-radius:22px}
#sms-07 .browser-bar{grid-template-columns:1fr auto;min-height:53px;padding:0 15px}
#sms-07 .address{display:none}
#sms-07 .screen{height:570px}
#sms-07 .project-image{object-position:top center}
#sms-07 .project-info{align-items:flex-start;flex-direction:column;gap:22px}
#sms-07 .project-title{font-size:clamp(2.6rem,14vw,4.7rem)}
#sms-07 .project-nav{grid-template-columns:repeat(5,185px)}
#sms-07 .bottom-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){#sms-07 *, #sms-07 *:before, #sms-07 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
#sms-07 .reveal{opacity:1;transform:none}
#sms-07 .browser{transform:none!important}}
#sms-08{--ink:#11121c;--muted:#686b7c;--paper:#fff;--line:rgba(17,18,28,.12);--violet:#8257f6;--blue:#238eea;--green:#258965;--coral:#ee6558;--ease:cubic-bezier(.22,1,.36,1)}
#sms-08 *{box-sizing:border-box}
#sms-08{color-scheme:light}
#sms-08{margin:0;min-width:320px;overflow-x:clip;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sms-08 button, #sms-08 input{font:inherit}
#sms-08 .lab{position:relative;isolation:isolate;overflow:hidden;padding:clamp(82px,9vw,148px) 0;background:radial-gradient(circle at 91% 10%,rgba(35,142,234,.09),transparent 28%),radial-gradient(circle at 3% 90%,rgba(130,87,246,.09),transparent 28%),linear-gradient(145deg,#fff,#f8f8fc 55%,#fff)}
#sms-08 .lab:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.26;background-image:linear-gradient(rgba(17,18,28,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(17,18,28,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 87%,transparent)}
#sms-08 .section-number{position:absolute;top:40px;right:clamp(24px,5vw,78px);color:rgba(17,18,28,.08);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1;letter-spacing:-.08em;user-select:none}
#sms-08 .wrap{width:min(1460px,calc(100% - 56px));margin:0 auto}
#sms-08 .heading{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.66fr);gap:clamp(42px,8vw,128px);align-items:end;margin-bottom:clamp(52px,7vw,86px)}
#sms-08 .eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--violet);font-size:.76rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
#sms-08 .eyebrow:before{content:"";width:34px;height:1px;background:currentColor;box-shadow:8px 0 22px currentColor}
#sms-08 h2{max-width:980px;margin:0;font-size:clamp(3rem,6.8vw,6.8rem);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
#sms-08 h2 span{color:transparent;background:linear-gradient(100deg,#171824 4%,var(--violet) 51%,var(--blue) 96%);background-clip:text;-webkit-background-clip:text}
#sms-08 .heading-copy{margin:0;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
#sms-08 .heading-copy strong{color:var(--ink)}
#sms-08 .lab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#sms-08 .experiment{--accent:var(--violet);--glow:rgba(130,87,246,.2);position:relative;min-height:570px;overflow:hidden;padding:25px;border:1px solid rgba(255,255,255,.14);border-radius:28px;color:#fff;background:#0e101c;box-shadow:0 28px 75px rgba(25,24,43,.15);transition:transform .45s var(--ease),box-shadow .45s ease,filter .45s ease}
#sms-08 .experiment:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,var(--glow),transparent 40%),linear-gradient(155deg,color-mix(in srgb,var(--accent) 17%,transparent),transparent 48%),#0e101c}
#sms-08 .experiment:after{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
#sms-08 .experiment:hover{z-index:2;transform:translateY(-9px);box-shadow:0 38px 95px rgba(25,24,43,.26)}
#sms-08 .lab-grid:has(.experiment:hover) .experiment:not(:hover){filter:saturate(.72) brightness(.86)}
#sms-08 .motion-card{--accent:var(--blue);--glow:rgba(35,142,234,.2)}
#sms-08 .form-card{--accent:var(--green);--glow:rgba(37,137,101,.2)}
#sms-08 .flow-card{--accent:var(--coral);--glow:rgba(238,101,88,.2)}
#sms-08 .card-content{position:relative;z-index:3;display:flex;min-height:520px;flex-direction:column}
#sms-08 .card-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
#sms-08 .code-label{color:var(--accent);font-size:.67rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
#sms-08 .status-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent);animation:s08-pulse 2.2s ease-in-out infinite}
@keyframes s08-pulse{50%{opacity:.35;transform:scale(.8)}}
#sms-08 .demo{position:relative;display:grid;height:245px;place-items:center;margin:33px 0 27px;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:21px;background:rgba(255,255,255,.045)}
#sms-08 .experiment h3{margin:auto 0 13px;font-size:clamp(1.5rem,2vw,2rem);line-height:1;letter-spacing:-.04em}
#sms-08 .experiment p{margin:0;color:rgba(255,255,255,.64);font-size:.88rem;line-height:1.63}
#sms-08 .hint{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.42);font-size:.63rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
#sms-08 .hint span:last-child{color:var(--accent)}
#sms-08 .magnetic-demo{cursor:crosshair}
#sms-08 .magnetic-target{display:grid;width:130px;height:54px;place-items:center;border:1px solid rgba(255,255,255,.19);border-radius:999px;color:#0a0b13;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28),0 0 35px var(--glow);font-size:.75rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;pointer-events:none;transition:transform .16s ease}
#sms-08 .magnetic-ring{position:absolute;width:180px;aspect-ratio:1;border:1px dashed rgba(255,255,255,.18);border-radius:50%;animation:s08-rotate 12s linear infinite}
@keyframes s08-rotate{to{transform:rotate(360deg)}}
#sms-08 .motion-stage{place-items:stretch;padding:24px}
#sms-08 .motion-object{display:grid;align-self:center;width:92px;height:92px;place-items:center;border-radius:25px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 18px 45px rgba(35,142,234,.26);font-size:.65rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;transform:translateX(var(--travel,0%)) rotate(var(--spin,0deg));transition:transform .22s var(--ease)}
#sms-08 .range-wrap{position:absolute;right:20px;bottom:20px;left:20px;display:grid;gap:8px}
#sms-08 .range-wrap label{display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:.59rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
#sms-08 .range-wrap input{width:100%;accent-color:var(--blue);cursor:pointer}
#sms-08 .smart-form{align-content:center;justify-items:stretch;gap:13px;padding:21px}
#sms-08 .choice-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#sms-08 .choice{padding:12px 8px;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:rgba(255,255,255,.68);background:rgba(255,255,255,.05);font-size:.65rem;font-weight:800;cursor:pointer;transition:color .25s ease,background .25s ease,border-color .25s ease}
#sms-08 .choice.is-selected{color:#fff;border-color:var(--green);background:rgba(37,137,101,.22)}
#sms-08 .form-result{padding:15px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(0,0,0,.16)}
#sms-08 .form-result small{display:block;margin-bottom:5px;color:rgba(255,255,255,.42);font-size:.57rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
#sms-08 .form-result strong{font-size:.84rem}
#sms-08 .result-bar{height:4px;margin-top:11px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.1)}
#sms-08 .result-bar span{display:block;width:25%;height:100%;border-radius:inherit;background:var(--green);transition:width .45s var(--ease)}
#sms-08 .flow-demo{padding:22px}
#sms-08 .flow-line{position:absolute;top:50%;left:17%;right:17%;height:2px;background:rgba(255,255,255,.11)}
#sms-08 .flow-signal{position:absolute;top:50%;left:18%;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 16px var(--coral);transform:translate(-50%,-50%);transition:left .55s var(--ease)}
#sms-08 .nodes{position:relative;z-index:2;display:flex;width:100%;align-items:center;justify-content:space-between}
#sms-08 .flow-node{display:grid;width:62px;height:62px;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:18px;color:rgba(255,255,255,.5);background:#151724;font-size:.58rem;font-weight:850;text-align:center;text-transform:uppercase;transition:color .35s ease,background .35s ease,transform .35s var(--ease),border-color .35s ease}
#sms-08 .flow-node.is-active{color:#fff;border-color:var(--coral);background:rgba(238,101,88,.22);transform:scale(1.08)}
#sms-08 .flow-next{position:absolute;bottom:18px;padding:8px 13px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#fff;background:rgba(255,255,255,.06);font-size:.61rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
#sms-08 .flow-next:hover{color:#0a0b13;background:var(--coral)}
#sms-08 .original-flips{display:grid;grid-template-columns:minmax(250px,.7fr) repeat(2,minmax(280px,1fr));gap:18px;align-items:center;margin-top:22px;padding:clamp(25px,4vw,48px);border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.82);box-shadow:0 24px 70px rgba(24,23,42,.08)}
#sms-08 .flip-intro .mini-label{margin:0 0 13px;color:var(--violet);font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
#sms-08 .flip-intro h3{margin:0 0 14px;font-size:clamp(1.7rem,3vw,3.1rem);line-height:1;letter-spacing:-.05em}
#sms-08 .flip-intro p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.65}
#sms-08 .flip-card{height:330px;perspective:1100px;cursor:pointer;outline:none}
#sms-08 .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
#sms-08 .flip-card:hover .flip-inner, #sms-08 .flip-card.is-flipped .flip-inner, #sms-08 .flip-card:focus-visible .flip-inner{transform:rotateY(180deg)}
#sms-08 .flip-card:focus-visible{border-radius:23px;box-shadow:0 0 0 4px rgba(130,87,246,.28)}
#sms-08 .flip-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;padding:28px;border-radius:23px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 22px 50px rgba(17,18,28,.2);text-align:center}
#sms-08 .flip-front{color:#fff;background:radial-gradient(circle at 50% 10%,rgba(37,137,101,.2),transparent 35%),#202020}
#sms-08 .flip-front svg{width:63px;height:63px;margin-bottom:30px;fill:none;stroke:#087845;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#sms-08 .flip-front h4, #sms-08 .flip-back h4{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.35rem,2vw,1.85rem);line-height:1;text-transform:uppercase}
#sms-08 .flip-back{color:#fff;background:linear-gradient(135deg,#6677df,#8443aa);transform:rotateY(180deg)}
#sms-08 .flip-back p{margin:24px 0;color:rgba(255,255,255,.86);font-family:Georgia,"Times New Roman",serif;font-size:.95rem;line-height:1.45}
#sms-08 .flip-link{display:inline-flex;min-height:45px;align-items:center;justify-content:center;padding:0 23px;border-radius:999px;color:#734899;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.22);font-family:Georgia,"Times New Roman",serif;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-decoration:none;text-transform:uppercase;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-08 .flip-link:hover{transform:translateY(-3px);box-shadow:0 13px 25px rgba(0,0,0,.3)}
#sms-08 .flip-instruction{position:absolute;right:13px;bottom:11px;color:rgba(255,255,255,.4);font-size:.55rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#sms-08 .code-strip{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;gap:20px;align-items:center;margin-top:22px;padding:23px 27px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.82);box-shadow:0 18px 55px rgba(24,23,42,.06)}
#sms-08 .code-strip strong{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
#sms-08 .code-line{height:1px;background:linear-gradient(90deg,var(--violet),var(--blue),var(--green),var(--coral))}
#sms-08 .code-readout{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.73rem;text-align:right}
#sms-08 .bottom-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:clamp(34px,5vw,60px);padding-top:28px;border-top:1px solid var(--line)}
#sms-08 .bottom-row p{max-width:790px;margin:0;color:var(--muted);font-size:.91rem;line-height:1.65}
#sms-08 .button{display:inline-flex;flex:0 0 auto;min-height:56px;align-items:center;justify-content:center;gap:12px;padding:0 25px;border-radius:999px;color:#fff;background:var(--ink);box-shadow:0 15px 38px rgba(17,18,28,.18);font-size:.84rem;font-weight:850;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-08 .button:hover{transform:translateY(-3px);box-shadow:0 21px 48px rgba(17,18,28,.26)}
#sms-08 .button span{font-size:1.15rem}
#sms-08 .ripple{position:absolute;width:20px;height:20px;border:2px solid rgba(255,255,255,.8);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:s08-clickRipple .8s var(--ease) forwards}
@keyframes s08-clickRipple{to{opacity:0;transform:translate(-50%,-50%) scale(8)}}
#sms-08 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
#sms-08 .reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1120px){#sms-08 .heading{grid-template-columns:1fr;gap:28px}
#sms-08 .heading-copy{max-width:760px}
#sms-08 .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#sms-08 .original-flips{grid-template-columns:repeat(2,minmax(0,1fr))}
#sms-08 .flip-intro{grid-column:1/-1;max-width:720px}}
@media(max-width:650px){#sms-08 .lab{padding:78px 0}
#sms-08 .wrap{width:min(100% - 34px,1460px)}
#sms-08 .section-number{top:22px}
#sms-08 h2{font-size:clamp(2.65rem,15vw,4.5rem);letter-spacing:-.065em}
#sms-08 .lab-grid{grid-template-columns:1fr}
#sms-08 .experiment{min-height:535px;border-radius:23px}
#sms-08 .card-content{min-height:485px}
#sms-08 .original-flips{grid-template-columns:1fr;padding:22px;border-radius:23px}
#sms-08 .flip-intro{grid-column:auto}
#sms-08 .flip-card{height:315px}
#sms-08 .code-strip{grid-template-columns:1fr;gap:12px}
#sms-08 .code-readout{text-align:left}
#sms-08 .bottom-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){#sms-08 *, #sms-08 *:before, #sms-08 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
#sms-08 .reveal{opacity:1;transform:none}}
#sms-09{--night:#090b14;--panel:#111522;--white:#f7f7fb;--muted:#9da3b6;--line:rgba(255,255,255,.12);--violet:#956cff;--blue:#48a8ff;--green:#55dda4;--amber:#ffbd67;--ease:cubic-bezier(.22,1,.36,1)}
#sms-09 *{box-sizing:border-box}
#sms-09{color-scheme:dark}
#sms-09{margin:0;min-width:320px;overflow-x:clip;color:var(--white);background:var(--night);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sms-09 button, #sms-09 a{font:inherit}
#sms-09 .apps{position:relative;isolation:isolate;overflow:hidden;padding:clamp(84px,9vw,150px) 0;background:radial-gradient(circle at 12% 15%,rgba(149,108,255,.17),transparent 28%),radial-gradient(circle at 88% 76%,rgba(72,168,255,.13),transparent 32%),linear-gradient(145deg,#080a12,#101320 52%,#090b14)}
#sms-09 .apps:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
#sms-09 .apps:after{content:"";position:absolute;top:24%;left:50%;z-index:-1;width:min(800px,80vw);height:min(800px,80vw);border:1px solid rgba(149,108,255,.14);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 90px rgba(149,108,255,.025),0 0 0 180px rgba(72,168,255,.018);pointer-events:none}
#sms-09 .section-number{position:absolute;top:40px;right:clamp(24px,5vw,78px);color:rgba(255,255,255,.055);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1;letter-spacing:-.08em;user-select:none}
#sms-09 .wrap{width:min(1460px,calc(100% - 56px));margin:0 auto}
#sms-09 .heading{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.65fr);gap:clamp(42px,8vw,128px);align-items:end;margin-bottom:clamp(52px,7vw,86px)}
#sms-09 .eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--green);font-size:.76rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
#sms-09 .eyebrow:before{content:"";width:34px;height:1px;background:currentColor;box-shadow:8px 0 22px currentColor}
#sms-09 h2{max-width:980px;margin:0;font-size:clamp(3rem,6.8vw,6.8rem);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
#sms-09 h2 span{color:transparent;background:linear-gradient(100deg,#fff 4%,var(--violet) 50%,var(--blue) 96%);background-clip:text;-webkit-background-clip:text}
#sms-09 .heading-copy{margin:0;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
#sms-09 .heading-copy strong{color:#fff}
#sms-09 .experience{display:grid;grid-template-columns:minmax(330px,.7fr) minmax(500px,1.25fr);min-height:690px;overflow:hidden;border:1px solid var(--line);border-radius:34px;background:rgba(15,18,30,.84);box-shadow:0 38px 100px rgba(0,0,0,.38);backdrop-filter:blur(18px)}
#sms-09 .story{position:relative;z-index:2;display:flex;flex-direction:column;padding:clamp(30px,4vw,58px);border-right:1px solid var(--line);background:linear-gradient(155deg,rgba(149,108,255,.12),transparent 40%)}
#sms-09 .status{display:inline-flex;width:max-content;align-items:center;gap:9px;padding:9px 13px;border:1px solid rgba(85,221,164,.27);border-radius:999px;color:var(--green);background:rgba(85,221,164,.08);font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
#sms-09 .status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green);animation:s09-pulse 2s ease-in-out infinite}
@keyframes s09-pulse{50%{opacity:.35;transform:scale(.75)}}
#sms-09 .story h3{margin:clamp(32px,5vw,62px) 0 18px;font-size:clamp(2.5rem,4.6vw,5.2rem);line-height:.9;letter-spacing:-.065em}
#sms-09 .story>p{max-width:560px;margin:0;color:var(--muted);font-size:1rem;line-height:1.72}
#sms-09 .story>p strong{color:#fff}
#sms-09 .steps{display:grid;gap:8px;margin-top:auto;padding-top:42px}
#sms-09 .step{--accent:var(--violet);display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;width:100%;padding:13px 14px;border:1px solid transparent;border-radius:17px;color:var(--muted);background:transparent;text-align:left;cursor:pointer;transition:color .3s ease,background .3s ease,border-color .3s ease,transform .35s var(--ease)}
#sms-09 .step:hover{color:#fff;transform:translateX(4px)}
#sms-09 .step.is-active{color:#fff;border-color:color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
#sms-09 .step:nth-child(2){--accent:var(--blue)}
#sms-09 .step:nth-child(3){--accent:var(--green)}
#sms-09 .step:nth-child(4){--accent:var(--amber)}
#sms-09 .step-num{display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.045);font-size:.67rem;font-weight:900}
#sms-09 .step.is-active .step-num{color:#0b0d15;border-color:var(--accent);background:var(--accent)}
#sms-09 .step strong{display:block;margin-bottom:2px;font-size:.86rem}
#sms-09 .step small{display:block;color:inherit;font-size:.7rem}
#sms-09 .step-arrow{font-size:1rem;opacity:.35;transition:opacity .3s ease,transform .3s var(--ease)}
#sms-09 .step.is-active .step-arrow{opacity:1;transform:translateX(3px)}
#sms-09 .stage{position:relative;display:grid;place-items:center;overflow:hidden;padding:clamp(34px,5vw,70px);background:radial-gradient(circle at 50% 46%,rgba(72,168,255,.13),transparent 33%)}
#sms-09 .orbit{position:absolute;width:min(610px,80%);aspect-ratio:1;border:1px dashed rgba(255,255,255,.1);border-radius:50%;animation:s09-rotate 35s linear infinite}
#sms-09 .orbit:before, #sms-09 .orbit:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.075);border-radius:50%}
#sms-09 .orbit:before{inset:12%}
#sms-09 .orbit:after{inset:25%}
@keyframes s09-rotate{to{transform:rotate(360deg)}}
#sms-09 .phone{position:relative;z-index:2;width:min(390px,88%);padding:11px;border:1px solid rgba(255,255,255,.2);border-radius:42px;background:linear-gradient(145deg,#262b3b,#090b12 45%);box-shadow:0 45px 90px rgba(0,0,0,.52),0 0 80px rgba(149,108,255,.12);transform:perspective(1200px) rotateY(-7deg) rotateX(2deg);transition:transform .6s var(--ease)}
#sms-09 .stage:hover .phone{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-7px)}
#sms-09 .screen{position:relative;min-height:600px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:33px;background:linear-gradient(180deg,#141827,#0c0f19)}
#sms-09 .notch{position:absolute;top:10px;left:50%;z-index:4;width:90px;height:24px;border-radius:999px;background:#05060a;transform:translateX(-50%)}
#sms-09 .app-top{display:flex;align-items:center;justify-content:space-between;padding:48px 24px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
#sms-09 .app-brand{display:flex;align-items:center;gap:11px}
#sms-09 .leaf{display:grid;width:35px;height:35px;place-items:center;border-radius:11px;color:#07110d;background:var(--green);box-shadow:0 0 25px rgba(85,221,164,.25)}
#sms-09 .leaf svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sms-09 .app-brand strong{display:block;font-size:.82rem}
#sms-09 .app-brand small{display:block;margin-top:2px;color:var(--muted);font-size:.57rem;letter-spacing:.08em;text-transform:uppercase}
#sms-09 .menu-dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 8px 0 rgba(255,255,255,.7),0 -8px 0 rgba(255,255,255,.7)}
#sms-09 .app-body{padding:22px}
#sms-09 .screen-label{margin:0 0 9px;color:var(--active,var(--violet));font-size:.59rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
#sms-09 .app-body h4{margin:0 0 20px;font-size:1.65rem;line-height:1.05;letter-spacing:-.04em}
#sms-09 .view{display:none;animation:s09-screenIn .48s var(--ease)}
#sms-09 .view.is-active{display:block}
@keyframes s09-screenIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
#sms-09 .scan-zone{position:relative;display:grid;height:260px;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:23px;background:radial-gradient(circle at 50% 48%,rgba(85,221,164,.2),transparent 30%),linear-gradient(145deg,#17251f,#111521)}
#sms-09 .tree{position:relative;width:120px;height:150px}
#sms-09 .tree:before{content:"";position:absolute;bottom:0;left:54px;width:12px;height:72px;border-radius:10px;background:#8d664e}
#sms-09 .tree:after{content:"";position:absolute;top:12px;left:10px;width:100px;height:105px;border-radius:55% 45% 48% 52%;background:linear-gradient(135deg,#67d09e,#1f7958);box-shadow:-25px 24px 0 -8px #276f55,26px 22px 0 -9px #3b9c73}
#sms-09 .scan-line{position:absolute;right:18px;left:18px;height:1px;background:var(--green);box-shadow:0 0 18px 3px rgba(85,221,164,.65);animation:s09-scan 3s ease-in-out infinite}
@keyframes s09-scan{0%,100%{top:18%}50%{top:82%}}
#sms-09 .corner{position:absolute;width:25px;height:25px;border-color:var(--green);border-style:solid}
#sms-09 .c1{top:17px;left:17px;border-width:2px 0 0 2px}
#sms-09 .c2{top:17px;right:17px;border-width:2px 2px 0 0}
#sms-09 .c3{bottom:17px;left:17px;border-width:0 0 2px 2px}
#sms-09 .c4{right:17px;bottom:17px;border-width:0 2px 2px 0}
#sms-09 .data-card{padding:17px;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:rgba(255,255,255,.045)}
#sms-09 .data-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
#sms-09 .data-row:last-child{border:0}
#sms-09 .data-row span{color:var(--muted);font-size:.72rem}
#sms-09 .data-row strong{font-size:.75rem}
#sms-09 .meter{height:7px;margin:8px 0 20px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}
#sms-09 .meter span{display:block;width:72%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--green));animation:s09-load 1.1s var(--ease)}
@keyframes s09-load{from{width:0}}
#sms-09 .report{display:grid;gap:10px}
#sms-09 .report-head{padding:18px;border-radius:19px;color:#10131c;background:#fff}
#sms-09 .report-head small{display:block;margin-bottom:7px;color:#6f7485;font-size:.58rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
#sms-09 .report-head strong{font-size:1rem}
#sms-09 .report-item{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:center;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.035)}
#sms-09 .check{display:grid;width:31px;height:31px;place-items:center;border-radius:10px;color:#07110d;background:var(--green);font-weight:900}
#sms-09 .report-item strong{display:block;font-size:.72rem}
#sms-09 .report-item small{color:var(--muted);font-size:.61rem}
#sms-09 .report-note{margin:11px 0 0;color:var(--muted);font-size:.64rem;line-height:1.5}
#sms-09 .connect-map{position:relative;height:235px;overflow:hidden;border-radius:21px;background-color:#161b27;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:28px 28px}
#sms-09 .road{position:absolute;top:-20%;left:44%;width:35px;height:140%;background:rgba(255,255,255,.06);transform:rotate(24deg)}
#sms-09 .pin{position:absolute;display:grid;width:38px;height:38px;place-items:center;border:2px solid #fff;border-radius:50% 50% 50% 0;color:#0b0d15;background:var(--amber);box-shadow:0 8px 30px rgba(255,189,103,.35);transform:rotate(-45deg)}
#sms-09 .pin span{transform:rotate(45deg);font-size:.67rem;font-weight:900}
#sms-09 .p1{top:26%;left:25%}
#sms-09 .p2{top:53%;left:62%}
#sms-09 .p3{top:17%;right:13%}
#sms-09 .connect-card{margin-top:12px;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.04)}
#sms-09 .connect-card strong{display:block;font-size:.76rem}
#sms-09 .connect-card small{display:block;margin-top:4px;color:var(--muted);font-size:.61rem;line-height:1.45}
#sms-09 .progress{position:absolute;right:22px;bottom:18px;left:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#sms-09 .progress span{height:3px;border-radius:99px;background:rgba(255,255,255,.1)}
#sms-09 .progress span.is-active{background:var(--active,var(--violet));box-shadow:0 0 12px var(--active,var(--violet))}
#sms-09 .capabilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
#sms-09 .capability{position:relative;overflow:hidden;min-height:170px;padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035);transition:transform .4s var(--ease),background .35s ease,border-color .35s ease}
#sms-09 .capability:hover{z-index:2;transform:translateY(-7px);border-color:rgba(149,108,255,.38);background:rgba(149,108,255,.08)}
#sms-09 .capability span{display:block;margin-bottom:28px;color:var(--violet);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem}
#sms-09 .capability h3{margin:0 0 9px;font-size:1.08rem;letter-spacing:-.025em}
#sms-09 .capability p{margin:0;color:var(--muted);font-size:.79rem;line-height:1.55}
#sms-09 .bottom-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:clamp(34px,5vw,62px);padding-top:29px;border-top:1px solid var(--line)}
#sms-09 .bottom-row p{max-width:790px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}
#sms-09 .button{display:inline-flex;flex:0 0 auto;min-height:56px;align-items:center;justify-content:center;gap:12px;padding:0 25px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#0b0d14;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28);font-size:.84rem;font-weight:850;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-09 .button:hover{transform:translateY(-3px);box-shadow:0 22px 52px rgba(72,168,255,.2)}
#sms-09 .button span{font-size:1.15rem;transition:transform .25s var(--ease)}
#sms-09 .button:hover span{transform:translateX(4px)}
#sms-09 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
#sms-09 .reveal.is-visible{opacity:1;transform:none}
@media(max-width:1050px){#sms-09 .heading{grid-template-columns:1fr;gap:28px}
#sms-09 .heading-copy{max-width:760px}
#sms-09 .experience{grid-template-columns:1fr}
#sms-09 .story{border-right:0;border-bottom:1px solid var(--line)}
#sms-09 .story>p{max-width:720px}
#sms-09 .steps{grid-template-columns:repeat(4,1fr);margin-top:35px}
#sms-09 .step{grid-template-columns:40px 1fr}
#sms-09 .step-arrow{display:none}
#sms-09 .stage{min-height:740px}
#sms-09 .capabilities{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){#sms-09 .apps{padding:78px 0}
#sms-09 .wrap{width:min(100% - 34px,1460px)}
#sms-09 .section-number{top:22px}
#sms-09 h2{font-size:clamp(2.65rem,15vw,4.5rem);letter-spacing:-.065em}
#sms-09 .experience{border-radius:24px}
#sms-09 .story{padding:25px}
#sms-09 .steps{grid-template-columns:1fr 1fr}
#sms-09 .step{padding:10px}
#sms-09 .step small{display:none}
#sms-09 .stage{min-height:670px;padding:30px 10px}
#sms-09 .phone{width:min(360px,94%);transform:none}
#sms-09 .screen{min-height:580px}
#sms-09 .capabilities{grid-template-columns:1fr}
#sms-09 .capability{min-height:0}
#sms-09 .bottom-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){#sms-09 *, #sms-09 *:before, #sms-09 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
#sms-09 .reveal{opacity:1;transform:none}}
#sms-10{--ink:#12131c;--muted:#6d7080;--paper:#fff;--soft:#f4f3f8;--line:rgba(18,19,28,.12);--violet:#8658f5;--blue:#248fea;--coral:#f06458;--lime:#b8ef62;--ease:cubic-bezier(.22,1,.36,1)}
#sms-10 *{box-sizing:border-box}
#sms-10{color-scheme:light}
#sms-10{margin:0;min-width:320px;overflow-x:clip;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sms-10 button, #sms-10 a{font:inherit}
#sms-10 .design{position:relative;isolation:isolate;overflow:hidden;padding:clamp(84px,9vw,150px) 0;background:radial-gradient(circle at 93% 9%,rgba(36,143,234,.1),transparent 27%),radial-gradient(circle at 5% 87%,rgba(134,88,245,.1),transparent 29%),linear-gradient(145deg,#fff,#f8f7fb 54%,#fff)}
#sms-10 .design:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.25;background-image:linear-gradient(rgba(18,19,28,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(18,19,28,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent)}
#sms-10 .section-number{position:absolute;top:40px;right:clamp(24px,5vw,78px);color:rgba(18,19,28,.07);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1;letter-spacing:-.08em;user-select:none}
#sms-10 .wrap{width:min(1460px,calc(100% - 56px));margin:0 auto}
#sms-10 .heading{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.66fr);gap:clamp(42px,8vw,128px);align-items:end;margin-bottom:clamp(52px,7vw,86px)}
#sms-10 .eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--violet);font-size:.76rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
#sms-10 .eyebrow:before{content:"";width:34px;height:1px;background:currentColor;box-shadow:8px 0 22px currentColor}
#sms-10 h2{max-width:980px;margin:0;font-size:clamp(3rem,6.8vw,6.8rem);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
#sms-10 h2 span{color:transparent;background:linear-gradient(100deg,#171824 5%,var(--violet) 51%,var(--blue) 96%);background-clip:text;-webkit-background-clip:text}
#sms-10 .heading-copy{margin:0;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
#sms-10 .heading-copy strong{color:var(--ink)}
#sms-10 .studio{overflow:hidden;border:1px solid var(--line);border-radius:32px;background:#151722;box-shadow:0 35px 95px rgba(27,25,45,.2)}
#sms-10 .studio-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 19px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;background:#0e1018}
#sms-10 .window-dots{display:flex;gap:7px}
#sms-10 .window-dots span{width:8px;height:8px;border-radius:50%;background:#f06458}
#sms-10 .window-dots span:nth-child(2){background:#ffbd67}
#sms-10 .window-dots span:nth-child(3){background:#65d696}
#sms-10 .studio-title{font-size:.68rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
#sms-10 .studio-state{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.48);font-size:.61rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#sms-10 .studio-state:before{content:"";width:6px;height:6px;border-radius:50%;background:#65d696;box-shadow:0 0 10px #65d696}
#sms-10 .workspace{display:grid;grid-template-columns:76px minmax(500px,1fr) minmax(270px,.48fr);min-height:670px}
#sms-10 .toolbar{display:flex;align-items:center;flex-direction:column;gap:11px;padding:22px 12px;border-right:1px solid rgba(255,255,255,.1);background:#11131d}
#sms-10 .tool{display:grid;width:43px;height:43px;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:13px;color:rgba(255,255,255,.45);background:rgba(255,255,255,.035);cursor:pointer;transition:color .25s ease,background .25s ease,transform .3s var(--ease)}
#sms-10 .tool:hover, #sms-10 .tool.is-active{color:#fff;background:var(--violet);transform:translateY(-2px)}
#sms-10 .tool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sms-10 .toolbar-line{width:26px;height:1px;margin:5px 0;background:rgba(255,255,255,.1)}
#sms-10 .color-dot{width:22px;height:22px;border:3px solid #fff;border-radius:50%;background:linear-gradient(135deg,var(--coral) 50%,var(--blue) 50%);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
#sms-10 .canvas-zone{position:relative;display:grid;place-items:center;overflow:hidden;padding:clamp(28px,4vw,58px);background-color:#242733;background-image:linear-gradient(45deg,#292c38 25%,transparent 25%),linear-gradient(-45deg,#292c38 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#292c38 75%),linear-gradient(-45deg,transparent 75%,#292c38 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}
#sms-10 .artboard{--accent:#8658f5;position:relative;width:min(570px,95%);aspect-ratio:4/4.65;overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 35px 75px rgba(0,0,0,.35);transition:background .45s ease,transform .55s var(--ease)}
#sms-10 .canvas-zone:hover .artboard{transform:translateY(-5px) rotate(-.35deg)}
#sms-10 .art-view{position:absolute;inset:0;display:none;overflow:hidden;padding:9%;animation:s10-viewIn .55s var(--ease)}
#sms-10 .art-view.is-active{display:block}
@keyframes s10-viewIn{from{opacity:0;transform:scale(.965) translateY(10px)}to{opacity:1;transform:none}}
#sms-10 .brand-view{color:#fff;background:var(--accent)}
#sms-10 .brand-view:before{content:"";position:absolute;width:72%;aspect-ratio:1;right:-23%;bottom:-17%;border:1px solid rgba(255,255,255,.26);border-radius:50%;box-shadow:0 0 0 45px rgba(255,255,255,.055),0 0 0 90px rgba(255,255,255,.035)}
#sms-10 .mini-label{position:relative;z-index:2;font-size:.58rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
#sms-10 .brand-mark{position:absolute;top:50%;left:50%;z-index:2;display:grid;width:42%;aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:32% 68% 56% 44%/42% 38% 62% 58%;background:rgba(255,255,255,.12);box-shadow:0 25px 55px rgba(0,0,0,.17);transform:translate(-50%,-54%) rotate(-8deg);transition:border-radius .6s var(--ease),transform .6s var(--ease)}
#sms-10 .brand-mark span{font-size:clamp(2.5rem,6vw,5.4rem);font-weight:950;letter-spacing:-.1em;transform:rotate(8deg)}
#sms-10 .brand-view:hover .brand-mark{border-radius:50%;transform:translate(-50%,-54%) rotate(0)}
#sms-10 .brand-caption{position:absolute;right:9%;bottom:8%;left:9%;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:20px}
#sms-10 .brand-caption strong{font-size:clamp(1.3rem,3vw,2.5rem);line-height:.9;letter-spacing:-.055em}
#sms-10 .brand-caption span{max-width:130px;color:rgba(255,255,255,.68);font-size:.58rem;line-height:1.45;text-align:right;text-transform:uppercase}
#sms-10 .campaign-view{color:#12131c;background:#f4efdf}
#sms-10 .campaign-view:before{content:"";position:absolute;top:-12%;right:-17%;width:67%;aspect-ratio:1;border-radius:50%;background:var(--accent)}
#sms-10 .campaign-view:after{content:"";position:absolute;right:8%;bottom:9%;width:27%;height:36%;border:1px solid rgba(18,19,28,.3);border-radius:999px 999px 14px 14px}
#sms-10 .campaign-view .campaign-kicker{position:relative;z-index:2;display:block;margin-top:9%;font-size:.6rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
#sms-10 .campaign-view h4{position:relative;z-index:2;max-width:75%;margin:7% 0 0;font-size:clamp(3rem,7vw,6.3rem);line-height:.76;letter-spacing:-.085em}
#sms-10 .campaign-view h4 i{display:block;color:var(--accent);font-style:normal}
#sms-10 .campaign-view p{position:absolute;bottom:9%;left:9%;z-index:2;max-width:42%;margin:0;font-size:.68rem;line-height:1.55}
#sms-10 .campaign-badge{position:absolute;right:11%;bottom:13%;z-index:2;display:grid;width:20%;aspect-ratio:1;place-items:center;border-radius:50%;color:#fff;background:#12131c;font-size:.57rem;font-weight:900;letter-spacing:.07em;text-align:center;text-transform:uppercase;animation:s10-float 3.4s ease-in-out infinite}
@keyframes s10-float{50%{transform:translateY(-8px)}}
#sms-10 .motion-view{color:#fff;background:#0f111a}
#sms-10 .motion-view .frame-count{position:absolute;top:8%;right:8%;color:rgba(255,255,255,.44);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.58rem}
#sms-10 .motion-word{position:absolute;top:50%;left:50%;z-index:2;font-size:clamp(3.2rem,8vw,7.2rem);font-weight:950;letter-spacing:-.09em;transform:translate(-50%,-50%)}
#sms-10 .motion-word:before, #sms-10 .motion-word:after{content:"MOVE";position:absolute;inset:0;z-index:-1}
#sms-10 .motion-word:before{color:var(--accent);transform:translate(-11px,-11px);animation:s10-shiftOne 2.2s ease-in-out infinite}
#sms-10 .motion-word:after{color:var(--coral);transform:translate(11px,11px);animation:s10-shiftTwo 2.2s ease-in-out infinite}
@keyframes s10-shiftOne{50%{transform:translate(11px,0)}}
@keyframes s10-shiftTwo{50%{transform:translate(-11px,0)}}
#sms-10 .timeline{position:absolute;right:8%;bottom:9%;left:8%;display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
#sms-10 .timeline span{height:5px;border-radius:99px;background:rgba(255,255,255,.14)}
#sms-10 .timeline span:nth-child(-n+5){background:var(--accent)}
#sms-10 .play-ring{position:absolute;top:15%;left:8%;display:grid;width:55px;height:55px;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;font-size:.8rem}
#sms-10 .kit-view{color:#fff;background:#ec6257}
#sms-10 .kit-grid{display:grid;height:100%;grid-template-columns:1fr 1fr;grid-template-rows:.7fr 1fr;gap:10px}
#sms-10 .kit-piece{position:relative;overflow:hidden;padding:16px;border-radius:15px;background:#151721}
#sms-10 .kit-piece:first-child{grid-column:1/-1;background:#f4efdf;color:#11131b}
#sms-10 .kit-piece span{font-size:.5rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
#sms-10 .kit-piece strong{position:absolute;right:15px;bottom:13px;left:15px;font-size:clamp(1rem,2.4vw,2rem);line-height:.9;letter-spacing:-.05em}
#sms-10 .kit-piece:nth-child(2):after{content:"";position:absolute;top:25%;left:50%;width:75px;height:75px;border:16px solid var(--accent);border-radius:50%;transform:translateX(-50%)}
#sms-10 .kit-piece:nth-child(3){background:var(--accent)}
#sms-10 .kit-piece:nth-child(3):after{content:"Aa";position:absolute;top:34%;left:50%;font-size:clamp(2.4rem,5vw,4.8rem);font-weight:900;letter-spacing:-.08em;transform:translate(-50%,-50%)}
#sms-10 .side-panel{display:flex;min-width:0;flex-direction:column;border-left:1px solid rgba(255,255,255,.1);color:#fff;background:#11131d}
#sms-10 .panel-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:18px;border-bottom:1px solid rgba(255,255,255,.1)}
#sms-10 .mode{padding:11px 8px;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:rgba(255,255,255,.52);background:rgba(255,255,255,.03);font-size:.62rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .25s ease,background .25s ease,border-color .25s ease}
#sms-10 .mode:hover{color:#fff}
#sms-10 .mode.is-active{color:#fff;border-color:var(--violet);background:rgba(134,88,245,.18)}
#sms-10 .inspector{display:flex;flex:1;flex-direction:column;padding:25px}
#sms-10 .inspector-label{margin:0 0 10px;color:var(--violet);font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
#sms-10 .inspector h3{margin:0 0 15px;font-size:clamp(1.55rem,2.4vw,2.25rem);line-height:.95;letter-spacing:-.045em}
#sms-10 .inspector-copy{margin:0;color:rgba(255,255,255,.59);font-size:.8rem;line-height:1.65}
#sms-10 .deliverables{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
#sms-10 .deliverables span{padding:7px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:rgba(255,255,255,.68);background:rgba(255,255,255,.035);font-size:.57rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
#sms-10 .control-block{margin-top:auto;padding-top:35px}
#sms-10 .control-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:rgba(255,255,255,.45);font-size:.58rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
#sms-10 .swatches{display:flex;gap:9px}
#sms-10 .swatch{width:31px;height:31px;border:3px solid transparent;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px rgba(255,255,255,.17);cursor:pointer;transition:transform .25s var(--ease),border-color .25s ease}
#sms-10 .swatch:hover{transform:scale(1.09)}
#sms-10 .swatch.is-active{border-color:#fff}
#sms-10 .interaction-hint{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.35);font-size:.57rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#sms-10 .service-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
#sms-10 .service-note{padding:clamp(27px,4vw,45px);border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.85);box-shadow:0 18px 55px rgba(25,24,43,.06)}
#sms-10 .note-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}
#sms-10 .note-number{color:var(--violet);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem}
#sms-10 .note-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:14px;color:#fff;background:var(--ink)}
#sms-10 .note-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sms-10 .service-note h3{margin:0 0 14px;font-size:clamp(1.65rem,3vw,2.8rem);line-height:.98;letter-spacing:-.05em}
#sms-10 .service-note p{margin:0;color:var(--muted);font-size:.91rem;line-height:1.7}
#sms-10 .bottom-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:clamp(34px,5vw,62px);padding-top:29px;border-top:1px solid var(--line)}
#sms-10 .bottom-row p{max-width:820px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}
#sms-10 .button{display:inline-flex;flex:0 0 auto;min-height:56px;align-items:center;justify-content:center;gap:12px;padding:0 25px;border-radius:999px;color:#fff;background:var(--ink);box-shadow:0 15px 38px rgba(17,18,28,.18);font-size:.84rem;font-weight:850;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-10 .button:hover{transform:translateY(-3px);box-shadow:0 21px 48px rgba(17,18,28,.26)}
#sms-10 .button span{font-size:1.15rem;transition:transform .25s var(--ease)}
#sms-10 .button:hover span{transform:translateX(4px)}
#sms-10 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
#sms-10 .reveal.is-visible{opacity:1;transform:none}
@media(max-width:1120px){#sms-10 .heading{grid-template-columns:1fr;gap:28px}
#sms-10 .heading-copy{max-width:760px}
#sms-10 .workspace{grid-template-columns:68px 1fr}
#sms-10 .side-panel{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);border-left:0}
#sms-10 .panel-tabs{grid-template-columns:repeat(4,1fr)}
#sms-10 .inspector{display:grid;grid-template-columns:1.2fr 1fr;gap:30px}
#sms-10 .control-block{margin-top:0;padding-top:0}
#sms-10 .interaction-hint{grid-column:1/-1}
#sms-10 .canvas-zone{min-height:660px}}
@media(max-width:720px){#sms-10 .design{padding:78px 0}
#sms-10 .wrap{width:min(100% - 34px,1460px)}
#sms-10 .section-number{top:22px}
#sms-10 h2{font-size:clamp(2.65rem,15vw,4.5rem);letter-spacing:-.065em}
#sms-10 .studio{border-radius:24px}
#sms-10 .studio-title{display:none}
#sms-10 .workspace{grid-template-columns:1fr}
#sms-10 .toolbar{display:none}
#sms-10 .canvas-zone{min-height:520px;padding:25px 12px}
#sms-10 .artboard{width:min(420px,95%)}
#sms-10 .panel-tabs{grid-template-columns:1fr 1fr}
#sms-10 .inspector{display:flex}
#sms-10 .service-notes{grid-template-columns:1fr}
#sms-10 .bottom-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){#sms-10 *, #sms-10 *:before, #sms-10 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
#sms-10 .reveal{opacity:1;transform:none}}
#sms-11{--night:#090b14;--panel:#111522;--white:#f7f7fb;--muted:#9ca3b6;--line:rgba(255,255,255,.12);--violet:#956cff;--blue:#48a8ff;--green:#55dda4;--coral:#ff756a;--ease:cubic-bezier(.22,1,.36,1)}
#sms-11 *{box-sizing:border-box}
#sms-11{color-scheme:dark}
#sms-11{margin:0;min-width:320px;overflow-x:clip;color:var(--white);background:var(--night);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sms-11 button, #sms-11 a{font:inherit}
#sms-11 .areas{position:relative;isolation:isolate;overflow:hidden;padding:clamp(84px,9vw,150px) 0;background:radial-gradient(circle at 7% 16%,rgba(149,108,255,.18),transparent 28%),radial-gradient(circle at 91% 82%,rgba(72,168,255,.14),transparent 31%),linear-gradient(145deg,#080a12,#101320 53%,#090b14)}
#sms-11 .areas:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent)}
#sms-11 .section-number{position:absolute;top:40px;right:clamp(24px,5vw,78px);color:rgba(255,255,255,.055);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1;letter-spacing:-.08em;user-select:none}
#sms-11 .wrap{width:min(1460px,calc(100% - 56px));margin:0 auto}
#sms-11 .heading{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.66fr);gap:clamp(42px,8vw,128px);align-items:end;margin-bottom:clamp(52px,7vw,86px)}
#sms-11 .eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--green);font-size:.76rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
#sms-11 .eyebrow:before{content:"";width:34px;height:1px;background:currentColor;box-shadow:8px 0 22px currentColor}
#sms-11 h2{max-width:980px;margin:0;font-size:clamp(3rem,6.8vw,6.8rem);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
#sms-11 h2 span{color:transparent;background:linear-gradient(100deg,#fff 4%,var(--violet) 50%,var(--blue) 96%);background-clip:text;-webkit-background-clip:text}
#sms-11 .heading-copy{margin:0;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
#sms-11 .heading-copy strong{color:#fff}
#sms-11 .network{display:grid;grid-template-columns:minmax(520px,1.2fr) minmax(350px,.72fr);min-height:690px;overflow:hidden;border:1px solid var(--line);border-radius:34px;background:rgba(15,18,30,.84);box-shadow:0 38px 100px rgba(0,0,0,.38);backdrop-filter:blur(18px)}
#sms-11 .visual{position:relative;display:grid;place-items:center;overflow:hidden;min-height:690px;border-right:1px solid var(--line);background:radial-gradient(circle at 50% 48%,rgba(72,168,255,.13),transparent 31%),linear-gradient(145deg,rgba(149,108,255,.07),transparent)}
#sms-11 .visual:before{content:"";position:absolute;inset:0;opacity:.23;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle,#000,transparent 74%)}
#sms-11 .radar{position:relative;width:min(610px,82%);aspect-ratio:1;border:1px solid rgba(255,255,255,.11);border-radius:50%;background:radial-gradient(circle,rgba(72,168,255,.09),transparent 56%);box-shadow:0 0 90px rgba(72,168,255,.08)}
#sms-11 .radar:before, #sms-11 .radar:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.095);border-radius:50%}
#sms-11 .radar:before{inset:17%}
#sms-11 .radar:after{inset:34%}
#sms-11 .axis-x, #sms-11 .axis-y{position:absolute;z-index:1;background:rgba(255,255,255,.08)}
#sms-11 .axis-x{top:50%;right:5%;left:5%;height:1px}
#sms-11 .axis-y{top:5%;bottom:5%;left:50%;width:1px}
#sms-11 .sweep{position:absolute;inset:0;z-index:1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 315deg,rgba(85,221,164,.2) 350deg,rgba(85,221,164,.02) 360deg);animation:s11-sweep 7s linear infinite}
@keyframes s11-sweep{to{transform:rotate(360deg)}}
#sms-11 .texas{position:absolute;inset:14%;z-index:2;opacity:.74;filter:drop-shadow(0 20px 35px rgba(0,0,0,.28))}
#sms-11 .texas svg{width:100%;height:100%;fill:rgba(149,108,255,.15);stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-linejoin:round}
#sms-11 .hub{--hub:var(--blue);position:absolute;z-index:5;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--hub);box-shadow:0 0 0 7px color-mix(in srgb,var(--hub) 18%,transparent),0 0 28px var(--hub);cursor:pointer;transition:transform .35s var(--ease),opacity .3s ease}
#sms-11 .hub:before, #sms-11 .hub:after{content:"";position:absolute;top:50%;left:50%;border:1px solid var(--hub);border-radius:50%;transform:translate(-50%,-50%);animation:s11-ripple 2.7s ease-out infinite}
#sms-11 .hub:before{width:34px;height:34px}
#sms-11 .hub:after{width:34px;height:34px;animation-delay:1.35s}
@keyframes s11-ripple{to{width:90px;height:90px;opacity:0}}
#sms-11 .hub:hover, #sms-11 .hub.is-active{transform:scale(1.25)}
#sms-11 .hub{translate:-50% -50%}
#sms-11 .hub.houston{top:59.2%;left:75.4%}
#sms-11 .hub.san-antonio{top:61.4%;left:58.5%;--hub:var(--violet)}
#sms-11 .hub.remote{top:22%;left:86%;--hub:var(--green)}
#sms-11 .hub-label{position:absolute;z-index:5;padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#fff;background:rgba(9,11,20,.8);font-size:.58rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;pointer-events:none;transition:opacity .3s ease,transform .35s var(--ease)}
#sms-11 .label-houston{top:50%;left:77%}
#sms-11 .label-san{top:67%;left:31%}
#sms-11 .label-remote{top:12.5%;left:71%}
#sms-11 .network[data-active="0"] .label-houston, #sms-11 .network[data-active="1"] .label-san, #sms-11 .network[data-active="2"] .label-remote{border-color:rgba(255,255,255,.35);transform:translateY(-3px)}
#sms-11 .signal{position:absolute;z-index:4;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);transform-origin:left center;opacity:.48}
#sms-11 .signal-one{top:61.4%;left:58.5%;width:17%;transform:rotate(-7.4deg)}
#sms-11 .signal-two{top:61.4%;left:58.5%;width:48%;background:linear-gradient(90deg,transparent,var(--violet),transparent);transform:rotate(-55deg)}
#sms-11 .location-readout{position:absolute;right:25px;bottom:23px;left:25px;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(9,11,20,.72);backdrop-filter:blur(15px)}
#sms-11 .location-readout span{color:rgba(255,255,255,.45);font-size:.57rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
#sms-11 .location-readout strong{font-size:.72rem;text-align:right}
#sms-11 .map-note{position:absolute;top:23px;left:25px;z-index:7;color:rgba(255,255,255,.32);font-size:.55rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#sms-11 .directory{display:flex;min-width:0;flex-direction:column;padding:clamp(28px,4vw,52px);background:linear-gradient(155deg,rgba(149,108,255,.08),transparent 38%)}
#sms-11 .selector{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:6px;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.035)}
#sms-11 .area-tab{padding:12px 8px;border:0;border-radius:12px;color:rgba(255,255,255,.5);background:transparent;font-size:.62rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .25s ease,background .25s ease,box-shadow .25s ease}
#sms-11 .area-tab:hover{color:#fff}
#sms-11 .area-tab.is-active{color:#fff;background:var(--violet);box-shadow:0 9px 23px rgba(149,108,255,.25)}
#sms-11 .area-panel{display:none;padding-top:clamp(34px,5vw,58px);animation:s11-panelIn .5s var(--ease)}
#sms-11 .area-panel.is-active{display:block}
@keyframes s11-panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#sms-11 .area-count{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--green);font-size:.62rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
#sms-11 .area-count:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
#sms-11 .area-panel h3{margin:0 0 16px;font-size:clamp(2.25rem,4vw,4.3rem);line-height:.92;letter-spacing:-.06em}
#sms-11 .area-panel>p{margin:0;color:var(--muted);font-size:.91rem;line-height:1.7}
#sms-11 .cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
#sms-11 .city{padding:9px 11px;border:1px solid rgba(255,255,255,.11);border-radius:999px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.035);font-size:.67rem;font-weight:750;transition:color .25s ease,border-color .25s ease,background .25s ease,transform .3s var(--ease)}
#sms-11 .city:hover{color:#fff;border-color:rgba(72,168,255,.5);background:rgba(72,168,255,.1);transform:translateY(-3px)}
#sms-11 .area-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:32px}
#sms-11 .meta-card{padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.03)}
#sms-11 .meta-card small{display:block;margin-bottom:6px;color:rgba(255,255,255,.38);font-size:.54rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
#sms-11 .meta-card strong{font-size:.72rem}
#sms-11 .directory-bottom{margin-top:auto;padding-top:38px}
#sms-11 .directory-bottom p{margin:0 0 17px;color:rgba(255,255,255,.47);font-size:.75rem;line-height:1.55}
#sms-11 .mini-button{display:inline-flex;min-height:47px;align-items:center;justify-content:center;gap:10px;padding:0 18px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#0b0d14;background:#fff;font-size:.72rem;font-weight:850;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-11 .mini-button:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(72,168,255,.18)}
#sms-11 .service-strip{display:grid;grid-template-columns:auto minmax(100px,1fr) auto;gap:22px;align-items:center;margin-top:18px;padding:24px 27px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035)}
#sms-11 .service-strip strong{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase}
#sms-11 .line{position:relative;height:1px;overflow:hidden;background:linear-gradient(90deg,var(--violet),var(--blue),var(--green))}
#sms-11 .line:after{content:"";position:absolute;top:-3px;left:-8px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(72,168,255,.7);animation:s11-travel 4s linear infinite}
@keyframes s11-travel{to{left:calc(100% + 8px)}}
#sms-11 .service-strip p{max-width:570px;margin:0;color:var(--muted);font-size:.82rem;line-height:1.55;text-align:right}
#sms-11 .bottom-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:clamp(34px,5vw,62px);padding-top:29px;border-top:1px solid var(--line)}
#sms-11 .bottom-row p{max-width:800px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}
#sms-11 .button{display:inline-flex;flex:0 0 auto;min-height:56px;align-items:center;justify-content:center;gap:12px;padding:0 25px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#0b0d14;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28);font-size:.84rem;font-weight:850;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-11 .button:hover{transform:translateY(-3px);box-shadow:0 22px 52px rgba(72,168,255,.2)}
#sms-11 .button span{font-size:1.15rem;transition:transform .25s var(--ease)}
#sms-11 .button:hover span{transform:translateX(4px)}
#sms-11 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
#sms-11 .reveal.is-visible{opacity:1;transform:none}
@media(max-width:1050px){#sms-11 .heading{grid-template-columns:1fr;gap:28px}
#sms-11 .heading-copy{max-width:760px}
#sms-11 .network{grid-template-columns:1fr}
#sms-11 .visual{min-height:680px;border-right:0;border-bottom:1px solid var(--line)}
#sms-11 .directory{min-height:600px}
#sms-11 .selector{max-width:600px}
#sms-11 .directory-bottom{margin-top:45px}}
@media(max-width:680px){#sms-11 .areas{padding:78px 0}
#sms-11 .wrap{width:min(100% - 34px,1460px)}
#sms-11 .section-number{top:22px}
#sms-11 h2{font-size:clamp(2.65rem,15vw,4.5rem);letter-spacing:-.065em}
#sms-11 .network{border-radius:24px}
#sms-11 .visual{min-height:510px}
#sms-11 .radar{width:94%}
#sms-11 .map-note{top:17px;left:18px}
#sms-11 .location-readout{right:14px;bottom:14px;left:14px}
#sms-11 .hub-label{font-size:.48rem}
#sms-11 .label-houston{left:66%}
#sms-11 .label-san{left:14%}
#sms-11 .directory{min-height:620px;padding:24px}
#sms-11 .selector{grid-template-columns:1fr}
#sms-11 .area-meta{grid-template-columns:1fr}
#sms-11 .service-strip{grid-template-columns:1fr;gap:13px}
#sms-11 .service-strip p{text-align:left}
#sms-11 .bottom-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){#sms-11 *, #sms-11 *:before, #sms-11 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
#sms-11 .reveal{opacity:1;transform:none}}
#sms-12{--ink:#11121c;--muted:#6b6f7e;--paper:#fff;--soft:#f6f5fa;--line:rgba(17,18,28,.12);--violet:#8658f5;--blue:#248fea;--green:#278864;--coral:#ee6558;--ease:cubic-bezier(.22,1,.36,1)}
#sms-12 *{box-sizing:border-box}
#sms-12{color-scheme:light}
#sms-12{margin:0;min-width:320px;overflow-x:clip;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#sms-12 button, #sms-12 a{font:inherit}
#sms-12 .news{position:relative;isolation:isolate;overflow:hidden;padding:clamp(84px,9vw,150px) 0;background:radial-gradient(circle at 93% 10%,rgba(36,143,234,.1),transparent 27%),radial-gradient(circle at 5% 88%,rgba(134,88,245,.1),transparent 28%),linear-gradient(145deg,#fff,#f8f7fb 54%,#fff)}
#sms-12 .news:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.25;background-image:linear-gradient(rgba(17,18,28,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(17,18,28,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent)}
#sms-12 .section-number{position:absolute;top:40px;right:clamp(24px,5vw,78px);color:rgba(17,18,28,.07);font-size:clamp(3rem,7vw,7rem);font-weight:800;line-height:1;letter-spacing:-.08em;user-select:none}
#sms-12 .wrap{width:min(1460px,calc(100% - 56px));margin:0 auto}
#sms-12 .heading{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.66fr);gap:clamp(42px,8vw,128px);align-items:end;margin-bottom:clamp(52px,7vw,86px)}
#sms-12 .eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--violet);font-size:.76rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
#sms-12 .eyebrow:before{content:"";width:34px;height:1px;background:currentColor;box-shadow:8px 0 22px currentColor}
#sms-12 h2{max-width:980px;margin:0;font-size:clamp(3rem,6.8vw,6.8rem);line-height:.92;letter-spacing:-.07em;text-wrap:balance}
#sms-12 h2 span{color:transparent;background:linear-gradient(100deg,#171824 4%,var(--violet) 51%,var(--blue) 96%);background-clip:text;-webkit-background-clip:text}
#sms-12 .heading-copy{margin:0;color:var(--muted);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.75}
#sms-12 .heading-copy strong{color:var(--ink)}
#sms-12 .feature{display:grid;grid-template-columns:minmax(390px,.86fr) minmax(480px,1.14fr);min-height:610px;overflow:hidden;border:1px solid var(--line);border-radius:34px;background:#10121c;box-shadow:0 35px 95px rgba(26,24,44,.18)}
#sms-12 .feature-copy{position:relative;z-index:2;display:flex;flex-direction:column;padding:clamp(34px,5vw,64px);color:#fff;background:radial-gradient(circle at 0 0,rgba(134,88,245,.25),transparent 37%),linear-gradient(150deg,#11131f,#0b0d15)}
#sms-12 .resource-label{display:inline-flex;width:max-content;align-items:center;gap:9px;padding:9px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#9fe9ca;background:rgba(39,136,100,.12);font-size:.63rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
#sms-12 .resource-label:before{content:"";width:7px;height:7px;border-radius:50%;background:#55dda4;box-shadow:0 0 13px #55dda4}
#sms-12 .feature-copy h3{max-width:600px;margin:clamp(31px,5vw,59px) 0 20px;font-size:clamp(2.7rem,5vw,5.5rem);line-height:.9;letter-spacing:-.065em}
#sms-12 .feature-copy>p{max-width:600px;margin:0;color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.72}
#sms-12 .feature-copy>p strong{color:#fff}
#sms-12 .resource-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:27px}
#sms-12 .resource-list span{padding:8px 10px;border:1px solid rgba(255,255,255,.11);border-radius:999px;color:rgba(255,255,255,.66);background:rgba(255,255,255,.04);font-size:.61rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
#sms-12 .feature-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:37px}
#sms-12 .download, #sms-12 .edition-note-link{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:11px;padding:0 20px;border-radius:999px;font-size:.76rem;font-weight:850;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease,background .25s ease}
#sms-12 .download{color:#10121c;background:#fff;box-shadow:0 15px 35px rgba(0,0,0,.25)}
#sms-12 .download:hover{transform:translateY(-3px);box-shadow:0 20px 45px rgba(72,168,255,.2)}
#sms-12 .edition-note-link{border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.68);background:rgba(255,255,255,.04);cursor:pointer}
#sms-12 .edition-note-link:hover{color:#fff;background:rgba(255,255,255,.08)}
#sms-12 .book-stage{position:relative;display:grid;place-items:center;overflow:hidden;padding:clamp(35px,5vw,70px);background:radial-gradient(circle at 50% 47%,rgba(72,168,255,.13),transparent 32%),#1c202c}
#sms-12 .book-stage:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:37px 37px;mask-image:radial-gradient(circle,#000,transparent 74%)}
#sms-12 .orbit{position:absolute;width:min(590px,85%);aspect-ratio:1;border:1px dashed rgba(255,255,255,.12);border-radius:50%;animation:s12-rotate 32s linear infinite}
#sms-12 .orbit:before, #sms-12 .orbit:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}
#sms-12 .orbit:before{inset:16%}
#sms-12 .orbit:after{inset:32%}
@keyframes s12-rotate{to{transform:rotate(360deg)}}
#sms-12 .book{position:relative;z-index:2;width:min(370px,78%);aspect-ratio:.73;perspective:1400px;filter:drop-shadow(0 35px 35px rgba(0,0,0,.45));transition:transform .6s var(--ease)}
#sms-12 .book-stage:hover .book{transform:translateY(-8px) rotate(-1deg)}
#sms-12 .book-back{position:absolute;inset:2% -4% -2% 4%;border-radius:9px 20px 20px 9px;background:#e8e4f0}
#sms-12 .book-pages{position:absolute;top:3%;right:-5%;bottom:2%;width:9%;border-radius:0 10px 10px 0;background:repeating-linear-gradient(to bottom,#fff 0 3px,#d9d5e0 4px)}
#sms-12 .book-cover{position:absolute;inset:0;overflow:hidden;padding:9%;border-radius:8px 18px 18px 8px;color:#fff;background:linear-gradient(145deg,#8258f4,#1e8fe9 62%,#145f9c);box-shadow:inset 10px 0 22px rgba(0,0,0,.18);transform-origin:left center;transition:transform .8s var(--ease)}
#sms-12 .book:hover .book-cover{transform:rotateY(-12deg)}
#sms-12 .book-cover:before{content:"";position:absolute;right:-28%;bottom:-14%;width:92%;aspect-ratio:1;border:1px solid rgba(255,255,255,.32);border-radius:50%;box-shadow:0 0 0 45px rgba(255,255,255,.07),0 0 0 90px rgba(255,255,255,.04)}
#sms-12 .book-cover:after{content:"";position:absolute;top:0;bottom:0;left:10px;width:1px;background:rgba(255,255,255,.24);box-shadow:5px 0 10px rgba(0,0,0,.12)}
#sms-12 .book-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:15px;color:rgba(255,255,255,.72);font-size:.52rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
#sms-12 .book-year{display:grid;width:56px;height:56px;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;font-size:.75rem}
#sms-12 .book-title{position:absolute;top:39%;left:9%;z-index:2;max-width:80%;font-size:clamp(2.4rem,5vw,4.6rem);font-weight:950;line-height:.78;letter-spacing:-.075em}
#sms-12 .book-title small{display:block;margin-bottom:12px;font-size:.55rem;line-height:1;letter-spacing:.16em;text-transform:uppercase}
#sms-12 .book-footer{position:absolute;right:9%;bottom:8%;left:9%;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:20px}
#sms-12 .book-footer strong{font-size:.7rem}
#sms-12 .book-footer span{max-width:110px;color:rgba(255,255,255,.65);font-size:.5rem;line-height:1.45;text-align:right;text-transform:uppercase}
#sms-12 .free-badge{position:absolute;top:15%;right:7%;z-index:3;display:grid;width:75px;height:75px;place-items:center;border-radius:50%;color:#10121c;background:#b8ef62;box-shadow:0 15px 35px rgba(0,0,0,.25);font-size:.61rem;font-weight:950;letter-spacing:.05em;text-align:center;text-transform:uppercase;animation:s12-float 3.5s ease-in-out infinite}
@keyframes s12-float{50%{transform:translateY(-8px) rotate(3deg)}}
#sms-12 .edition-note{position:absolute;right:24px;bottom:22px;left:24px;z-index:5;display:none;padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:16px;color:rgba(255,255,255,.72);background:rgba(9,11,20,.88);backdrop-filter:blur(14px);font-size:.68rem;line-height:1.55}
#sms-12 .edition-note.is-visible{display:block;animation:s12-noteIn .35s var(--ease)}
@keyframes s12-noteIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#sms-12 .edition-note strong{color:#fff}
#sms-12 .articles{margin-top:clamp(58px,7vw,90px)}
#sms-12 .articles-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
#sms-12 .articles-head h3{margin:0;font-size:clamp(2.3rem,4vw,4.2rem);line-height:.95;letter-spacing:-.055em}
#sms-12 .articles-head p{max-width:530px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.65;text-align:right}
#sms-12 .article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#sms-12 .article{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:25px;background:#fff;box-shadow:0 20px 60px rgba(25,24,43,.08);transition:transform .45s var(--ease),box-shadow .4s ease}
#sms-12 .article:hover{z-index:2;transform:translateY(-9px);box-shadow:0 30px 75px rgba(25,24,43,.16)}
#sms-12 .article-image{position:relative;height:245px;overflow:hidden;background:#171a25}
#sms-12 .article-image img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--ease),filter .5s ease}
#sms-12 .article:hover .article-image img{transform:scale(1.055);filter:saturate(1.08)}
#sms-12 .article-image:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,11,19,.35),transparent 56%)}
#sms-12 .category{position:absolute;top:16px;left:16px;z-index:2;padding:7px 9px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;background:rgba(9,11,20,.62);backdrop-filter:blur(9px);font-size:.56rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
#sms-12 .article-body{padding:25px}
#sms-12 .article-body h4{margin:0 0 20px;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.08;letter-spacing:-.04em}
#sms-12 .read-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.65rem;font-weight:850;letter-spacing:.07em;text-decoration:none;text-transform:uppercase}
#sms-12 .read-link span:last-child{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;color:#fff;background:var(--ink);font-size:.9rem;transition:transform .3s var(--ease),background .3s ease}
#sms-12 .article:hover .read-link span:last-child{background:var(--violet);transform:rotate(45deg)}
#sms-12 .bottom-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:clamp(34px,5vw,62px);padding-top:29px;border-top:1px solid var(--line)}
#sms-12 .bottom-row p{max-width:790px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}
#sms-12 .button{display:inline-flex;flex:0 0 auto;min-height:56px;align-items:center;justify-content:center;gap:12px;padding:0 25px;border-radius:999px;color:#fff;background:var(--ink);box-shadow:0 15px 38px rgba(17,18,28,.18);font-size:.84rem;font-weight:850;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s ease}
#sms-12 .button:hover{transform:translateY(-3px);box-shadow:0 21px 48px rgba(17,18,28,.26)}
#sms-12 .button span{font-size:1.15rem;transition:transform .25s var(--ease)}
#sms-12 .button:hover span{transform:translateX(4px)}
#sms-12 .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
#sms-12 .reveal.is-visible{opacity:1;transform:none}
@media(max-width:1050px){#sms-12 .heading{grid-template-columns:1fr;gap:28px}
#sms-12 .heading-copy{max-width:760px}
#sms-12 .feature{grid-template-columns:1fr}
#sms-12 .feature-copy{min-height:570px}
#sms-12 .book-stage{min-height:690px}
#sms-12 .article-grid{grid-template-columns:1fr 1fr}
#sms-12 .article:last-child{grid-column:1/-1}
#sms-12 .article:last-child .article-image{height:330px}}
@media(max-width:680px){#sms-12 .news{padding:78px 0}
#sms-12 .wrap{width:min(100% - 34px,1460px)}
#sms-12 .section-number{top:22px}
#sms-12 h2{font-size:clamp(2.65rem,15vw,4.5rem);letter-spacing:-.065em}
#sms-12 .feature{border-radius:24px}
#sms-12 .feature-copy{min-height:630px;padding:27px}
#sms-12 .book-stage{min-height:560px;padding:35px 12px}
#sms-12 .book{width:min(330px,78%)}
#sms-12 .free-badge{width:66px;height:66px}
#sms-12 .articles-head{align-items:flex-start;flex-direction:column}
#sms-12 .articles-head p{text-align:left}
#sms-12 .article-grid{grid-template-columns:1fr}
#sms-12 .article:last-child{grid-column:auto}
#sms-12 .article:last-child .article-image, #sms-12 .article-image{height:235px}
#sms-12 .bottom-row{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){#sms-12 *, #sms-12 *:before, #sms-12 *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
#sms-12 .reveal{opacity:1;transform:none}}