/* ============================================================
   UAM.GURU — sky / glass design system
   ============================================================ */

:root{
  --ink:#071a33;
  --ink-soft:#123255;
  --muted:#46617f;
  --line:rgba(9,42,86,.10);

  --blue:#2b7cf6;
  --violet:#7a5cff;
  --cyan:#2ed4ff;
  --mint:#41e0c0;

  --grad:linear-gradient(104deg,#1b6df0 0%,#5a6cff 46%,#8f5cff 100%);
  --grad-soft:linear-gradient(104deg,#2b7cf6,#7a5cff);

  --glass:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.46) 52%,rgba(255,255,255,.30));
  --glass-strong:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  --glass-line:rgba(255,255,255,.88);
  --shadow:0 30px 70px -34px rgba(12,57,120,.52),0 2px 10px rgba(12,57,120,.06),inset 0 1px 0 rgba(255,255,255,.95);
  --shadow-sm:0 16px 40px -24px rgba(12,57,120,.5),inset 0 1px 0 rgba(255,255,255,.9);

  --r-xl:34px;
  --r-lg:26px;
  --r-md:20px;
  --r-sm:14px;

  --wrap:1240px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Unbounded','Manrope',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden;}

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:#eef6ff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(1100px 700px at 8% -8%, #d6ebff 0%, rgba(214,235,255,0) 62%),
    radial-gradient(900px 620px at 96% 4%, #e4ddff 0%, rgba(228,221,255,0) 58%),
    radial-gradient(1000px 780px at 50% 108%, #d3f2ff 0%, rgba(211,242,255,0) 62%),
    linear-gradient(180deg,#f4faff 0%,#edf4ff 42%,#f6fbff 100%);
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
::selection{background:rgba(90,108,255,.22);}

h1,h2,h3,h4{
  margin:0;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.06;
  color:var(--ink);
  text-wrap:balance;
}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}

.wrap{width:min(var(--wrap),calc(100% - 48px)); margin-inline:auto;}
.wrap--narrow{width:min(940px,calc(100% - 48px)); margin-inline:auto;}

/* ---------------- sky layers ---------------- */

.sky{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.55;
  will-change:transform;
}
.orb-a{
  width:56vw; height:56vw; left:-14vw; top:-22vw;
  background:radial-gradient(circle at 40% 40%,#8ec8ff,#c8b4ff 62%,transparent 72%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.orb-b{
  width:44vw; height:44vw; right:-12vw; top:6vh;
  background:radial-gradient(circle at 50% 50%,#b7c6ff,#7ee8ff 60%,transparent 72%);
  opacity:.42;
  animation:drift-b 32s ease-in-out infinite alternate;
}
.orb-c{
  width:60vw; height:40vw; left:18vw; bottom:-24vw;
  background:radial-gradient(circle at 50% 50%,#c9f5ee,#a4c8ff 58%,transparent 74%);
  opacity:.4;
  animation:drift-c 30s ease-in-out infinite alternate;
}

.cloud{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));
  filter:blur(6px);
  opacity:.75;
  will-change:transform;
}
.cloud-1{width:46vw; height:16vw; top:6vh; left:-12vw; animation:cloud-a 52s linear infinite;}
.cloud-2{width:38vw; height:13vw; top:42vh; right:-14vw; opacity:.55; animation:cloud-b 68s linear infinite;}
.cloud-3{width:52vw; height:18vw; bottom:2vh; left:16vw; opacity:.5; animation:cloud-a 84s linear infinite reverse;}

.sky-grain{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
  mix-blend-mode:soft-light;
}

@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,5vh,0) scale(1.12)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-5vw,8vh,0) scale(.95)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7vw,-5vh,0) scale(1.1)}}
@keyframes cloud-a{from{transform:translate3d(-6vw,0,0)}to{transform:translate3d(116vw,2vh,0)}}
@keyframes cloud-b{from{transform:translate3d(6vw,0,0)}to{transform:translate3d(-112vw,-3vh,0)}}

/* ---------------- header ---------------- */

.scrollbar{
  position:fixed; left:0; top:0; height:2px; width:0;
  background:var(--grad);
  z-index:120;
  box-shadow:0 0 14px rgba(90,108,255,.9);
}

.site-head{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:16px 0;
  transition:padding .4s ease;
}
.site-head.is-scrolled{padding:8px 0;}

.head-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 12px 10px 18px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

