:root {
--bg:#050816;
  --bg2:#0a1024;
  --panel:rgba(13,19,41,.72);
  --panel-strong:#101831;
  --text:#f7f9ff;
  --muted:#aeb8d0;
  --line:rgba(255,255,255,.09);
  --cyan:#5ce1ff;
  --violet:#8b7cff;
  --pink:#ff6bd6;
  --green:#36e6a5;
  --shadow:0 28px 90px rgba(0,0,0,.42);
  --radius:26px;
  --max:1200px;
}

* {
box-sizing:border-box
}

body {
margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(92,225,255,.15),transparent 32%),
    radial-gradient(circle at 90% 10%,rgba(139,124,255,.17),transparent 30%),
    radial-gradient(circle at 50% 90%,rgba(255,107,214,.09),transparent 35%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

body::before {
content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 85%);
}

a {
color:inherit;text-decoration:none
}

button,
input,
textarea,
select {
font:inherit
}

.container {
width:min(calc(100% - 32px),var(--max));margin:auto
}

.skip-link {
position:absolute;left:-9999px;top:12px;background:white;color:black;padding:10px 14px;border-radius:10px;z-index:999
}

.skip-link:focus {
left:12px
}

.site-header {
position:sticky;top:0;z-index:100;
  background:rgba(5,8,22,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.nav {
min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px
}

.brand {
display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.02em
}

.brand span:last-child {
display:flex;flex-direction:column
}

.brand small {
color:var(--muted);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-top:2px
}

.nav-links {
display:flex;align-items:center;gap:6px
}

.nav-links a {
padding:11px 13px;border-radius:12px;color:var(--muted);font-weight:800;font-size:.92rem
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
background:rgba(255,255,255,.06);color:#fff
}

.nav-toggle {
display:none;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;border-radius:12px;padding:10px 12px
}

.btn {
display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 18px;border-radius:14px;font-weight:900;
  border:1px solid transparent;cursor:pointer;transition:.25s transform,.25s box-shadow,.25s background
}

.btn:hover {
transform:translateY(-2px)
}

.btn-primary {
background:linear-gradient(135deg,var(--cyan),var(--violet) 58%,var(--pink));
  color:#04111d;box-shadow:0 14px 38px rgba(92,225,255,.18)
}

.btn-secondary {
background:rgba(255,255,255,.045);border-color:var(--line);color:#fff
}

.hero {
padding:86px 0 74px;position:relative
}

.hero-grid {
display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center
}

.hero h1 {
font-size:clamp(3rem,7vw,6.2rem);line-height:.93;letter-spacing:-.065em;margin:20px 0 22px
}

.hero p {
font-size:1.12rem;line-height:1.8;color:var(--muted);max-width:720px
}

.hero-actions {
display:flex;gap:12px;flex-wrap:wrap;margin-top:30px
}

.section {
padding:86px 0
}

.section-alt {
background:rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}

.section-head {
display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px
}

.eyebrow {
color:var(--cyan);font-weight:1000;letter-spacing:.14em;text-transform:uppercase;font-size:.77rem
}

.section h2,
.page-hero h1 {
font-size:clamp(2.3rem,5vw,4.15rem);line-height:1.02;letter-spacing:-.05em;margin:10px 0 12px
}

.section-head p,
.page-hero p {
max-width:680px;color:var(--muted);line-height:1.75
}

.cards {
display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}

.card {
position:relative;padding:26px;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  overflow:hidden;transition:.28s transform,.28s border-color
}

.card::before {
content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:var(--violet);filter:blur(55px);opacity:.12;top:-40px;right:-30px
}

.card:hover {
transform:translateY(-7px);border-color:rgba(92,225,255,.28)
}

.icon {
width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(92,225,255,.2),rgba(139,124,255,.2));font-size:1.25rem
}

.card h3 {
font-size:1.25rem;margin:18px 0 10px
}

.card p {
color:var(--muted);line-height:1.65;margin:0
}

.tags {
display:flex;flex-wrap:wrap;gap:8px;margin-top:18px
}

.tag {
padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#c7d0e3;font-size:.79rem;font-weight:800
}

.cta {
padding:42px;border-radius:30px;border:1px solid rgba(255,255,255,.13);background:radial-gradient(circle at 90% 10%,rgba(54,230,165,.17),transparent 30%),linear-gradient(135deg,rgba(92,225,255,.12),rgba(139,124,255,.11));display:flex;align-items:center;justify-content:space-between;gap:28px
}

.page-hero {
padding:80px 0 44px
}

.page-grid {
display:grid;grid-template-columns:1fr 1fr;gap:22px
}

.panel {
padding:30px;border-radius:26px;border:1px solid var(--line);background:rgba(255,255,255,.035)
}

.panel p {
color:var(--muted);line-height:1.75
}

.form {
display:grid;gap:16px
}

.field {
display:grid;gap:8px
}

.field label {
font-weight:900
}

input,
textarea,
select {
width:100%;border:1px solid var(--line);background:#0a1329;color:#fff;border-radius:14px;padding:14px 15px;outline:none
}

input:focus,
textarea:focus,
select:focus {
border-color:var(--cyan);box-shadow:0 0 0 3px rgba(92,225,255,.12)
}

textarea {
min-height:160px;resize:vertical
}

.form-message {
display:none;padding:13px 15px;border-radius:14px;background:rgba(54,230,165,.11);border:1px solid rgba(54,230,165,.24);color:#bfffe8
}

.contact-list {
display:grid;gap:12px;margin-top:22px
}

.contact-item {
padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025)
}

.contact-item span {
display:block;color:var(--muted);font-size:.84rem;margin-bottom:5px
}

footer {
padding:44px 0;border-top:1px solid var(--line);color:var(--muted)
}

.reveal {
opacity:0;transform:translateY(20px);transition:.75s ease
}

.reveal.visible {
opacity:1;transform:none
}

@media (max-width:930px) {
.hero-grid,
.page-grid {
grid-template-columns:1fr
}

.cards {
grid-template-columns:1fr 1fr
}
}

@media (max-width:720px) {
.nav-toggle {
display:inline-flex
}

.nav-links {
display:none;position:absolute;left:16px;right:16px;top:72px;flex-direction:column;align-items:stretch;padding:14px;background:#091126;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)
}

.nav-links.open {
display:flex
}

.nav-links a {
text-align:center
}

.hero {
padding-top:58px
}

.hero h1 {
font-size:3.4rem
}

.cards {
grid-template-columns:1fr
}

.section-head,
.cta {
flex-direction:column;align-items:flex-start
}
}

@media (prefers-reduced-motion:reduce) {
* {
scroll-behavior:auto!important;transition:none!important
}
}

:root {
--glow-cyan:0 0 50px rgba(92,225,255,.22);
  --glow-violet:0 0 60px rgba(139,124,255,.22);
}

body {
isolation:isolate
}

body::after {
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(92,225,255,.10),transparent 20%),
    radial-gradient(circle at calc(var(--mx,50%) + 12%) calc(var(--my,20%) + 10%),rgba(139,124,255,.08),transparent 25%);
  transition:background .12s linear;
}

.site-header {
transition:.25s background,.25s box-shadow
}

.site-header.scrolled {
background:rgba(5,8,22,.92);box-shadow:0 12px 40px rgba(0,0,0,.25)
}

@keyframes logoShine {
0% {
transform:rotate(-35deg) translateY(-35px)
}

35%,
100% {
transform:rotate(-35deg) translateY(55px)
}
}

.hero::before {
content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;
  background:linear-gradient(120deg,transparent 0 46%,rgba(92,225,255,.12) 50%,transparent 54%);
  background-size:220% 100%;animation:heroSweep 10s linear infinite
}

@keyframes heroSweep {
to {
background-position:-220% 0
}
}

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

.hero-subline {
display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;color:#dce4f4;font-weight:800;font-size:.9rem
}

.hero-subline span::before {
content:"✦";color:var(--cyan);margin-right:8px
}

.magnetic {
position:relative;will-change:transform
}

@keyframes marquee {
to {
transform:translateX(-50%)
}
}

.service-spotlight {
position:relative
}

.service-spotlight::after {
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(92,225,255,.14),transparent 34%);
  opacity:0;transition:.25s opacity
}

.service-spotlight:hover::after {
opacity:1
}

.timeline {
display:grid;gap:16px
}

.timeline-item {
display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:start
}

.timeline-item b {
color:var(--cyan);font-size:.82rem
}

.timeline-item div {
padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)
}

.timeline-item h3 {
margin:0 0 8px
}

.timeline-item p {
margin:0;color:var(--muted);line-height:1.65
}

.page-transition {
position:fixed;inset:0;background:#050816;z-index:9999;pointer-events:none;transform:translateY(100%);transition:.45s transform ease
}

.page-transition.active {
transform:translateY(0)
}

.back-to-top {
position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:15px;
  border:1px solid var(--line);background:rgba(10,16,36,.86);color:#fff;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;z-index:70;backdrop-filter:blur(12px)
}

.back-to-top.show {
opacity:1;pointer-events:auto;transform:none
}

@media (max-width:720px) {
.timeline-item {
grid-template-columns:1fr
}
}

@media (prefers-reduced-motion:reduce) {
.hero::before {
animation:none!important
}
}

.signature-visual {
position:relative;border-radius:30px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:var(--shadow)
}

.signature-visual img {
display:block;width:100%;height:auto
}

@keyframes floatVisual {
0%,
100% {
transform:translateY(0)
}

50% {
transform:translateY(-10px)
}
}

.service-showcase {
display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch;margin-bottom:22px
}

.service-showcase.reverse {
grid-template-columns:.95fr 1.05fr
}

.service-showcase.reverse .signature-visual {
order:2
}

.service-copy {
padding:32px;border-radius:30px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  display:flex;flex-direction:column;justify-content:center
}

.service-copy h3 {
font-size:2rem;margin:10px 0 14px
}

.service-copy p {
color:var(--muted);line-height:1.75
}

.service-copy .tags {
margin-top:20px
}

@media (max-width:920px) {
.service-showcase,
.service-showcase.reverse {
grid-template-columns:1fr
}

.service-showcase.reverse .signature-visual {
order:initial
}
}

@media (max-width:720px) {
.service-copy {
padding:22px
}
}

:root {
--t20-blue:#61e6ff;
  --t20-violet:#8a7cff;
  --t20-pink:#ff6ed8;
}

body {
background:
  radial-gradient(circle at 20% 10%,rgba(97,230,255,.08),transparent 22%),
  radial-gradient(circle at 82% 18%,rgba(138,124,255,.08),transparent 24%),
  #050816;
}

.brand-lockup {
display:flex;align-items:center;gap:12px
}

.btn-primary {
background:linear-gradient(135deg,var(--t20-blue),var(--t20-violet) 58%,var(--t20-pink));
  box-shadow:0 12px 32px rgba(97,230,255,.18),inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-primary::after {
content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.32) 45%,transparent 70%);
  transform:translateX(-140%);transition:.6s transform
}

.btn-primary:hover::after {
transform:translateX(140%)
}

.btn {
overflow:hidden
}

.section-head h2,
.hero h1 {
letter-spacing:-.035em
}

.signature-visual,
.service-copy {
box-shadow:0 28px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)
}

.card:hover {
transform:translateY(-8px) scale(1.012);box-shadow:0 22px 70px rgba(0,0,0,.35),0 0 45px rgba(97,230,255,.08)
}

:root {
--surface:#0b142b;--surface-2:#101b38;--text-soft:#c4cee2;--radius-xl:34px;--ease-brand:cubic-bezier(.2,.8,.2,1)
}

body {
font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility
}

.container {
width:min(1180px,calc(100% - 40px))
}

.section {
padding:112px 0
}

.section-alt {
position:relative;overflow:hidden
}

.section-alt:before {
content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(97,230,255,.025),transparent);pointer-events:none
}