.brand{display:flex; align-items:center; gap:11px; flex:0 0 auto; margin-right:6px;}
.brand-mark{
  width:38px; height:38px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--grad);
  box-shadow:0 10px 24px -10px rgba(70,90,255,.85),inset 0 1px 0 rgba(255,255,255,.5);
}
.brand-mark svg{width:21px; height:21px; color:#fff;}
.brand-text{
  font-family:var(--display);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}
.brand-text span{color:var(--blue);}

.nav{display:flex; align-items:center; gap:2px; margin-inline:auto;}
.nav a{
  position:relative;
  padding:8px 11px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color .3s ease,background .3s ease;
}
.nav a:hover{color:var(--blue); background:rgba(255,255,255,.7);}
.nav a.is-active{
  color:#fff;
  background:var(--grad);
  box-shadow:0 8px 20px -10px rgba(70,90,255,.9);
}

.head-cta{flex:0 0 auto;}

.burger{
  display:none;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.7);
  cursor:pointer;
  padding:0;
  place-items:center;
}
.burger span{
  display:block; width:17px; height:2px; border-radius:2px;
  background:var(--ink);
  position:relative;
  transition:transform .3s ease,background .3s ease;
}
.burger span::before,
.burger span::after{
  content:""; position:absolute; left:0; width:17px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .3s ease,top .3s ease;
}
.burger span::before{top:-5px;}
.burger span::after{top:5px;}
body.menu-open .burger span{background:transparent;}
body.menu-open .burger span::before{top:0; transform:rotate(45deg);}
body.menu-open .burger span::after{top:0; transform:rotate(-45deg);}

/* ---------------- buttons ---------------- */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 26px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  border:1px solid transparent;
  cursor:pointer;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,background .35s ease,color .3s ease;
  will-change:transform;
}
.btn svg{width:17px; height:17px; flex:0 0 auto; transition:transform .35s ease;}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:translateY(1px) scale(.99);}

.btn--primary{
  color:#fff;
  background:var(--grad);
  background-size:160% 100%;
  box-shadow:0 18px 40px -18px rgba(58,86,255,.9),inset 0 1px 0 rgba(255,255,255,.35);
  animation:sheen 9s ease infinite;
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 50px -18px rgba(58,86,255,1),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.btn--primary:hover::after{transform:translateX(120%);}

.btn--glass{
  color:var(--ink);
  background:rgba(255,255,255,.62);
  border-color:rgba(255,255,255,.95);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(14px);
}
.btn--glass:hover{background:rgba(255,255,255,.9); transform:translateY(-2px);}

.btn--sm{padding:10px 18px; font-size:14px;}
.btn--block{width:100%;}

@keyframes sheen{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ---------------- shared section furniture ---------------- */

.section{padding:clamp(64px,8vw,116px) 0; position:relative;}
.section--tight{padding:clamp(44px,5vw,72px) 0;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 14px 7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--shadow-sm);
  font-family:var(--display);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 0 4px rgba(90,108,255,.15);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(90,108,255,.16)}
  50%{box-shadow:0 0 0 8px rgba(90,108,255,.04)}
}

.sec-head{max-width:760px; margin-bottom:clamp(30px,4vw,52px);}
.sec-head h2{
  margin-top:18px;
  font-size:clamp(2rem,3.6vw,3.15rem);
}
.sec-head p{
  margin-top:16px;
  color:var(--muted);
  font-size:1.06rem;
}
.sec-head--center{margin-inline:auto; text-align:center;}
.sec-head--center .eyebrow{margin-inline:auto;}

.grad{
  background:linear-gradient(104deg,#1466e8 4%,#4f6bff 44%,#9457ff 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  color:var(--muted);
  font-size:clamp(1.02rem,1.35vw,1.16rem);
  line-height:1.72;
}

.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(155%);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
}

.card{
  position:relative;
  border-radius:var(--r-lg);
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  padding:26px;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.85),transparent 70%);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.card:hover{transform:translateY(-6px); box-shadow:0 44px 90px -40px rgba(12,57,120,.6),inset 0 1px 0 rgba(255,255,255,.95);}
.card:hover::after{opacity:.5;}

/* ---------------- hero ---------------- */