.site-header {
border-bottom:1px solid transparent
}

.site-header.scrolled {
background:rgba(5,8,22,.84);border-bottom-color:rgba(255,255,255,.07);box-shadow:0 14px 50px rgba(0,0,0,.22)
}

.brand-logo {
width:48px;height:48px;flex:0 0 auto;filter:drop-shadow(0 0 18px rgba(97,230,255,.2));transition:transform .45s var(--ease-brand)
}

.brand:hover .brand-logo {
transform:rotate(-4deg) scale(1.06)
}

.brand-copy {
display:grid;line-height:1
}

.brand-copy strong {
font-size:.98rem;letter-spacing:.015em
}

.brand-copy small {
margin-top:7px;color:var(--muted);font-size:.67rem;letter-spacing:.08em;text-transform:uppercase
}

.nav-links>a:not(.btn) {
position:relative
}

.nav-links>a:not(.btn):after {
content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--t20-blue),var(--t20-violet));transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-brand)
}

.nav-links>a:hover:after,
.nav-links>a[aria-current="page"]:after {
transform:scaleX(1);transform-origin:left
}

.hero {
padding:100px 0 90px
}

.hero-grid {
gap:60px
}

.hero-copy {
max-width:660px
}

.hero h1 {
font-size:clamp(3.2rem,6vw,6.2rem);line-height:.96;max-width:12ch
}

.hero p {
font-size:1.12rem;max-width:62ch
}

.hero-proof {
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px
}

.hero-proof div {
padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line)
}

.hero-proof strong {
display:block;font-size:1rem
}

.hero-proof span {
display:block;margin-top:5px;color:var(--muted);font-size:.78rem
}

@keyframes corePulse {
50% {
transform:scale(1.12);opacity:.65
}
}

.section-head {
margin-bottom:50px
}

.section-head h2 {
font-size:clamp(2.3rem,4vw,4.2rem);line-height:1.02;max-width:13ch
}

.section-head>p {
max-width:48ch;font-size:1.03rem
}

.cards {
gap:18px
}

.card {
padding:28px;border-radius:28px;min-height:300px
}

.card h3 {
font-size:1.35rem
}

.card p {
line-height:1.7
}

.service-showcase {
gap:30px;margin-bottom:34px
}

.service-copy {
padding:44px
}

.service-copy h3 {
font-size:clamp(2rem,3vw,3rem);line-height:1.05
}

.service-copy p {
font-size:1.02rem
}

.signature-visual {
border-radius:var(--radius-xl)
}

.process-grid {
display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step
}

.process-card {
counter-increment:step;padding:26px;border-radius:26px;border:1px solid var(--line);background:rgba(255,255,255,.025)
}

.process-card:before {
content:"0" counter(step);display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--t20-blue),var(--t20-violet));color:#06101d;font-weight:900;margin-bottom:28px
}

.process-card h3 {
margin:0 0 10px
}

.process-card p {
margin:0;color:var(--muted);line-height:1.65
}

.cta {
border-radius:38px;padding:56px;background:radial-gradient(circle at 20% 10%,rgba(97,230,255,.18),transparent 35%),radial-gradient(circle at 90% 80%,rgba(255,110,216,.12),transparent 35%),#0d1833
}

.case-label {
display:inline-flex;align-items:center;gap:8px;color:var(--t20-blue);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.11em
}

.case-label:before {
content:"";width:24px;height:2px;background:currentColor
}

@media (max-width:960px) {
.process-grid {
grid-template-columns:1fr 1fr
}

.hero h1 {
max-width:none
}
}

@media (max-width:720px) {
.section {
padding:78px 0
}

.container {
width:min(100% - 28px,1180px)
}

.hero {
padding-top:68px
}

.hero-grid {
gap:34px
}

.hero h1 {
font-size:clamp(2.7rem,14vw,4rem)
}

.hero-proof,
.process-grid {
grid-template-columns:1fr
}

.service-copy,
.cta {
padding:26px
}

.brand-copy small {
display:none
}
}

.product-showcase-section {
padding-top:42px
}

.product-case {
position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
  gap:46px;align-items:center;margin-bottom:42px;padding:42px;border-radius:38px;
  border:1px solid rgba(255,255,255,.105);
  background:
    radial-gradient(circle at 82% 12%,rgba(97,230,255,.11),transparent 30%),
    linear-gradient(145deg,rgba(13,24,51,.94),rgba(7,13,28,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055);
  overflow:hidden
}

.product-case-smartflip {
grid-template-columns:minmax(360px,.98fr) minmax(0,1.02fr);
  background:
    radial-gradient(circle at 15% 10%,rgba(255,255,255,.055),transparent 28%),
    radial-gradient(circle at 92% 82%,rgba(97,230,255,.08),transparent 25%),
    linear-gradient(145deg,rgba(15,24,43,.96),rgba(7,13,27,.98))
}

.product-case:before {
content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.025) 48%,transparent 75%);
  transform:translateX(-70%)
}

.product-case:hover:before {
animation:productSweep 1.1s ease
}

@keyframes productSweep {
to {
transform:translateX(70%)
}
}

.product-heading-line {
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap
}

.product-status {
display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;
  border:1px solid rgba(54,230,165,.24);background:rgba(54,230,165,.075);
  color:#aef8da;font-size:.72rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase
}

.product-status i {
width:7px;height:7px;border-radius:50%;background:#36e6a5;box-shadow:0 0 12px rgba(54,230,165,.9)
}

.product-status-light {
border-color:rgba(97,230,255,.22);background:rgba(97,230,255,.07);color:#c8f7ff
}

.product-status-light i {
background:#61e6ff;box-shadow:0 0 12px rgba(97,230,255,.9)
}

.product-case h2 {
font-size:clamp(2.8rem,5vw,5.2rem);line-height:.93;letter-spacing:-.055em;margin:22px 0 20px
}

.product-lead {
font-size:1.06rem;color:#bdc7da;line-height:1.78;max-width:64ch
}

.product-proof-row {
display:flex;gap:9px;flex-wrap:wrap;margin:24px 0
}

.product-proof-row span {
padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);font-size:.75rem;font-weight:800;color:#e9eef8
}

.product-module-grid {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:26px
}

.product-module-grid>div {
padding:16px;border-radius:17px;background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.07);transition:.3s transform,.3s border-color,.3s background
}

.product-module-grid>div:hover {
transform:translateY(-3px);border-color:rgba(97,230,255,.24);background:rgba(97,230,255,.045)
}

.product-module-grid strong {
display:block;font-size:.88rem;color:#fff;margin-bottom:6px
}

.product-module-grid span {
display:block;font-size:.75rem;line-height:1.45;color:#919db5
}

.product-kpi-strip {
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px
}

.product-kpi-strip>div {
padding:14px;border-top:1px solid rgba(255,255,255,.09)
}

.product-kpi-strip span {
display:block;color:#76839e;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:850
}

.product-kpi-strip strong {
display:block;margin-top:7px;font-size:.84rem;color:#eaf0fb
}

.real-product-preview {
position:relative;padding:12px;border-radius:31px;background:rgba(2,7,17,.7);
  border:1px solid rgba(255,255,255,.095);box-shadow:0 28px 70px rgba(0,0,0,.35)
}

.preview-toolbar {
height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#8290aa;font-size:.7rem
}

.preview-toolbar>div {
display:flex;gap:6px
}

.preview-dot {
display:block;width:7px;height:7px;border-radius:50%;background:#33405a
}

.preview-dot:nth-child(1) {
background:#ff6b7d
}

.preview-dot:nth-child(2) {
background:#ffd166
}

.preview-dot:nth-child(3) {
background:#36e6a5
}

.phone-stage {
position:relative;min-height:650px;display:grid;place-items:center;padding:22px;overflow:hidden;border-radius:23px;background:
  radial-gradient(circle at 50% 20%,rgba(97,230,255,.13),transparent 29%),
  radial-gradient(circle at 80% 76%,rgba(138,124,255,.13),transparent 30%),
  #061020
}

.real-product-preview-smartflip .phone-stage {
background:
  radial-gradient(circle at 48% 20%,rgba(255,255,255,.08),transparent 27%),
  radial-gradient(circle at 78% 80%,rgba(97,230,255,.09),transparent 28%),
  #0b1323
}

.phone-frame {
position:relative;width:min(76%,345px);height:600px;border-radius:48px;padding:10px;
  background:linear-gradient(145deg,#28344c,#070b12 38%,#34415a 70%,#070b12);
  box-shadow:0 35px 75px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.15),0 0 55px rgba(138,124,255,.14);
  overflow:hidden;transform:rotate(1.1deg)
}

.phone-frame:before {
content:"";position:absolute;z-index:3;top:11px;left:50%;width:86px;height:24px;border-radius:0 0 16px 16px;background:#05080e;transform:translateX(-50%)
}

.phone-frame img {
width:100%;height:100%;object-fit:cover;object-position:top;border-radius:39px;display:block
}

.phone-frame-light {
box-shadow:0 35px 75px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.16),0 0 55px rgba(97,230,255,.13);transform:rotate(-1.1deg)
}

.floating-feature {
position:absolute;z-index:4;min-width:150px;padding:13px 15px;border-radius:16px;
  background:rgba(9,18,39,.82);border:1px solid rgba(97,230,255,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.34);backdrop-filter:blur(15px)
}

.floating-feature strong {
display:block;font-size:.8rem;color:#fff
}

.floating-feature span {
display:block;margin-top:4px;font-size:.68rem;color:#8fa0bc
}

.floating-feature-one {
left:10px;bottom:120px
}

.floating-feature-two {
right:10px;top:90px
}

.light-feature {
background:rgba(18,29,50,.9)
}

.capture-note {
margin:12px 8px 4px;color:#6f7c96;font-size:.69rem;line-height:1.5
}

@media (max-width:1000px) {
.product-case,
.product-case-smartflip {
grid-template-columns:1fr
}

.product-case-smartflip .real-product-preview {
order:2
}

.phone-stage {
min-height:620px
}
}

@media (max-width:720px) {
.product-case {
padding:22px;border-radius:28px;gap:26px
}

.product-module-grid,
.product-kpi-strip {
grid-template-columns:1fr
}

.product-case h2 {
font-size:clamp(2.7rem,14vw,4rem)
}

.phone-stage {
min-height:570px;padding:12px
}

.phone-frame {
width:min(82%,310px);height:540px;border-radius:42px
}

.phone-frame img {
border-radius:34px
}

.floating-feature {
display:none
}
}

.product-story {
margin-top:26px;padding:20px 22px;border-radius:20px;
  background:linear-gradient(135deg,rgba(97,230,255,.055),rgba(138,124,255,.04));
  border:1px solid rgba(97,230,255,.11)
}

.product-story span {
display:block;color:#61e6ff;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px
}

.product-story p {
margin:0;color:#c2ccdd;line-height:1.68;font-size:.9rem
}

.tech-sheet {
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px
}

.tech-sheet>div {
padding:15px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07)
}

.tech-sheet span {
display:block;color:#78859e;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;font-weight:850
}

.tech-sheet strong {
display:block;margin-top:7px;color:#edf3ff;font-size:.78rem;line-height:1.35
}

.product-timeline {
display:flex;align-items:center;gap:0;margin-top:22px;overflow-x:auto;padding:4px 2px 10px
}

.product-timeline span {
position:relative;flex:1;min-width:120px;padding-top:25px;color:#72809b;font-size:.68rem;font-weight:800;text-align:center
}

.product-timeline span:before {
content:"";position:absolute;top:5px;left:50%;width:12px;height:12px;border-radius:50%;background:#27344d;border:2px solid #0d1831;transform:translateX(-50%);z-index:2
}

.product-timeline span:after {
content:"";position:absolute;top:10px;left:0;width:100%;height:2px;background:#27344d
}

.product-timeline span:first-child:after {
left:50%;width:50%
}

.product-timeline span:last-child:after {
width:50%
}

.product-timeline span.done:before {
background:#61e6ff;box-shadow:0 0 14px rgba(97,230,255,.6)
}

.product-timeline span.done:after {
background:linear-gradient(90deg,#61e6ff,#8a7cff)
}

.product-timeline span.active {
color:#fff
}

.product-timeline span.active:before {
width:16px;height:16px;top:3px;background:linear-gradient(135deg,#61e6ff,#8a7cff,#ff6ed8);box-shadow:0 0 18px rgba(138,124,255,.8)
}

.real-product-preview .phone-frame {
animation:phoneFloat 5.5s ease-in-out infinite
}

@keyframes phoneFloat {
0%,
100% {
translate:0 0
}

50% {
translate:0 -8px
}
}

.floating-feature {
animation:featureFloat 4.5s ease-in-out infinite
}

.floating-feature-two {
animation-delay:-2.2s
}

@keyframes featureFloat {
0%,
100% {
translate:0 0
}

50% {
translate:0 -6px
}
}

.concept-product {
display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:38px;align-items:center;margin:42px 0;padding:34px;border-radius:34px;
  background:linear-gradient(145deg,rgba(13,24,51,.92),rgba(7,13,28,.97));
  border:1px solid rgba(255,255,255,.09);box-shadow:0 26px 75px rgba(0,0,0,.3)
}

.concept-reverse .concept-visual {
order:2
}

.concept-visual {
border-radius:25px;overflow:hidden;background:#050a16;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.35)
}

.concept-visual img {
display:block;width:100%;height:auto;transition:.6s transform ease
}

.concept-product:hover .concept-visual img {
transform:scale(1.025)
}

.concept-copy h2 {
font-size:clamp(2.4rem,4vw,4.3rem);line-height:.95;letter-spacing:-.05em;margin:20px 0
}

.concept-badge {
padding:8px 11px;border-radius:999px;background:rgba(138,124,255,.08);border:1px solid rgba(138,124,255,.2);color:#c9c2ff;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em
}

@media (max-width:1000px) {
.tech-sheet {
grid-template-columns:repeat(2,1fr)
}

.concept-product {
grid-template-columns:1fr
}

.concept-reverse .concept-visual {
order:0
}
}

@media (max-width:720px) {
.tech-sheet {
grid-template-columns:1fr
}

.concept-product {
padding:22px;border-radius:27px
}

.product-timeline span {
min-width:105px
}
}

@media (prefers-reduced-motion:reduce) {
.real-product-preview .phone-frame,
.floating-feature {
animation:none!important
}
}

:root {
--bg:#030611;
  --bg2:#070c1d;
  --bg3:#0a1126;
  --panel:rgba(12,19,40,.66);
  --panel-strong:#0d1731;
  --text:#f8faff;
  --muted:#a7b2ca;
  --muted-2:#75829e;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.14);
  --cyan:#65e7ff;
  --violet:#9184ff;
  --pink:#ff75d8;
  --green:#42e8ad;
  --gold:#ffd783;
  --shadow-soft:0 24px 70px rgba(0,0,0,.28);
  --shadow:0 36px 110px rgba(0,0,0,.48);
  --shadow-glow:0 0 70px rgba(101,231,255,.09);
  --radius-sm:15px;
  --radius-md:22px;
  --radius:30px;
  --radius-xl:42px;
  --max:1240px;
  --space-section:clamp(88px,10vw,148px);
  --ease-premium:cubic-bezier(.2,.75,.2,1);
}

html {
background:#030611;
  scrollbar-color:#34415f #060a16;
}

body {
background:
    radial-gradient(circle at 12% -8%,rgba(101,231,255,.12),transparent 31%),
    radial-gradient(circle at 88% 2%,rgba(145,132,255,.14),transparent 31%),
    radial-gradient(circle at 52% 105%,rgba(255,117,216,.065),transparent 37%),
    linear-gradient(180deg,#030611 0%,#05091a 44%,#070c1d 100%);
  letter-spacing:-.009em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body::before {
opacity:.62;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 76%);
}

body::after {
content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.025);
  box-shadow:inset 0 0 120px rgba(0,0,0,.26);
}

::selection {
background:rgba(101,231,255,.25);color:#fff
}

.container {
width:min(calc(100% - clamp(30px,5vw,72px)),var(--max))
}

.ambient-stage {
position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden
}

.ambient-glow {
position:absolute;border-radius:50%;filter:blur(72px);opacity:.16;will-change:transform
}

.glow-a {
width:34vw;height:34vw;min-width:360px;min-height:360px;background:var(--cyan);top:-19vw;left:-8vw
}

.glow-b {
width:38vw;height:38vw;min-width:430px;min-height:430px;background:var(--violet);top:17vh;right:-23vw
}

.glow-c {
width:30vw;height:30vw;min-width:320px;min-height:320px;background:var(--pink);bottom:-22vw;left:35vw;opacity:.075
}

.ambient-noise {
position:absolute;inset:0;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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light
}

.scroll-progress {
position:fixed;top:0;left:0;right:0;height:2px;z-index:1000;
  background:rgba(255,255,255,.025);pointer-events:none
}

.scroll-progress span {
display:block;width:0;height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  box-shadow:0 0 18px rgba(101,231,255,.5)
}

.site-header {
top:10px;
  background:transparent;
  border:0;
  backdrop-filter:none;
  padding:0 0;
  transition:.35s transform var(--ease-premium),.35s opacity,.35s padding
}

.nav-shell {
min-height:70px;
  margin-top:10px;
  padding:8px 10px 8px 12px;
  border:1px solid rgba(255,255,255,.095);
  border-radius:22px;
  background:rgba(5,9,22,.67);
  backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
  transition:.35s background,.35s border-color,.35s box-shadow,.35s transform
}

.site-header.scrolled .nav-shell {
background:rgba(5,9,22,.86);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 20px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.055);
  transform:translateY(-4px)
}

.brand {
gap:13px
}

.brand span:last-child {
font-size:.95rem;line-height:1.08
}

.brand small {
font-size:.62rem;color:#8693ad;letter-spacing:.17em;margin-top:5px
}

.nav-links {
gap:3px
}

.nav-links a {
position:relative;padding:11px 14px;border-radius:13px;
  color:#9da9c1;font-size:.87rem;letter-spacing:-.01em;
  transition:.25s color,.25s background,.25s transform
}

.nav-links a::after {
content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform:scaleX(0);opacity:0;transition:.3s transform,.3s opacity
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
color:#fff;background:rgba(255,255,255,.045);transform:translateY(-1px)
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
transform:scaleX(1);opacity:.75
}

.hero {
padding:clamp(96px,11vw,154px) 0 clamp(96px,10vw,138px)
}

.hero-grid {
gap:clamp(50px,7vw,90px)
}

.hero h1 {
max-width:850px;
  font-size:clamp(3.65rem,7.7vw,7.35rem);
  line-height:.895;
  letter-spacing:-.073em;
  margin:24px 0 28px;
  text-wrap:balance
}

.hero p {
max-width:690px;
  color:#acb8cf;
  font-size:clamp(1.04rem,1.45vw,1.22rem);
  line-height:1.78;
  letter-spacing:-.012em
}

.eyebrow {
color:#77eaff;
  font-size:.72rem;
  letter-spacing:.19em;
  text-shadow:0 0 24px rgba(101,231,255,.22)
}

.section {
padding:var(--space-section) 0
}

.section-alt {
position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
  border-color:rgba(255,255,255,.055)
}

.section-alt::before {
content:"";position:absolute;left:50%;top:0;width:min(68%,900px);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(101,231,255,.2),rgba(145,132,255,.17),transparent)
}

.section-head {
margin-bottom:clamp(38px,5vw,62px);align-items:flex-end
}

.section h2,
.page-hero h1 {
font-size:clamp(2.65rem,5.6vw,5rem);
  line-height:.96;
  letter-spacing:-.062em;
  text-wrap:balance
}

.section-head p,
.page-hero p {
color:#9fabc2;font-size:1rem;line-height:1.78
}

.page-hero {
padding:clamp(110px,12vw,165px) 0 clamp(62px,7vw,94px)
}

.btn {
min-height:50px;
  padding:14px 20px;
  border-radius:15px;
  letter-spacing:-.015em;
  transition:.35s transform var(--ease-premium),.35s box-shadow,.35s border-color,.35s background
}

.btn:hover {
transform:translateY(-3px) scale(1.01)
}

.btn-primary {
position:relative;overflow:hidden;
  background:linear-gradient(120deg,#87edff,var(--cyan) 25%,var(--violet) 69%,#ff96e3);
  color:#07101c;
  box-shadow:0 15px 42px rgba(101,231,255,.15),inset 0 1px 0 rgba(255,255,255,.58)
}

.btn-primary::before {
content:"";position:absolute;inset:-2px;width:35%;transform:translateX(-180%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transition:.65s transform var(--ease-premium)
}

.btn-primary:hover::before {
transform:translateX(390%) skewX(-18deg)
}

.btn-secondary {
background:rgba(255,255,255,.032);
  border-color:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}

.btn-secondary:hover {
border-color:rgba(101,231,255,.24);background:rgba(101,231,255,.045)
}

.card,
.service-spotlight,
.process-card,
.panel,
.product-case,
.concept-product,
.cta {
border-color:rgba(255,255,255,.08)!important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.032);
}

.card,
.panel,
.process-card {
background:
    radial-gradient(circle at 100% 0%,rgba(145,132,255,.055),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.043),rgba(255,255,255,.016))
}

.card {
padding:30px;border-radius:27px
}

.card:hover,
.process-card:hover {
border-color:rgba(101,231,255,.22)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.32),0 0 55px rgba(101,231,255,.035),inset 0 1px 0 rgba(255,255,255,.05)
}

.icon {
width:54px;height:54px;border-radius:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}

.tags,
.product-proof-row {
gap:9px
}

.tag,
.product-proof-row span {
border-color:rgba(255,255,255,.085)!important;
  background:rgba(255,255,255,.026)!important;
  color:#bbc6d9!important
}

.product-case {
border-radius:42px!important;
  padding:clamp(28px,4vw,52px)!important;
  gap:clamp(38px,5vw,68px)!important;
  background:
    radial-gradient(circle at 88% 7%,rgba(101,231,255,.085),transparent 26%),
    radial-gradient(circle at 8% 92%,rgba(145,132,255,.07),transparent 28%),
    linear-gradient(145deg,rgba(13,24,51,.9),rgba(6,11,25,.97))!important
}

.product-case h2,
.concept-copy h2 {
letter-spacing:-.065em!important
}

.product-module-grid>div,
.tech-sheet>div {
border-color:rgba(255,255,255,.075)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.036),rgba(255,255,255,.014))!important
}

.product-module-grid>div:hover {
border-color:rgba(101,231,255,.2)!important;
  background:rgba(101,231,255,.035)!important
}

.product-story {
border-radius:22px!important;
  background:
    radial-gradient(circle at 95% 0%,rgba(145,132,255,.075),transparent 28%),
    linear-gradient(135deg,rgba(101,231,255,.042),rgba(145,132,255,.025))!important
}

.real-product-preview {
padding:13px!important;
  border-radius:34px!important;
  background:linear-gradient(180deg,rgba(11,20,43,.88),rgba(3,7,16,.93))!important;
  box-shadow:0 42px 110px rgba(0,0,0,.45),0 0 65px rgba(101,231,255,.045)!important
}

.phone-stage {
border-radius:25px!important
}

.phone-frame {
box-shadow:
    0 42px 95px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.17),
    0 0 75px rgba(145,132,255,.11)!important
}

.floating-feature {
border-color:rgba(101,231,255,.15)!important;
  background:rgba(7,15,33,.82)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.045)!important
}