.hero{
  position:relative;
  padding:clamp(128px,15vh,180px) 0 clamp(56px,7vw,96px);
  min-height:min(100svh,900px);
  display:flex;
  align-items:center;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.hero h1{
  margin-top:22px;
  font-size:clamp(2.55rem,5.1vw,4.6rem);
  line-height:.99;
  letter-spacing:-.055em;
}
.hero .lead{margin-top:24px; max-width:34em;}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin-top:44px;
  padding-top:26px;
  border-top:1px solid rgba(11,45,90,.12);
}
.hero-stats li{display:flex; flex-direction:column; gap:2px;}
.hero-stats b{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.04em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-stats span{font-size:.82rem; color:var(--muted); letter-spacing:.01em;}

.hero-visual{position:relative; min-height:min(58vw,520px);}

.ring{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.ring-1{
  inset:-7% -4% -1% 4%;
  border:1px dashed rgba(43,124,246,.28);
  animation:spin 40s linear infinite;
}
.ring-2{
  inset:4% 3% 6% -2%;
  border:1px solid rgba(122,92,255,.18);
  animation:spin 60s linear infinite reverse;
}
.ring-1::before,
.ring-2::before{
  content:"";
  position:absolute;
  top:-4px; left:50%;
  width:8px; height:8px; border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 18px rgba(90,108,255,.9);
}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-card{
  position:relative;
  z-index:2;
  border-radius:var(--r-xl);
  padding:12px;
  overflow:hidden;
  animation:heroin 1.2s cubic-bezier(.2,.7,.2,1) both;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.hero-card img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  border-radius:24px;
}
.hero-card figcaption{
  position:absolute;
  left:26px; right:26px; bottom:26px;
  padding:14px 18px;
  border-radius:16px;
  background:rgba(6,21,40,.42);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px);
  color:#eaf4ff;
  font-size:.82rem;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-card figcaption i{
  width:8px; height:8px; border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 12px var(--mint);
  flex:0 0 auto;
}
@keyframes heroin{
  from{opacity:0; transform:translateY(28px) scale(.97)}
  to{opacity:1; transform:none}
}

.chip{
  position:absolute;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:12px 16px;
  border-radius:16px;
  background:var(--glass-strong);
  border:1px solid #fff;
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  animation:float 8s ease-in-out infinite;
}
.chip b{font-size:1.05rem; letter-spacing:-.03em;}
.chip span{font-size:.68rem; line-height:1.3; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;}
.chip-1{top:6%; left:-6%; animation-delay:-1.5s;}
.chip-2{bottom:14%; right:-5%; animation-delay:-3.5s;}
.chip-3{top:44%; right:-9%; animation-delay:-5s;}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-14px,0)}
}

/* ---------------- page hero (inner pages) ---------------- */

.page-hero{
  position:relative;
  padding:clamp(120px,14vh,168px) 0 clamp(28px,4vw,48px);
}
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:.78rem; color:var(--muted);
  margin-bottom:22px;
  letter-spacing:.02em;
}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb span{opacity:.5;}
.page-hero h1{
  margin-top:20px;
  font-size:clamp(2.2rem,4.4vw,3.9rem);
  max-width:18em;
}
.page-hero .lead{margin-top:22px; max-width:62ch;}
.page-hero-meta{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:var(--shadow-sm);
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-soft);
  letter-spacing:.01em;
}
.pill b{color:var(--blue);}

/* ---------------- media ---------------- */

.media{
  position:relative;
  border-radius:var(--r-xl);
  padding:10px;
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  overflow:hidden;
}
.media img{width:100%; height:auto; border-radius:24px;}
.media figcaption{
  padding:14px 12px 8px;
  font-size:.82rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:9px;
}
.media figcaption::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--grad);
  flex:0 0 auto;
}
.media--flush figcaption{display:none;}

/* ---------------- grids & tiles ---------------- */

.grid{display:grid; gap:22px;}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

.tile{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:22px;
  border-radius:var(--r-lg);
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
  position:relative;
  overflow:hidden;
}
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(500px 220px at 50% 0%,rgba(122,92,255,.16),transparent 70%);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.tile:hover{transform:translateY(-6px); box-shadow:0 44px 90px -40px rgba(12,57,120,.65),inset 0 1px 0 rgba(255,255,255,.95);}
.tile:hover::before{opacity:1;}
.tile:hover .icon-badge{transform:rotate(-6deg) scale(1.05);}
.tile h3{font-size:1.16rem; letter-spacing:-.035em;}
.tile p{font-size:.94rem; color:var(--muted); line-height:1.6;}
.tile .more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.82rem;
  font-weight:700;
  color:var(--blue);
  letter-spacing:.02em;
}
.tile .more svg{width:14px; height:14px; transition:transform .4s ease;}
.tile:hover .more svg{transform:translateX(4px);}

.icon-badge{
  width:62px; height:62px;
  border-radius:19px;
  display:grid;
  place-items:center;
  background:linear-gradient(150deg,#fff,rgba(255,255,255,.62));
  border:1px solid #fff;
  box-shadow:0 16px 30px -18px rgba(18,70,140,.75),inset 0 1px 0 #fff;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  flex:0 0 auto;
}
.icon-badge img{width:36px; height:36px; object-fit:contain;}

/* accent tiles */
.tile--feature{
  padding:30px;
  min-height:100%;
}
.tile--feature .icon-badge{width:74px; height:74px; border-radius:22px;}
.tile--feature .icon-badge img{width:44px; height:44px;}
.tile--feature h3{font-size:1.32rem;}
.tile--feature p{font-size:.98rem;}

/* numbered markers */
.num{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:12px;
  background:var(--grad);
  color:#fff;
  font-weight:800;
  font-size:.88rem;
  box-shadow:0 12px 24px -14px rgba(70,90,255,.9);
  flex:0 0 auto;
}

/* ---------------- stats band ---------------- */

.stat-band{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:rgba(255,255,255,.4);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(150%);
}
.stat-band > div{
  padding:30px 26px;
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.34));
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-band b{
  font-size:clamp(1.75rem,2.6vw,2.4rem);
  font-weight:800;
  letter-spacing:-.05em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.05;
}
.stat-band span{font-size:.83rem; color:var(--muted); line-height:1.45;}

/* ---------------- quotes ---------------- */

.quote{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:26px;
  border-radius:var(--r-lg);
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(150%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
.quote:hover{transform:translateY(-5px); box-shadow:0 40px 80px -38px rgba(12,57,120,.6);}
.quote-mark{
  font-size:2.6rem;
  line-height:.6;
  font-weight:800;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.quote p{font-size:.95rem; line-height:1.62; color:var(--ink-soft);}
.quote footer{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px;}
.avatar{
  width:46px; height:46px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 8px 20px -10px rgba(12,57,120,.7);
  flex:0 0 auto;
  background:#dfeeff;
}
.quote .who{display:flex; flex-direction:column;}
.quote .who b{font-size:.86rem; letter-spacing:-.01em;}
.quote .who span{font-size:.74rem; color:var(--muted); line-height:1.35;}

/* ---------------- prose ---------------- */

.prose{max-width:72ch;}
.prose p{color:var(--muted); margin-bottom:1.05em; font-size:1.02rem; line-height:1.75;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--ink); font-weight:700;}

.split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,58px);
  align-items:center;
}
.split--reverse > *:first-child{order:2;}
.split .media{position:relative;}

.note{
  margin-top:28px;
  padding:22px 24px;
  border-radius:var(--r-md);
  background:linear-gradient(140deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.95);
  border-left:3px solid var(--violet);
  box-shadow:var(--shadow-sm);
  font-size:.96rem;
  color:var(--ink-soft);
}

/* ---------------- spec list / product card ---------------- */

.product{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(150%);
}
.product-media{padding:12px; min-height:280px;}
.product-media img{width:100%; height:100%; object-fit:cover; border-radius:24px;}
.product-body{padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center; gap:16px;}
.product-body .kicker{
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
}
.product-body h3{font-size:clamp(1.6rem,2.4vw,2.1rem);}
.price{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-weight:800;
  letter-spacing:-.04em;
  font-size:1.5rem;
  color:var(--ink);
}
.price span{font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.04em; text-transform:uppercase;}

.specs{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;}
.specs li{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:.9rem;
  color:var(--ink-soft);
  line-height:1.45;
}
.specs li::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--grad);
  flex:0 0 auto;
  transform:translateY(-2px);
}
.specs li b{font-weight:700; color:var(--ink);}

/* ---------------- principles ---------------- */