.concept-product {
border-radius:39px!important;
  padding:clamp(26px,3.6vw,46px)!important;
  gap:clamp(34px,4.5vw,62px)!important;
  background:
    radial-gradient(circle at 4% 0%,rgba(101,231,255,.055),transparent 25%),
    linear-gradient(145deg,rgba(12,22,47,.9),rgba(5,10,23,.97))!important
}

.concept-visual {
border-radius:29px!important;box-shadow:0 36px 100px rgba(0,0,0,.42)!important
}

.process-grid {
gap:20px!important
}

.process-card {
padding:28px!important;border-radius:25px!important
}

.cta {
border-radius:38px!important;
  padding:clamp(34px,5vw,60px)!important;
  background:
    radial-gradient(circle at 92% 4%,rgba(66,232,173,.13),transparent 30%),
    radial-gradient(circle at 10% 100%,rgba(145,132,255,.1),transparent 32%),
    linear-gradient(135deg,rgba(101,231,255,.075),rgba(145,132,255,.065))!important
}

input,
textarea,
select {
border-radius:15px!important;
  border-color:rgba(255,255,255,.095)!important;
  background:rgba(255,255,255,.028)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:.25s border-color,.25s box-shadow,.25s background
}

input:focus,
textarea:focus,
select:focus {
outline:none;
  border-color:rgba(101,231,255,.42)!important;
  background:rgba(101,231,255,.025)!important;
  box-shadow:0 0 0 4px rgba(101,231,255,.07)
}

footer {
position:relative;
  border-top-color:rgba(255,255,255,.06)!important;
  background:linear-gradient(180deg,rgba(4,8,19,.55),rgba(2,4,11,.92))
}

footer::before {
content:"";position:absolute;left:50%;top:0;width:min(70%,960px);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(101,231,255,.18),rgba(145,132,255,.13),transparent)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline:3px solid rgba(101,231,255,.75);
  outline-offset:4px
}

@media (max-width:1050px) {
.hero-grid {
grid-template-columns:1fr;gap:66px
}

.hero-copy {
max-width:850px
}

.nav-links a {
padding-inline:11px
}
}

@media (max-width:820px) {
.site-header {
top:4px
}

.nav-shell {
margin-top:4px;border-radius:18px
}

.nav-links {
top:76px!important;
    left:15px!important;
    right:15px!important;
    border-radius:22px!important;
    background:rgba(5,9,22,.95)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    box-shadow:0 28px 80px rgba(0,0,0,.52)!important;
    backdrop-filter:blur(25px)
}

.nav-links a {
padding:14px 16px
}
}

@media (max-width:720px) {
:root {
--space-section:82px
}

.container {
width:min(calc(100% - 28px),var(--max))
}

.hero {
padding-top:94px
}

.hero h1 {
font-size:clamp(3.15rem,16vw,5.3rem)
}

.hero-actions .btn {
width:100%
}

.section-head {
align-items:flex-start
}

.section h2,
.page-hero h1 {
font-size:clamp(2.5rem,12vw,4rem)
}

.product-case,
.concept-product,
.cta {
border-radius:27px!important
}
}

@media (max-width:480px) {
.brand span:last-child {
font-size:.82rem
}

.brand small {
font-size:.54rem;letter-spacing:.12em
}

.nav-shell {
padding-left:9px
}
}

@media (prefers-reduced-motion:no-preference) {
.glow-a {
animation:ambientA 18s ease-in-out infinite alternate
}

.glow-b {
animation:ambientB 22s ease-in-out infinite alternate
}

.glow-c {
animation:ambientC 25s ease-in-out infinite alternate
}

@keyframes ambientA {
to {
transform:translate(8vw,6vh) scale(1.08)
}
}

@keyframes ambientB {
to {
transform:translate(-7vw,8vh) scale(.94)
}
}

@keyframes ambientC {
to {
transform:translate(3vw,-7vh) scale(1.09)
}
}

.reveal {
transition-duration:.85s!important;transition-timing-function:var(--ease-premium)!important
}
}

@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}

*,
*::before,
*::after {
animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important
}
}

.product-case,
.concept-product {
position:relative;overflow:hidden
}

.product-case::before,
.concept-product::before {
content:"";position:absolute;inset:-30%;
background:radial-gradient(circle at var(--panel-x,50%) var(--panel-y,50%),rgba(101,231,255,.12),transparent 22%);
pointer-events:none;transition:opacity .2s
}

.phone-frame,
.real-product-preview {
transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s
}

.phone-frame:hover,
.real-product-preview:hover {
transform:perspective(1200px) rotateX(3deg) rotateY(-4deg) translateY(-8px) scale(1.02);
box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 80px rgba(101,231,255,.08)
}

:root {
--t20-signal:linear-gradient(115deg,#65e7ff 0%,#9184ff 54%,#ff75d8 100%);
  --t20-ink:#050814;
}

.brand-signature-line {
position:fixed;
  left:0;top:0;bottom:0;
  width:3px;
  z-index:900;
  background:linear-gradient(180deg,transparent 4%,#65e7ff 23%,#9184ff 56%,#ff75d8 81%,transparent 97%);
  opacity:.38;
  box-shadow:0 0 24px rgba(101,231,255,.35);
  pointer-events:none;
}

.t20-primary::after {
content:"T20";
  position:absolute;
  right:10px;bottom:4px;
  font-size:.5rem;
  font-weight:950;
  letter-spacing:.14em;
  color:rgba(4,8,20,.42);
}

.studio-code h2 {
font-size:clamp(2.8rem,5.5vw,5rem);
  line-height:.96;
  letter-spacing:-.064em;
  margin:18px 0 24px;
  max-width:760px;
}

.studio-code p {
color:#a9b5cc;
  font-size:1.05rem;
  line-height:1.78;
  max-width:680px;
}

@keyframes t20Sweep {
0%,
65% {
transform:translateX(-120%)
}

85%,
100% {
transform:translateX(120%)
}
}

.studio-code {
position:relative;
  overflow:hidden;
}

.studio-code-grid {
display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
  gap:clamp(44px,7vw,86px);
  align-items:center;
}

.studio-code img {
width:100%;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 38px 110px rgba(0,0,0,.4),0 0 80px rgba(145,132,255,.055);
}

.studio-values {
display:grid;
  gap:12px;
  margin-top:30px;
}

.studio-values div {
padding:17px 18px;
  border-left:2px solid transparent;
  border-image:var(--t20-signal) 1;
  background:rgba(255,255,255,.022);
}

.studio-values b {
display:block;color:#fff;margin-bottom:6px
}

.studio-values span {
color:#8f9bb3;font-size:.91rem;line-height:1.55
}

.hero h1::after,
.page-hero h1::after {
content:"";
  display:block;
  width:72px;height:5px;
  margin-top:25px;
  border-radius:99px;
  background:var(--t20-signal);
  box-shadow:0 0 30px rgba(101,231,255,.25);
}

.card::after,
.product-case::after,
.concept-product::after,
.cta::after {
content:"";
  position:absolute;
  right:13px;top:13px;
  width:32px;height:32px;
  border-top:1px solid rgba(101,231,255,.26);
  border-right:1px solid rgba(145,132,255,.26);
  border-radius:0 11px 0 0;
  pointer-events:none;
}

.card {
position:relative;overflow:hidden
}

.product-case::marker {
content:""
}

.product-case .eyebrow,
.concept-product .eyebrow {
display:inline-flex;
  align-items:center;
  gap:9px;
}

.product-case .eyebrow::before,
.concept-product .eyebrow::before {
content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--t20-signal);
  box-shadow:0 0 16px rgba(101,231,255,.38);
}

@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
.studio-code img {
transition:.5s transform cubic-bezier(.2,.8,.2,1);
}

.studio-code img:hover {
transform:translateY(-8px) scale(1.012)
}
}

@media (max-width:980px) {
.studio-code-grid {
grid-template-columns:1fr
}

.studio-code img {
width:min(100%,760px);margin-inline:auto
}
}

@media (max-width:720px) {
.brand-signature-line {
width:2px;opacity:.26
}
}

.quality-grid,
.deliverable-grid {
display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.quality-grid article,
.deliverable-grid article {
position:relative;
  min-height:220px;
  padding:27px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%,rgba(101,231,255,.055),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.014));
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
}

.deliverable-grid article>span {
display:inline-grid;
  place-items:center;
  width:42px;height:42px;
  margin-bottom:38px;
  border-radius:14px;
  background:var(--t20-signal);
  color:#07101f;
  font-weight:950;
  font-size:.72rem;
}

.deliverable-grid h3 {
margin:0 0 12px;font-size:1.13rem;color:#fff
}

.deliverable-grid p,
.quality-grid p {
margin:0;color:#8f9cb5;line-height:1.65;font-size:.91rem
}

.quality-grid article {
min-height:185px
}

.quality-grid strong {
display:block;margin-bottom:15px;color:#fff;font-size:1.04rem
}

.case-study-section {
position:relative
}

.case-study {
position:relative;
  padding:clamp(30px,4vw,52px);
  margin-bottom:28px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 4%,rgba(101,231,255,.08),transparent 28%),
    linear-gradient(145deg,rgba(13,24,51,.85),rgba(5,10,23,.96));
  box-shadow:0 36px 110px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);
}

.case-agency {
background:
    radial-gradient(circle at 8% 5%,rgba(145,132,255,.095),transparent 28%),
    linear-gradient(145deg,rgba(13,24,51,.85),rgba(5,10,23,.96));
}

.case-study-head {
display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);
  gap:40px;
  align-items:start;
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.case-study h3 {
margin:15px 0 14px;
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:.96;
  letter-spacing:-.055em;
}

.case-study-head p {
max-width:700px;color:#a6b2c8;line-height:1.7
}

.case-status {
display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9px 15px;
  padding:20px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:rgba(255,255,255,.022);
}

.case-status span {
color:#71809b;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em
}

.case-status strong {
color:#e9eef8;font-size:.82rem;text-align:right
}

.case-study-grid {
display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin-top:28px;
}

.case-study-grid>div {
padding:21px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:19px;
  background:rgba(255,255,255,.021);
}