.principle{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px 22px;
  border-radius:var(--r-md);
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(18px) saturate(150%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.principle:hover{transform:translateY(-4px);}
.principle p{font-size:.95rem; font-weight:600; line-height:1.45; letter-spacing:-.01em;}
.principle .dot{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 0 4px rgba(90,108,255,.13);
  flex:0 0 auto;
  margin-top:7px;
}

/* ---------------- form ---------------- */

.form-card{
  padding:clamp(26px,3.6vw,46px);
  border-radius:var(--r-xl);
  background:var(--glass-strong);
  border:1px solid #fff;
  box-shadow:var(--shadow);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
.field label{font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.field input,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(11,45,90,.14);
  background:rgba(255,255,255,.78);
  font:inherit;
  font-size:.95rem;
  color:var(--ink);
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
  resize:vertical;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(90,108,255,.6);
  background:#fff;
  box-shadow:0 0 0 4px rgba(90,108,255,.14);
}
.field textarea{min-height:120px;}
.form-note{font-size:.78rem; color:var(--muted); margin-top:14px; line-height:1.5;}
.form-status{
  display:none;
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(65,224,192,.16);
  border:1px solid rgba(41,190,160,.35);
  font-size:.88rem;
  color:#0a5c4d;
}
.form-status.is-visible{display:block; animation:heroin .5s ease both;}

/* ---------------- CTA band ---------------- */

.cta{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(34px,5vw,64px);
  background:
    radial-gradient(600px 300px at 88% 0%,rgba(122,92,255,.35),transparent 70%),
    radial-gradient(500px 300px at 6% 100%,rgba(46,212,255,.35),transparent 70%),
    linear-gradient(140deg,rgba(255,255,255,.82),rgba(255,255,255,.5));
  border:1px solid #fff;
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(160%);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:28px;
  justify-content:space-between;
}
.cta h2{font-size:clamp(1.7rem,3.2vw,2.6rem); max-width:16em;}
.cta p{color:var(--muted); margin-top:12px; max-width:48ch; font-size:.98rem;}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px;}

/* ---------------- footer ---------------- */

.site-foot{
  margin-top:clamp(40px,6vw,80px);
  padding:clamp(40px,5vw,64px) 0 26px;
  border-top:1px solid rgba(11,45,90,.08);
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55));
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:36px;
  align-items:start;
}
.foot-brand{display:flex; flex-direction:column; gap:14px; max-width:34ch;}
.foot-brand p{font-size:.86rem; color:var(--muted); line-height:1.6;}
.foot-col h4{
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
  font-weight:500;
}
.foot-col ul{display:flex; flex-direction:column; gap:8px;}
.foot-col a{font-size:.88rem; color:var(--ink-soft); transition:color .3s ease;}
.foot-col a:hover{color:var(--blue);}
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid rgba(11,45,90,.08);
  font-size:.76rem;
  color:var(--muted);
}
.foot-mail{font-weight:700; color:var(--blue); font-size:.92rem;}

/* ---------------- reveal / motion ---------------- */

[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1; transform:none;}

.spotlight{
  position:fixed;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(120,160,255,.16),rgba(120,160,255,0) 65%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .6s ease;
  mix-blend-mode:normal;
}

/* ---------------- responsive ---------------- */

@media (max-width:1180px){
  .nav{
    position:fixed;
    top:82px; left:24px; right:24px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:14px;
    border-radius:26px;
    background:var(--glass-strong);
    border:1px solid #fff;
    box-shadow:var(--shadow);
    backdrop-filter:blur(26px) saturate(160%);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px) scale(.99);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
    max-height:calc(100svh - 110px);
    overflow:auto;
  }
  .nav a{padding:12px 16px; font-size:15px; border-radius:14px;}
  .nav a.is-active{color:#fff;}
  .burger{display:grid;}
  body.menu-open .nav{opacity:1; visibility:visible; transform:none;}
  .head-cta{display:none;}
  .hero-grid{grid-template-columns:1fr; gap:54px;}
  .hero{min-height:0; padding-top:132px;}
  .hero-visual{min-height:0; margin-top:18px;}
  .chip-1{left:-2%;}
  .chip-2{right:-1%;}
  .chip-3{display:none;}
  .hero .lead{max-width:46em;}
}

@media (max-width:960px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-band{grid-template-columns:repeat(2,minmax(0,1fr));}
  .split{grid-template-columns:1fr;}
  .split--reverse > *:first-child{order:0;}
  .product{grid-template-columns:1fr;}
  .product-media{min-height:240px; max-height:340px;}
  .product-media img{height:100%; object-fit:cover;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1 / -1;}
}

@media (max-width:760px){
  body{font-size:16px;}
  .wrap,.wrap--narrow{width:calc(100% - 32px);}
  .head-inner{padding:8px 10px 8px 14px;}
  .brand-text{font-size:13px;}
  .nav{left:16px; right:16px; top:74px;}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .hero-stats{gap:20px 26px;}
  .hero-card figcaption{left:16px; right:16px; bottom:16px; font-size:.74rem; padding:11px 13px;}
  .chip{padding:10px 13px;}
  .chip b{font-size:.92rem;}
  .specs{grid-template-columns:1fr;}
  .stat-band{grid-template-columns:1fr 1fr;}
  .stat-band > div{padding:22px 18px;}
  .cta{padding:28px 22px;}
  .quote{padding:22px;}
  .hero-actions .btn{width:100%;}
  .section{padding:56px 0;}
  .page-hero{padding-top:112px;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1; transform:none;}
}

/* ---------------- content components ---------------- */

figure,blockquote{margin:0;}

.specs--single{grid-template-columns:1fr;}

.fact-list{display:flex; flex-direction:column; gap:16px;}
.fact{
  display:flex;
  align-items:baseline;
  gap:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(11,45,90,.1);
}
.fact:last-child{border-bottom:0; padding-bottom:0;}
.fact b{
  flex:0 0 auto;
  font-size:clamp(1.5rem,2.2vw,1.9rem);
  font-weight:800;
  letter-spacing:-.05em;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.fact span{margin-left:auto; max-width:17em; text-align:right; font-size:.84rem; color:var(--muted); line-height:1.45;}

.factors{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-self:stretch;}
.factor{
  padding:24px 22px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.4));
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(20px) saturate(150%);
}
.factor h3{
  font-family:var(--display);
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}
.factor li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:9px 0;
  font-size:.86rem;
  color:var(--ink-soft);
  border-bottom:1px dashed rgba(11,45,90,.12);
  line-height:1.4;
}
.factor li:last-child{border-bottom:0; padding-bottom:0;}
.factor b{font-size:1rem; color:#0a9c74; letter-spacing:-.02em;}
.factor--down b{color:#e02e6a;}

.leader{
  border-radius:var(--r-lg);
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
  display:flex;
  flex-direction:column;
}
.leader:hover{transform:translateY(-6px); box-shadow:0 44px 90px -40px rgba(12,57,120,.6);}
.leader-media{aspect-ratio:4/3; overflow:hidden; margin:10px 10px 0; border-radius:20px;}
.leader-media img{width:100%; height:100%; object-fit:cover; object-position:center 24%; transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.leader:hover .leader-media img{transform:scale(1.05);}
.leader-body{padding:22px; display:flex; flex-direction:column; gap:7px;}
.leader-body h3{font-size:1.12rem;}
.leader-body p{font-size:.9rem; color:var(--muted); line-height:1.62;}

.kicker{
  font-family:var(--display);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
}

.eco-group + .eco-group{margin-top:44px;}
.group-title{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--display);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.group-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(11,45,90,.16),rgba(11,45,90,0));
}

.tile--compact{padding:18px; gap:11px; border-radius:22px;}
.tile--compact .icon-badge{width:50px; height:50px; border-radius:16px;}
.tile--compact .icon-badge img{width:29px; height:29px;}
.tile--compact h3{font-size:1rem;}
.tile--compact p{font-size:.85rem; line-height:1.55;}
.tile--compact .more{font-size:.74rem;}

.cfg{display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.cfg .num{margin-bottom:4px;}
.cfg h3{font-size:1.14rem; line-height:1.25;}
.cfg p{font-size:.92rem; color:var(--muted); line-height:1.6;}
.cfg .kicker{margin-bottom:2px;}

.product-body p{font-size:.93rem; color:var(--muted); line-height:1.66;}
.product-body .btn{align-self:flex-start;}

.request-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,64px);
  align-items:center;
}

.stat-band--stack{grid-template-columns:1fr;}

.media--phone{padding:12px;}
.phone{
  display:grid;
  place-items:center;
  padding:34px 20px;
  border-radius:24px;
  background:
    radial-gradient(420px 260px at 20% 10%,rgba(122,92,255,.20),transparent 70%),
    radial-gradient(420px 260px at 90% 90%,rgba(46,212,255,.24),transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.9),rgba(230,242,255,.7));
}
.phone img{
  width:min(240px,72%);
  height:auto;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 30px 60px -28px rgba(12,57,120,.65);
}

@media (max-width:960px){
  .factors{grid-template-columns:1fr;}
  .request-grid{grid-template-columns:1fr;}
  .stat-band--stack{grid-template-columns:1fr;}
  .leader-media{aspect-ratio:16/10;}
}