.case-study-grid span {
display:block;
  margin-bottom:12px;
  color:#78eaff;
  font-size:.69rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.case-study-grid p {
margin:0;color:#8e9bb4;font-size:.88rem;line-height:1.62
}

.status-badge {
display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.status-badge::before {
content:"";width:7px;height:7px;border-radius:50%
}

.status-real {
color:#b9ffe8;
  border:1px solid rgba(66,232,173,.24);
  background:rgba(66,232,173,.075);
}

.status-real::before {
background:#42e8ad;box-shadow:0 0 13px rgba(66,232,173,.6)
}

.status-concept {
color:#ddd8ff;
  border:1px solid rgba(145,132,255,.25);
  background:rgba(145,132,255,.08);
}

.status-concept::before {
background:#9184ff;box-shadow:0 0 13px rgba(145,132,255,.6)
}

.concept-legend {
display:grid;gap:13px
}

.concept-legend>div {
padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:rgba(255,255,255,.02)
}

.concept-legend p {
margin:12px 0 0;font-size:.86rem;line-height:1.55
}

.method-grid {
display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr);
  gap:clamp(45px,7vw,90px);
  align-items:center;
}

.method-copy h2 {
margin:18px 0 24px;
  font-size:clamp(2.7rem,5vw,4.8rem);
  line-height:.97;
  letter-spacing:-.06em;
}

.method-copy>p {
color:#a6b2c8;line-height:1.75;font-size:1.02rem
}

.method-visual {
padding:10px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:32px;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  box-shadow:0 38px 110px rgba(0,0,0,.4);
}

.method-visual img {
display:block;width:100%;border-radius:23px
}

.method-steps {
list-style:none;
  padding:0;margin:30px 0 0;
  counter-reset:t20method;
  display:grid;gap:10px;
}

.method-steps li {
display:grid;
  grid-template-columns:120px 1fr;
  gap:15px;
  padding:15px 17px;
  border-left:2px solid rgba(101,231,255,.35);
  background:rgba(255,255,255,.02);
}

.method-steps b {
color:#fff
}

.method-steps span {
color:#8f9bb4;font-size:.9rem;line-height:1.5
}

.delivery-framework {
position:relative
}

.deliverable-grid article>span {
margin-bottom:30px
}

@media (max-width:1050px) {
.deliverable-grid {
grid-template-columns:repeat(2,minmax(0,1fr))
}

.case-study-grid {
grid-template-columns:repeat(2,minmax(0,1fr))
}

.method-grid {
grid-template-columns:1fr
}
}

@media (max-width:760px) {
.quality-grid,
.deliverable-grid,
.case-study-grid {
grid-template-columns:1fr
}

.case-study-head {
grid-template-columns:1fr
}

.case-status {
grid-template-columns:1fr 1fr
}

.quality-grid article,
.deliverable-grid article {
min-height:0
}

.method-steps li {
grid-template-columns:1fr;gap:6px
}
}

body {
overflow-x:hidden
}

.t20-loader {
position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-content:center;
  gap:22px;
  background:
    radial-gradient(circle at 50% 45%,rgba(101,231,255,.08),transparent 28%),
    #050814;
  transition:opacity .7s ease,visibility .7s ease;
}

.t20-loader.is-hidden {
opacity:0;visibility:hidden;pointer-events:none
}

.t20-loader-mark {
display:flex;
  gap:8px;
  justify-content:center;
  font-size:clamp(3.4rem,8vw,6.8rem);
  font-weight:950;
  letter-spacing:-.08em;
}

.t20-loader-mark span {
display:inline-block;
  background:var(--t20-signal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:t20LoaderRise .7s cubic-bezier(.2,.8,.2,1) both;
}

.t20-loader-mark span:nth-child(2) {
animation-delay:.09s
}

.t20-loader-mark span:nth-child(3) {
animation-delay:.18s
}

.t20-loader-line {
width:min(280px,66vw);
  height:2px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.08);
}

.t20-loader-line i {
display:block;
  height:100%;width:100%;
  background:var(--t20-signal);
  transform-origin:left;
  animation:t20LoadLine 1.1s cubic-bezier(.2,.8,.2,1) both;
}

.t20-loader small {
text-align:center;
  color:#687792;
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

@keyframes t20LoaderRise {
from {
opacity:0;transform:translateY(35px) rotateX(70deg);filter:blur(10px)
}

to {
opacity:1;transform:none;filter:none
}
}

@keyframes t20LoadLine {
from {
transform:scaleX(0)
}

to {
transform:scaleX(1)
}
}

.t20-page-wipe {
position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  background:linear-gradient(115deg,#07101f,#101a3a 48%,#07101f);
  transform:translateY(100%);
}

.t20-page-wipe.is-active {
animation:t20PageWipe .8s cubic-bezier(.76,0,.24,1) both;
}

@keyframes t20PageWipe {
0% {
transform:translateY(100%)
}

45%,
55% {
transform:translateY(0)
}

100% {
transform:translateY(-100%)
}
}

.t20-cursor-glow {
position:fixed;
  left:0;top:0;
  width:420px;height:420px;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(101,231,255,.08),rgba(145,132,255,.035) 40%,transparent 68%);
  transform:translate3d(-50%,-50%,0);
  filter:blur(12px);
  opacity:0;
  transition:opacity .25s ease;
}

body:hover .t20-cursor-glow {
opacity:1
}

.hero {
position:relative;
  isolation:isolate;
  min-height:min(900px,92vh);
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero::before {
content:"";
  position:absolute;
  inset:-20%;
  z-index:-2;
  background:
    radial-gradient(circle at 26% 35%,rgba(101,231,255,.12),transparent 28%),
    radial-gradient(circle at 72% 38%,rgba(145,132,255,.14),transparent 31%),
    radial-gradient(circle at 52% 80%,rgba(255,117,216,.07),transparent 26%);
  animation:t20AmbientShift 14s ease-in-out infinite alternate;
}

@keyframes t20AmbientShift {
from {
transform:translate3d(-1.5%,0,0) scale(1)
}

to {
transform:translate3d(1.5%,-1%,0) scale(1.05)
}
}

.t20-hero-visual {
position:absolute;
  right:max(-8vw,-110px);
  top:50%;
  width:min(60vw,880px);
  transform:translateY(-50%);
  z-index:-1;
  pointer-events:none;
  opacity:.94;
}

.orbit-shell {
position:relative;
  transform-style:preserve-3d;
  animation:t20OrbitFloat 8s ease-in-out infinite;
}

.orbit-shell img {
display:block;
  width:100%;
  filter:drop-shadow(0 70px 90px rgba(0,0,0,.5));
}

.orbit-label {
position:absolute;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#dbe7fa;
  background:rgba(8,15,34,.72);
  backdrop-filter:blur(14px);
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.16em;
}

.orbit-label-a {
left:9%;top:44%
}

.orbit-label-b {
right:7%;top:34%
}

.orbit-label-c {
right:19%;bottom:17%
}

@keyframes t20OrbitFloat {
0%,
100% {
transform:translateY(-4px) rotateX(1deg) rotateY(-1deg)
}

50% {
transform:translateY(14px) rotateX(-1deg) rotateY(2deg)
}
}

.hero .container {
position:relative;z-index:2
}

.hero h1,
.page-hero h1 {
text-wrap:balance;
  text-shadow:0 18px 60px rgba(0,0,0,.36);
}

.hero p {
max-width:690px
}

@keyframes t20PanelSweep {
0%,
65% {
transform:translateX(-100%)
}

90%,
100% {
transform:translateX(100%)
}
}

@keyframes t20Scan {
to {
transform:translateY(800%)
}
}

.t20-spotlight {
--mx:50%;
  --my:50%;
  position:relative;
  transform-style:preserve-3d;
}

.t20-spotlight::before {
content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(101,231,255,.105),transparent 48%);
  opacity:0;
  transition:opacity .25s ease;
}

.t20-spotlight:hover::before {
opacity:1
}

.t20-spotlight>* {
position:relative;z-index:1
}

@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
.t20-spotlight {
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.t20-spotlight:hover {
border-color:rgba(101,231,255,.16);
    box-shadow:0 32px 90px rgba(0,0,0,.35),0 0 60px rgba(101,231,255,.035);
}
}

.section {
content-visibility:auto;
  contain-intrinsic-size:800px;
}

@media (max-width:1100px) {
.t20-hero-visual {
right:-20vw;width:74vw;opacity:.68
}
}

@media (max-width:760px) {
.hero {
min-height:auto;padding-top:140px;padding-bottom:100px
}

.t20-hero-visual {
right:-42vw;top:52%;width:110vw;opacity:.35
}

.orbit-label {
display:none
}

.t20-cursor-glow {
display:none
}
}

@media (prefers-reduced-motion:reduce) {
.t20-loader {
display:none
}

.orbit-shell,
.hero::before {
animation:none
}

.t20-page-wipe {
display:none
}
}

.skip-link {
position:fixed;
  left:16px;
  top:14px;
  z-index:100000;
  padding:11px 15px;
  border-radius:12px;
  background:#fff;
  color:#07101f;
  font-weight:800;
  transform:translateY(-160%);
  transition:transform .2s ease;
}

.skip-link:focus {
transform:translateY(0)
}

.product-filter {
display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}

.product-filter-btn {
appearance:none;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  padding:11px 16px;
  color:#93a1ba;
  background:rgba(255,255,255,.02);
  font:inherit;
  font-size:.82rem;
  font-weight:750;
  cursor:pointer;
  transition:.25s ease;
}

.product-filter-btn:hover,
.product-filter-btn:focus-visible {
color:#fff;
  border-color:rgba(101,231,255,.25);
}

.product-filter-btn.is-active {
color:#07101f;
  border-color:transparent;
  background:var(--t20-signal);
  box-shadow:0 12px 35px rgba(101,231,255,.1);
}

.product-explorer {
display:grid;
  grid-template-columns:minmax(270px,.38fr) minmax(0,1fr);
  gap:20px;
}

.product-selector {
display:grid;
  gap:12px;
  align-content:start;
}

.product-selector-card {
appearance:none;
  width:100%;
  text-align:left;
  padding:20px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:21px;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  color:#fff;
  cursor:pointer;
  transition:.3s transform,.3s border-color,.3s background,.3s opacity;
}

.product-selector-card:hover,
.product-selector-card:focus-visible {
transform:translateX(5px);
  border-color:rgba(101,231,255,.2);
}

.product-selector-card.is-active {
border-color:rgba(101,231,255,.28);
  background:
    radial-gradient(circle at 100% 0%,rgba(101,231,255,.09),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.product-selector-card.is-filtered-out {
display:none
}

.product-selector-card strong {
display:block;
  margin:15px 0 7px;
  font-size:1.02rem;
}

.product-selector-card small {
color:#7f8da6;font-size:.78rem
}

.product-detail-panel {
position:relative;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr);
  gap:34px;
  align-items:center;
  min-height:580px;
  padding:clamp(30px,4vw,52px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 5%,rgba(101,231,255,.1),transparent 30%),
    linear-gradient(145deg,rgba(13,25,53,.9),rgba(5,9,21,.98));
  box-shadow:0 45px 130px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
}

.product-detail-panel::after {
content:"";
  position:absolute;
  right:18px;top:18px;
  width:45px;height:45px;
  border-top:1px solid rgba(101,231,255,.32);
  border-right:1px solid rgba(145,132,255,.32);
  border-radius:0 14px 0 0;
}

.product-detail-copy {
position:relative;z-index:2
}

.product-detail-top {
display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.maturity-label {
color:#7786a1;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.product-detail-copy h3 {
margin:18px 0 16px;
  font-size:clamp(2.4rem,4.4vw,4.8rem);
  line-height:.94;
  letter-spacing:-.06em;
}

.product-detail-copy>p {
color:#a7b4ca;
  line-height:1.75;
  font-size:1rem;
}

.product-facts {
display:grid;
  gap:9px;
  margin:26px 0;
}

.product-facts>div {
display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.product-facts dt {
color:#6f7f9b;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.product-facts dd {
margin:0;
  color:#edf3fd;
  font-size:.88rem;
}

.module-list {
display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.module-list span {
padding:9px 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:11px;
  color:#aebad0;
  background:rgba(255,255,255,.022);
  font-size:.75rem;
}

.product-detail-visual {
position:relative;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 36px 100px rgba(0,0,0,.43);
}

.product-detail-visual img {
display:block;width:100%
}

.detail-signal {
position:absolute;
  right:20px;bottom:20px;
  display:flex;
  gap:7px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(5,9,21,.72);
  backdrop-filter:blur(12px);
}

.detail-signal span {
width:7px;height:7px;border-radius:50%;
  background:#65e7ff;
  box-shadow:0 0 12px rgba(101,231,255,.55);
  animation:t20Pulse 1.8s ease-in-out infinite;
}

.detail-signal span:nth-child(2) {
animation-delay:.22s;background:#9184ff
}

.detail-signal span:nth-child(3) {
animation-delay:.44s;background:#ff75d8
}

@keyframes t20Pulse {
50% {
opacity:.25;transform:scale(.72)
}
}

.version-timeline {
position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.version-timeline::before {
content:"";
  position:absolute;
  left:5%;right:5%;top:29px;
  height:1px;
  background:linear-gradient(90deg,transparent,#65e7ff,#9184ff,#ff75d8,transparent);
  opacity:.35;
}

.version-timeline article {
position:relative;
  padding:64px 23px 25px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:23px;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
}

.version-timeline article::before {
content:"";
  position:absolute;
  left:22px;top:22px;
  width:14px;height:14px;border-radius:50%;
  background:var(--t20-signal);
  box-shadow:0 0 18px rgba(101,231,255,.45);
}

.version-timeline span {
color:#7786a1;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.version-timeline h3 {
margin:13px 0 11px;color:#fff;font-size:1.03rem
}

.version-timeline p {
margin:0;color:#8997b0;line-height:1.62;font-size:.87rem
}

@media (max-width:1050px) {
.product-explorer {
grid-template-columns:1fr
}

.product-selector {
grid-template-columns:repeat(2,minmax(0,1fr))
}

.product-detail-panel {
grid-template-columns:1fr
}

.version-timeline {
grid-template-columns:repeat(2,minmax(0,1fr))
}

.version-timeline::before {
display:none
}
}

@media (max-width:720px) {
.product-selector,
.version-timeline {
grid-template-columns:1fr
}

.product-detail-panel {
padding:26px;border-radius:25px
}

.product-facts>div {
grid-template-columns:1fr;gap:5px
}
}

@media (prefers-reduced-motion:reduce) {
.detail-signal span {
animation:none
}
}

.preview-grid {
display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:22px
}

.ui-preview-card {
overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:28px;
  background:#07101f;box-shadow:0 40px 110px rgba(0,0,0,.34)
}

.ui-window-bar {
display:flex;align-items:center;gap:7px;padding:14px 17px;border-bottom:1px solid rgba(255,255,255,.07);background:#0b1425
}

.ui-window-bar i {
width:8px;height:8px;border-radius:50%;background:#48556b
}

.ui-window-bar i:nth-child(2) {
background:#65738b
}

.ui-window-bar i:nth-child(3) {
background:#65e7ff
}

.ui-window-bar span {
margin-left:9px;color:#7e8da7;font-size:.67rem
}

.ui-dashboard {
display:grid;grid-template-columns:170px 1fr;min-height:460px
}

.ui-dashboard aside {
display:flex;flex-direction:column;gap:16px;padding:25px;background:#0b162b
}

.ui-dashboard aside b {
margin-bottom:25px;background:var(--t20-signal);-webkit-background-clip:text;background-clip:text;color:transparent
}

.ui-dashboard aside span {
color:#75839b;font-size:.68rem
}

.ui-dashboard main,
.ui-dashboard .ui-main {
padding:29px
}

.ui-title strong {
display:block;font-size:1.25rem
}

.ui-title small {
color:#718099
}

.ui-kpis {
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0
}

.ui-kpis div {
padding:17px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:#0e1b33
}

.ui-kpis span {
display:block;color:#74839d;font-size:.59rem
}

.ui-kpis strong {
display:block;margin-top:8px;font-size:1.25rem
}

.ui-chart {
position:relative;height:230px;border-radius:19px;background:linear-gradient(180deg,#0d1930,#0a1428);overflow:hidden
}

.ui-chart::before {
content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px
}

.ui-chart i {
position:absolute;left:8%;right:8%;top:20%;bottom:20%;border-bottom:7px solid #65e7ff;border-radius:50%;transform:skewY(-8deg);filter:drop-shadow(0 0 14px rgba(101,231,255,.4))
}

.ui-preview-phone {
display:grid;place-items:center;padding:35px
}

.mini-phone {
width:210px;padding:8px;border-radius:36px;background:linear-gradient(145deg,#293142,#06080c);box-shadow:0 35px 80px rgba(0,0,0,.5)
}

.mini-phone-screen {
min-height:400px;padding:48px 19px 20px;border-radius:29px;background:radial-gradient(circle at 70% 5%,rgba(145,132,255,.14),transparent 30%),#091224
}

.mini-brand {
color:#65e7ff;font-size:.58rem;letter-spacing:.15em
}

.mini-phone-screen>strong {
display:block;margin-top:55px;font-size:1.15rem
}

.mini-score {
display:grid;place-items:center;width:110px;height:110px;margin:30px auto;border:6px solid #65e7ff;border-right-color:#9184ff;border-radius:50%;font-size:2.3rem;font-weight:900
}

.mini-line {
height:5px;margin-bottom:27px;border-radius:5px;background:linear-gradient(90deg,#65e7ff 84%,#18243a 84%)
}

.mini-phone-screen button {
width:100%;padding:13px;border:0;border-radius:13px;background:var(--t20-signal);font-weight:850;color:#07101f
}

@media (max-width:1050px) {
.preview-grid {
grid-template-columns:1fr
}
}

@media (max-width:720px) {
.ui-dashboard {
grid-template-columns:1fr
}

.ui-dashboard aside {
display:none
}

.ui-kpis {
grid-template-columns:1fr
}
}

@keyframes float {
50% {
transform:translateY(-18px) scale(1.04)
}
}

[data-magnetic] {
will-change:transform;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease
}

@keyframes signaturePulse {
0%,
100% {
opacity:.38;filter:saturate(.7)
}

50% {
opacity:1;filter:saturate(1.25)
}
}

@keyframes coreBreath {
0%,
100% {
transform:translate(-50%,-50%) rotate(45deg) scale(.96)
}

50% {
transform:translate(-50%,-50%) rotate(45deg) scale(1.05)
}
}

@keyframes orbitSpin {
to {
transform:translate(-50%,-50%) rotate(360deg)
}
}

@keyframes statusBlink {
50% {
opacity:.35;transform:scale(.78)
}
}

@media (prefers-reduced-motion:reduce) {
[data-magnetic] {
transition:none!important;transform:none!important
}
}

.project-proof-grid {
display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  padding:40px;border:1px solid rgba(255,255,255,.08);border-radius:30px;
  background:linear-gradient(145deg,#08111f,#050913)
}

.project-proof-grid h2 {
font-size:clamp(2rem,4vw,4rem);line-height:.98
}

.project-proof-points {
display:grid;grid-template-columns:repeat(2,1fr);gap:12px
}

.project-proof-points span {
padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:15px;
  color:#a8b5c8;background:rgba(255,255,255,.025)
}

@media (max-width:900px) {
.project-proof-grid {
grid-template-columns:1fr
}
}

@media (max-width:620px) {
.project-proof-points {
grid-template-columns:1fr
}
}

.cmd-trigger {
display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:9px 11px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035);color:#aab7ca;font:inherit;cursor:pointer
}

.cmd-trigger kbd,
.cmd-search kbd {
padding:3px 6px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(0,0,0,.2);color:#dbe4ef;font:inherit;font-size:.65rem
}

.cmd[hidden] {
display:none
}

.cmd {
position:fixed;inset:0;z-index:9999;display:grid;place-items:start center;padding:11vh 18px
}

.cmd-bg {
position:absolute;inset:0;border:0;background:rgba(1,5,12,.76);backdrop-filter:blur(18px)
}

.cmd-box {
position:relative;width:min(680px,100%);overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(7,14,27,.97);box-shadow:0 50px 140px rgba(0,0,0,.65);animation:cmdIn .2s ease
}

.cmd-search {
display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:17px;border-bottom:1px solid rgba(255,255,255,.08)
}

.cmd-search span {
color:#65e7ff;font-size:1.25rem
}

.cmd-search input {
border:0;outline:0;background:transparent;color:white;font:inherit
}

.cmd-list {
padding:9px;max-height:56vh;overflow:auto
}

.cmd-list a,
.cmd-list button {
width:100%;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:12px;border:0;border-radius:14px;background:transparent;color:inherit;text-align:left;text-decoration:none;font:inherit;cursor:pointer
}

.cmd-list .active,
.cmd-list a:hover,
.cmd-list button:hover {
background:linear-gradient(90deg,rgba(101,231,255,.11),rgba(145,132,255,.07));box-shadow:inset 0 0 0 1px rgba(101,231,255,.12)
}

.cmd-list b {
display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.04);color:#75eaff
}

.cmd-list strong,
.cmd-list small {
display:block
}

.cmd-list small {
margin-top:3px;color:#7f8da3
}

.cmd-empty {
padding:24px;text-align:center;color:#8290a5
}

.cmd-box footer {
display:flex;justify-content:flex-end;gap:18px;padding:11px 17px;border-top:1px solid rgba(255,255,255,.07);color:#718097;font-size:.68rem
}

.t20-alt-ambience body {
background:radial-gradient(circle at 15% 10%,rgba(255,117,216,.09),transparent 28%),radial-gradient(circle at 85% 15%,rgba(145,132,255,.10),transparent 30%),#060812
}

@keyframes cmdIn {
from {
opacity:0;transform:translateY(-12px) scale(.975)
}

to {
opacity:1;transform:none
}
}

@media (max-width:700px) {
.cmd-trigger span {
display:none
}
}

html {
scroll-behavior:smooth
}

body {
text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased
}

::selection {
background:rgba(101,231,255,.24);color:#fff
}

:focus-visible {
outline:2px solid #65e7ff!important;outline-offset:4px!important
}

.t20-status-rail {
position:fixed;top:0;left:0;right:0;z-index:10000;height:2px;background:rgba(255,255,255,.035);pointer-events:none
}

.t20-status-progress {
display:block;width:0;height:100%;background:linear-gradient(90deg,#65e7ff,#9184ff,#ff75d8);box-shadow:0 0 18px rgba(101,231,255,.55)
}

.btn:active,
button:active,
[role="button"]:active {
transform:translateY(1px) scale(.985)
}

section {
scroll-margin-top:110px
}

@keyframes fpulse {
50% {
opacity:.42;transform:scale(.78)
}
}

header,
.site-header,
nav {
position:relative;
  z-index:30;
}

.site-header,
header.site-header {
min-height:auto;
}

.site-header .container,
header .container {
padding-top:14px;
  padding-bottom:14px;
}

nav {
gap:12px;
}

nav a {
position:relative;
}

nav a::after {
content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:5px;
  height:1px;
  background:linear-gradient(90deg,transparent,#65e7ff,transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}

nav a:hover::after,
nav a:focus-visible::after,
nav a[aria-current="page"]::after {
transform:scaleX(1);
}

.hero,
.hero-section,
.hero-refined {
position:relative;
  isolation:isolate;
  min-height:calc(100svh - 92px);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:clamp(54px,8vw,100px);
  padding-bottom:clamp(64px,9vw,120px);
}

.hero .container,
.hero-section .container,
.hero-refined .container {
position:relative;
  z-index:3;
}

.hero-grid {
position:absolute;
  inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 45%,#000 12%,transparent 68%);
  opacity:.75;
  transform:perspective(900px) rotateX(68deg) translateY(18%);
  transform-origin:center bottom;
}

.hero h1,
.hero-title {
max-width:1100px;
  text-wrap:balance;
  letter-spacing:-.065em;
  line-height:.9;
  text-shadow:0 12px 60px rgba(101,231,255,.07);
}

.hero .eyebrow,
.status-badge {
border-color:rgba(124,242,180,.18);
  background:linear-gradient(180deg,rgba(124,242,180,.10),rgba(124,242,180,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 32px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
}

.hero .eyebrow::before,
.status-badge::before {
box-shadow:0 0 12px currentColor;
}

.founder-line-text {
display:inline-flex;
  align-items:center;
  gap:8px;
  color:#8795aa;
  font-size:.84rem;
  letter-spacing:.02em;
}

.founder-line-dot {
display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#65e7ff;
  box-shadow:0 0 12px rgba(101,231,255,.8);
}

.founder-line-text strong {
color:#cbd5e3;
  font-weight:600;
}

@keyframes heroFloat {
from {
transform:translate3d(0,0,0) scale(1)
}

to {
transform:translate3d(34px,-22px,0) scale(1.08)
}
}

@media (max-width:900px) {
.hero,
.hero-section,
.hero-refined {
min-height:auto;
    padding-top:54px;
    padding-bottom:78px;
}

.hero-grid {
opacity:.45
}
}

@media (max-width:700px) {
.site-header .container,
header .container {
padding-top:10px;
    padding-bottom:10px;
}

.hero,
.hero-section,
.hero-refined {
padding-top:38px;
    padding-bottom:64px;
}

.hero h1,
.hero-title {
letter-spacing:-.05em;
    line-height:.94;
}
}

.site-header,
header {
margin-bottom:0!important;
}

.site-header .container,
header .container {
min-height:auto!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}

button[aria-label*="Menu"] {
min-height:50px!important;
  padding:10px 16px!important;
  border-radius:18px!important;
}

.page-hero {
min-height:auto!important;
  padding-bottom:clamp(42px,6vw,72px)!important;
}

main > section + section {
margin-top:clamp(34px,5vw,68px);
}

.page-identity {
margin-top:clamp(-10px,1vw,10px)!important;
  margin-bottom:clamp(26px,4vw,54px)!important;
}

.identity-shell {
position:relative;
  min-height:360px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:34px;
  background:
    radial-gradient(circle at 75% 15%,rgba(101,231,255,.09),transparent 26%),
    radial-gradient(circle at 15% 90%,rgba(145,132,255,.09),transparent 28%),
    linear-gradient(145deg,#08111f,#050913);
  box-shadow:0 40px 100px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.03);
}

.services-system {
min-height:420px;
}

.system-core {
position:absolute;
  left:50%;top:50%;
  display:grid;
  place-items:center;
  width:120px;height:120px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:linear-gradient(145deg,#101e35,#08111f);
  border:1px solid rgba(101,231,255,.24);
  box-shadow:0 0 70px rgba(101,231,255,.14);
}

.system-core span {
font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,#65e7ff,#9184ff,#ff75d8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.system-core i {
position:absolute;inset:-18px;border-radius:50%;
  border:1px dashed rgba(101,231,255,.18);
  animation:spinSlow 14s linear infinite;
}

.system-node {
position:absolute;
  width:170px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(14px);
}

.system-node b {
display:block;color:#65e7ff;font-size:.68rem;letter-spacing:.15em
}

.system-node span {
display:block;margin-top:7px;font-weight:700
}

.system-node.n1 {
left:7%;top:12%
}

.system-node.n2 {
right:7%;top:12%
}

.system-node.n3 {
left:7%;bottom:12%
}

.system-node.n4 {
right:7%;bottom:12%
}

.services-system svg {
position:absolute;inset:0;width:100%;height:100%
}

.services-system path {
fill:none;stroke:rgba(101,231,255,.18);stroke-width:2;stroke-dasharray:7 9
}

.project-orbit {
min-height:460px;
}

.project-orbit-core {
position:absolute;left:50%;top:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:170px;height:170px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#14243d,#07101f 65%);
  border:1px solid rgba(145,132,255,.24);
  box-shadow:0 0 90px rgba(145,132,255,.14);
}

.project-orbit-core b {
font-size:2.2rem
}

.project-orbit-core small {
color:#7f8da2;letter-spacing:.14em
}

.project-tile {
position:absolute;
  width:min(240px,30vw);
  min-height:120px;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:0 25px 60px rgba(0,0,0,.25);
}

.project-tile span {
color:#ff75d8;font-size:.65rem;letter-spacing:.14em
}

.project-tile strong,
.project-tile small {
display:block
}

.project-tile strong {
margin-top:10px
}

.project-tile small {
margin-top:6px;color:#7e8ca1
}

.project-tile.t1 {
left:6%;top:10%;transform:rotate(-3deg)
}

.project-tile.t2 {
right:6%;top:10%;transform:rotate(3deg)
}

.project-tile.t3 {
left:6%;bottom:10%;transform:rotate(2deg)
}

.project-tile.t4 {
right:6%;bottom:10%;transform:rotate(-2deg)
}

.contact-flow {
min-height:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:18px;
  align-items:center;
  padding:34px;
}

.contact-flow article {
min-height:180px;
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.contact-flow b {
color:#65e7ff;font-size:.7rem;letter-spacing:.14em
}

.contact-flow strong,
.contact-flow small {
display:block
}

.contact-flow strong {
margin-top:24px;font-size:1.25rem
}

.contact-flow small {
margin-top:8px;color:#7f8da2;line-height:1.5
}

.flow-line {
width:54px;height:2px;
  background:linear-gradient(90deg,#65e7ff,#9184ff);
  box-shadow:0 0 14px rgba(101,231,255,.35);
}

.about-timeline {
min-height:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding:34px;
}

.timeline-line {
position:absolute;
  left:9%;right:9%;top:67px;
  height:1px;
  background:linear-gradient(90deg,transparent,#65e7ff,#9184ff,#ff75d8,transparent);
}

.about-timeline article {
position:relative;
  padding:56px 20px 20px;
  min-height:190px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}

.about-timeline article::before {
content:"";
  position:absolute;
  top:29px;left:20px;
  width:10px;height:10px;border-radius:50%;
  background:#65e7ff;
  box-shadow:0 0 18px rgba(101,231,255,.7);
}

.about-timeline span {
color:#7e8ca1;font-size:.68rem
}

.about-timeline strong,
.about-timeline small {
display:block
}

.about-timeline strong {
margin-top:10px;font-size:1.2rem
}

.about-timeline small {
margin-top:8px;color:#7d8ba0;line-height:1.5
}

.card,
.project-card,
article[class*="card"] {
transform-style:preserve-3d;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease!important;
}

.card:hover,
.project-card:hover,
article[class*="card"]:hover {
transform:translateY(-8px) scale(1.01);
  border-color:rgba(101,231,255,.18)!important;
  box-shadow:
    0 35px 80px rgba(0,0,0,.32),
    0 0 60px rgba(101,231,255,.055)!important;
}

@keyframes spinSlow {
to {
transform:rotate(360deg)
}
}

@media (max-width:900px) {
.contact-flow {
grid-template-columns:1fr
}

.flow-line {
width:2px;height:42px;justify-self:center
}

.about-timeline {
grid-template-columns:1fr 1fr
}

.timeline-line {
display:none
}

.project-orbit {
min-height:620px
}

.project-tile {
width:42%
}
}

@media (max-width:700px) {
.identity-shell {
border-radius:26px
}

.services-system {
min-height:560px
}

.system-core {
width:100px;height:100px
}

.system-node {
width:145px;padding:15px
}

.system-node.n1 {
left:5%;top:8%
}

.system-node.n2 {
right:5%;top:8%
}

.system-node.n3 {
left:5%;bottom:8%
}

.system-node.n4 {
right:5%;bottom:8%
}

.project-orbit {
min-height:760px
}

.project-orbit-core {
width:135px;height:135px
}

.project-tile {
width:78%;left:11%!important;right:auto!important;transform:none!important
}

.project-tile.t1 {
top:6%
}

.project-tile.t2 {
top:27%
}

.project-tile.t3 {
bottom:27%
}

.project-tile.t4 {
bottom:6%
}

.about-timeline {
grid-template-columns:1fr
}
}

@media (prefers-reduced-motion:reduce) {
.system-core i {
animation:none!important
}
}

html,
body {
min-height:100%
}

body {
display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

main {
position:relative;
  z-index:1;
  flex:1 0 auto;
  width:100%;
}

main>* {
position:relative;
}

.site-footer-v19 {
position:relative!important;
  inset:auto!important;
  z-index:2!important;
  flex:0 0 auto;
  width:100%;
  margin:clamp(72px,10vw,140px) 0 0!important;
  padding:clamp(48px,7vw,80px) 0 28px!important;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 10% 0,rgba(101,231,255,.07),transparent 28%),
    radial-gradient(circle at 88% 15%,rgba(145,132,255,.08),transparent 30%),
    #050913;
}

.footer-v19-main {
display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);
  gap:clamp(36px,8vw,110px);
  align-items:start;
}

.footer-v19-brand {
display:flex;
  gap:18px;
  align-items:flex-start;
}

.footer-v19-mark {
display:grid;
  place-items:center;
  flex:0 0 58px;
  width:58px;
  height:58px;
  border:1px solid rgba(101,231,255,.28);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    #0a1425;
  color:#fff;
  font-size:1.35rem;
  font-weight:900;
  box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 30px rgba(101,231,255,.06);
}

.footer-v19-brand strong {
display:block;
  margin:2px 0 10px;
  color:#f3f6fb;
  font-size:clamp(1.35rem,2.5vw,2rem);
  letter-spacing:-.035em;
}

.footer-v19-brand p {
max-width:520px;
  margin:0;
  color:#8492a7;
  line-height:1.65;
}

.footer-v19-nav {
display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
}

.footer-v19-nav div {
display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-v19-nav h2 {
margin:0 0 8px;
  color:#d8e1ec;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.footer-v19-nav a,
.footer-v19-nav span {
color:#8290a4;
  text-decoration:none;
  line-height:1.5;
}

.footer-v19-nav a:hover,
.footer-v19-nav a:focus-visible {
color:#65e7ff;
}

.footer-v19-proof {
margin-top:40px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.065);
}

.footer-v19-proof p {
max-width:850px;
  margin:0;
  color:#708096;
  line-height:1.65;
  font-size:.82rem;
}

.footer-v19-proof strong {
color:#aab7ca
}

.footer-v19-bottom {
display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:22px;
  color:#5f6e83;
  font-size:.74rem;
}

.page-transition-v19 {
position:fixed;
  inset:0;
  z-index:20000;
  pointer-events:none;
  background:#050913;
  transform:translateY(100%);
  transition:transform .48s cubic-bezier(.7,0,.2,1);
}

.page-transition-v19 span {
position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#65e7ff,#9184ff,#ff75d8);
}

html.is-leaving .page-transition-v19 {
transform:translateY(0);
}

html.is-entering .page-transition-v19 {
animation:pageEnterV19 .62s cubic-bezier(.7,0,.2,1) both;
}

main>section {
margin-top:0;
}

main>section+section {
margin-top:clamp(72px,10vw,150px);
}

.page-identity {
margin-top:clamp(30px,5vw,70px)!important;
}

.identity-shell {
box-shadow:0 40px 100px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.03)!important;
}

@keyframes signatureSpin {
to {
transform:rotate(360deg)
}
}

@keyframes pageEnterV19 {
0% {
transform:translateY(0)
}

100% {
transform:translateY(-100%)
}
}

@media (max-width:900px) {
.footer-v19-main {
grid-template-columns:1fr
}
}

@media (max-width:700px) {
.footer-v19-nav {
grid-template-columns:1fr 1fr
}

.footer-v19-bottom {
flex-direction:column
}
}

@media (prefers-reduced-motion:reduce) {
.page-transition-v19 {
display:none!important
}
}

.ui-dashboard .ui-main {
min-width:0;
}

/* ========================================================================== */

/* PASS 20 — MOBILE FINISH, ACCESSIBILITY AND STABILITY                       */

/* ========================================================================== */

:root {
--focus-ring: 0 0 0 3px rgba(5, 8, 22, .92), 0 0 0 6px rgba(101, 231, 255, .88);
}

html {
text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 104px;
}

body {
overflow-x: clip;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: none;
  box-shadow: var(--focus-ring);
}

.nav-toggle:focus-visible,
.cmd-trigger:focus-visible,
.btn:focus-visible,
.back-to-top:focus-visible {
transform: none;
}

.page-hero p,
.section-head p,
.panel p {
color: #aebad0;
}

.page-hero h1,
.hero h1,
.section h2,
.card h3,
.panel h2 {
overflow-wrap: anywhere;
}

.site-header {
padding-top: env(safe-area-inset-top, 0px);
}

.nav-toggle {
min-width: 94px;
  touch-action: manipulation;
}

.nav-links a,
.btn,
.cmd-trigger,
.back-to-top {
touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none), (pointer: coarse) {
.card:hover,
.btn:hover,
.t20-spotlight:hover {
transform: none;
}
}

@media (max-width: 700px) {
html {
scroll-padding-top: 92px;
}

.container {
width: min(100% - 32px, var(--container));
}

.site-header .container,
header .container {
padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.nav-shell {
border-radius: 24px;
}

.brand-logo {
width: 48px;
    height: 48px;
}

.brand-copy strong {
font-size: clamp(1rem, 5vw, 1.25rem);
}

.brand-copy small {
display: none;
}

button[aria-label*="Menu"],
.nav-toggle {
min-height: 48px !important;
    padding: 9px 15px !important;
    border-radius: 16px !important;
}

.page-hero {
padding-top: clamp(68px, 12vw, 92px) !important;
    padding-bottom: clamp(38px, 8vw, 56px) !important;
}

.page-hero h1 {
margin-top: 18px;
    margin-bottom: 22px;
    font-size: clamp(3rem, 13.5vw, 4.65rem);
    line-height: .94;
    letter-spacing: -.058em;
}

.page-hero p {
max-width: 34rem;
    margin-bottom: 0;
    font-size: clamp(1rem, 4.65vw, 1.18rem);
    line-height: 1.58;
}

.page-identity {
margin-top: 0 !important;
    margin-bottom: 28px !important;
}

.identity-shell {
min-height: 300px;
    border-radius: 28px;
}

main > section + section {
margin-top: 24px;
}

.section {
padding-top: clamp(54px, 12vw, 76px);
    padding-bottom: clamp(54px, 12vw, 76px);
}

.panel,
.card,
.cta {
border-radius: 24px;
}

.panel {
padding: 24px;
}

.back-to-top {
right: max(18px, env(safe-area-inset-right, 0px));
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

.footer-v19-main {
padding-bottom: max(34px, env(safe-area-inset-bottom, 0px));
}
}

@media (max-width: 390px) {
.container {
width: min(100% - 24px, var(--container));
}

.brand-copy strong {
font-size: .98rem;
}

.nav-toggle {
min-width: 82px;
}

.page-hero h1 {
font-size: clamp(2.72rem, 13vw, 3.55rem);
}
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}
}

/* ========================================================================== */
/* MOBILE DISPLAY HOTFIX — IPHONE / SAFARI                                   */
/* ========================================================================== */

:root {
  /* Alias utilisé par certaines règles mobiles historiques. */
  --container: var(--max);
}

/* Empêche toute largeur calculée de dépasser la fenêtre. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/*
 * .hero-grid est le conteneur de mise en page du hero.
 * Une ancienne règle le transformait en grille décorative absolue et inclinée,
 * ce qui écrasait visuellement la page d’accueil sur iPhone.
 */
.hero-grid {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(34px, 6vw, 72px);
  width: 100%;
  max-width: 100%;
  opacity: 1;
  background: none;
  mask-image: none;
  -webkit-mask-image: none;
  transform: none;
  transform-origin: initial;
}

.hero-copy,
.page-hero .container,
.hero .container,
main,
section {
  min-width: 0;
}

.hero h1,
.page-hero h1,
.section h2 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* Contraste légèrement renforcé pour la lecture mobile. */
.hero p,
.page-hero p,
.section-head p,
.panel p,
.card p {
  color: #b8c3d8;
}

@media (max-width: 1050px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --mobile-gutter: 20px;
  }

  .container {
    width: min(calc(100% - (var(--mobile-gutter) * 2)), var(--max));
    max-width: 100%;
    margin-inline: auto;
  }

  .site-header .container,
  header .container {
    width: min(calc(100% - 20px), var(--max));
  }

  .nav-shell {
    width: 100%;
    max-width: 100%;
  }

  /* Hero intérieur : plus court, lisible et sans effet 3D. */
  .hero,
  .hero-section,
  .hero-refined {
    min-height: auto;
    display: block;
    padding-top: clamp(42px, 9vw, 62px);
    padding-bottom: clamp(54px, 11vw, 76px);
    overflow: hidden;
  }

  .hero-grid {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    background: none;
    opacity: 1;
    transform: none;
  }

  .hero h1,
  .hero-title {
    max-width: 100%;
    margin-top: 16px;
    margin-bottom: 20px;
    font-size: clamp(2.75rem, 12.6vw, 4.15rem);
    line-height: .94;
    letter-spacing: -.052em;
    text-wrap: balance;
  }

  .hero p {
    max-width: 100%;
    margin-bottom: 0;
    font-size: clamp(1rem, 4.55vw, 1.14rem);
    line-height: 1.58;
  }

  /* Pages intérieures : moins d’espace vide avant le premier contenu. */
  .page-hero {
    min-height: auto !important;
    padding-top: clamp(48px, 10vw, 68px) !important;
    padding-bottom: clamp(30px, 7vw, 46px) !important;
  }

  .page-hero h1 {
    max-width: 100%;
    margin-top: 16px;
    margin-bottom: 18px;
    font-size: clamp(2.55rem, 11.6vw, 3.75rem);
    line-height: .96;
    letter-spacing: -.052em;
    text-wrap: balance;
  }

  .page-hero h1::after,
  .hero h1::after {
    width: 66px;
    height: 4px;
    margin-top: 20px;
  }

  .page-hero p {
    max-width: 100%;
    font-size: clamp(1rem, 4.35vw, 1.12rem);
    line-height: 1.58;
  }

  .page-identity {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  .identity-shell {
    min-height: 270px;
  }

  main > section + section {
    margin-top: 16px;
  }

  .section {
    padding-top: clamp(48px, 10vw, 68px);
    padding-bottom: clamp(48px, 10vw, 68px);
  }

  .section-head {
    margin-bottom: 30px;
  }

  .section h2 {
    font-size: clamp(2.35rem, 10.5vw, 3.5rem);
    line-height: .98;
  }

  .panel,
  .card,
  .cta,
  .product-case,
  .concept-product,
  .case-study {
    max-width: 100%;
  }

  /* Les effets de perspective ne doivent jamais rester actifs sur écran tactile. */
  .phone-frame,
  .real-product-preview,
  .t20-spotlight,
  .card,
  .product-case,
  .concept-product {
    transform: none !important;
  }

  .phone-frame:hover,
  .real-product-preview:hover,
  .t20-spotlight:hover,
  .card:hover,
  .product-case:hover,
  .concept-product:hover {
    transform: none !important;
  }

  /* Focus visible mais moins envahissant sur Safari iOS. */
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgba(101, 231, 255, .9);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(5, 8, 22, .88);
  }

  .nav-toggle:focus-visible {
    transform: none;
  }
}

@media (max-width: 390px) {
  :root {
    --mobile-gutter: 16px;
  }

  .site-header .container,
  header .container {
    width: min(calc(100% - 16px), var(--max));
  }

  .brand-copy strong {
    font-size: .94rem;
  }

  .nav-toggle {
    min-width: 80px;
    padding-inline: 13px !important;
  }

  .hero h1,
  .hero-title {
    font-size: clamp(2.52rem, 12vw, 3.35rem);
  }

  .page-hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.15rem);
  }
}

/* =========================================================
   Correction ciblée — page Projets sur mobile
   Empêche le chevauchement des cartes autour du noyau T20.
   ========================================================= */
@media (max-width: 700px) {
  body[data-t20-page="projets"] .page-identity-projects .project-orbit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0 !important;
    padding: 22px;
    overflow: hidden;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t1,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t2,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t3,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t4 {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 108px;
    padding: 18px 20px;
    transform: none !important;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile.t1 {
    order: 1;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile.t2 {
    order: 2;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core {
    position: relative;
    inset: auto;
    order: 3;
    width: 132px;
    height: 132px;
    margin: 4px auto;
    transform: none;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile.t3 {
    order: 4;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile.t4 {
    order: 5;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile strong {
    font-size: 1.02rem;
    line-height: 1.25;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile small {
    line-height: 1.45;
  }
}

@media (max-width: 390px) {
  body[data-t20-page="projets"] .page-identity-projects .project-orbit {
    padding: 18px;
    gap: 12px;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile {
    min-height: 102px;
    padding: 16px 18px;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core {
    width: 118px;
    height: 118px;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core b {
    font-size: 1.85rem;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core small {
    font-size: .62rem;
  }
}

/* ==========================================================================
   FINITION PREMIUM — PAGE PROJETS MOBILE
   Mise en page compacte, sans chevauchement et limitée à projets.html.
   ========================================================================== */
@media (max-width: 700px) {
  body[data-t20-page="projets"] .page-identity-projects {
    margin-bottom: 8px !important;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px;
    border-radius: 28px;
    overflow: visible;
    background:
      radial-gradient(circle at 92% 4%, rgba(101, 231, 255, .08), transparent 28%),
      radial-gradient(circle at 8% 96%, rgba(145, 132, 255, .09), transparent 30%),
      linear-gradient(155deg, rgba(8, 17, 31, .98), rgba(4, 8, 19, .99));
    box-shadow:
      0 28px 80px rgba(0, 0, 0, .34),
      inset 0 1px 0 rgba(255, 255, 255, .045);
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t1,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t2,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t3,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t4 {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    padding: 20px 22px;
    border-radius: 22px;
    transform: none !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .085);
    background:
      radial-gradient(circle at 100% 0%, rgba(101, 231, 255, .055), transparent 36%),
      linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018));
    box-shadow:
      0 18px 42px rgba(0, 0, 0, .22),
      inset 0 1px 0 rgba(255, 255, 255, .04);
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile::after {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(101, 231, 255, .28), transparent);
    pointer-events: none;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile.t1 { order: 1; }
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t2 { order: 2; }
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t3 { order: 3; }
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t4 { order: 4; }

  body[data-t20-page="projets"] .page-identity-projects .project-tile span {
    color: #ff83dd;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .16em;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile strong {
    margin-top: 10px;
    font-size: 1.08rem;
    line-height: 1.25;
    letter-spacing: -.018em;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile small {
    margin-top: 7px;
    color: #97a5bd;
    font-size: .88rem;
    line-height: 1.45;
  }

  /* Signature compacte placée après les quatre cartes. */
  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core {
    position: relative;
    inset: auto;
    order: 5;
    width: 100%;
    height: auto;
    min-height: 72px;
    margin: 2px 0 0;
    padding: 14px 18px;
    transform: none;
    flex-direction: row;
    gap: 12px;
    border-radius: 20px;
    background:
      linear-gradient(120deg, rgba(101, 231, 255, .08), rgba(145, 132, 255, .09), rgba(255, 117, 216, .055)),
      rgba(7, 14, 29, .92);
    border: 1px solid rgba(145, 132, 255, .19);
    box-shadow:
      0 16px 38px rgba(0, 0, 0, .25),
      inset 0 1px 0 rgba(255, 255, 255, .045);
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core b {
    font-size: 1.45rem;
    line-height: 1;
    background: linear-gradient(135deg, #65e7ff, #9184ff, #ff75d8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core small {
    color: #9aa8bf;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .16em;
  }

  /* Les produits réels arrivent plus rapidement après l’introduction. */
  body[data-t20-page="projets"] .product-showcase-section {
    padding-top: 42px;
  }
}

@media (max-width: 390px) {
  body[data-t20-page="projets"] .page-identity-projects .project-orbit {
    gap: 13px;
    padding: 15px;
    border-radius: 25px;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-tile,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t1,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t2,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t3,
  body[data-t20-page="projets"] .page-identity-projects .project-tile.t4 {
    padding: 18px;
    border-radius: 19px;
  }

  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core {
    min-height: 66px;
    padding: 12px 16px;
    border-radius: 18px;
  }
}

@media (pointer: coarse) {
  body[data-t20-page="projets"] .page-identity-projects .project-tile,
  body[data-t20-page="projets"] .page-identity-projects .project-orbit-core {
    transform: none !important;
  }
}