:root{
  --bg:#071323;
  --bg-deep:#040c18;
  --surface:rgba(10,24,43,.68);
  --surface-strong:rgba(8,19,36,.82);
  --surface-soft:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.11);
  --text:#eef4fb;
  --muted:#bfd0e6;
  --gold:#dfc478;
  --gold-strong:#f0d894;
  --blue:#87b8ff;
  --shadow:0 22px 48px rgba(0,0,0,.24);
  --radius:24px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(85,135,215,.18), transparent 22%),
    radial-gradient(circle at 85% 10%, rgba(223,196,120,.12), transparent 18%),
    linear-gradient(180deg, rgba(4,12,24,.55), rgba(4,12,24,.80)),
    url('../images/marble.jpg') center/cover fixed;
  overflow-x:hidden;
}

site-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg, rgba(8,17,31,.86), rgba(5,12,24,.95)),
    radial-gradient(circle at 20% 35%, rgba(84,132,210,.16), transparent 24%),
    radial-gradient(circle at 70% 18%, rgba(223,196,120,.10), transparent 20%);
}

.bg-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(60px);
  opacity:.45;
  animation:orbPulse 10s ease-in-out infinite;
}
.orb-1{width:280px;height:280px;left:-60px;top:80px;background:rgba(73,127,214,.25)}
.orb-2{width:200px;height:200px;right:8%;top:140px;background:rgba(223,196,120,.18);animation-delay:1.4s}
.orb-3{width:220px;height:220px;left:55%;bottom:120px;background:rgba(138,180,255,.15);animation-delay:2.4s}

.marble-wave{
  position:absolute;
  inset:auto auto auto auto;
  border-radius:999px;
  filter:blur(24px);
  opacity:.45;
  mix-blend-mode:screen;
}
.marble-wave-a{
  width:55vw;height:55vw;left:-10vw;top:12vh;
  background:
    radial-gradient(circle at 40% 40%, rgba(100,150,230,.25), transparent 28%),
    conic-gradient(from 130deg, rgba(255,255,255,.08), rgba(98,140,214,.18), rgba(223,196,120,.09), rgba(255,255,255,.02), rgba(98,140,214,.12));
  animation:marbleDriftA 28s ease-in-out infinite alternate;
}
.marble-wave-b{
  width:40vw;height:40vw;right:-8vw;top:26vh;
  background:
    radial-gradient(circle at 50% 50%, rgba(223,196,120,.16), transparent 30%),
    conic-gradient(from 40deg, rgba(255,255,255,.03), rgba(223,196,120,.14), rgba(90,132,210,.16), rgba(255,255,255,.04));
  animation:marbleDriftB 22s ease-in-out infinite alternate;
}
.marble-wave-c{
  width:64vw;height:64vw;left:18vw;bottom:-25vw;
  background:
    radial-gradient(circle at 45% 45%, rgba(90,132,210,.15), transparent 28%),
    conic-gradient(from 220deg, rgba(255,255,255,.03), rgba(88,129,202,.15), rgba(223,196,120,.08), rgba(255,255,255,.02));
  animation:marbleDriftC 32s ease-in-out infinite alternate;
}

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

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;
  background:transparent;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(8,20,38,.4);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.11);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.nav-shell{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:#fff;
}
.brand-badge{
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(223,196,120,.22));
  border:1px solid rgba(255,255,255,.12);
  color:var(--gold-strong);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
  font-weight:800;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand-text strong{
  letter-spacing:.01em;
  font-size:1rem;
}
.brand-text small{
  color:var(--muted);
  font-size:.72rem;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:1.35rem;
}
.main-nav a{
  position:relative;
  text-decoration:none;
  color:rgba(255,255,255,.9);
  font-size:.95rem;
  padding:.35rem 0;
  transition:color .25s ease;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-.1rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible{color:#fff}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{transform:scaleX(1)}

.menu-toggle{
  display:none;
  width:48px;height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:22px;height:2px;
  background:#fff;
  margin:5px auto;
  border-radius:999px;
}

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:8.5rem 0 5rem;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
}
.eyebrow{
  margin:0 0 1rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.8rem;
  color:#d9e5f7;
}
.mini-label{
  margin:0 0 .75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  color:var(--gold-strong);
}
.hero-copy h1{
  margin:0;
  font-size:clamp(2.9rem, 7vw, 5.6rem);
  line-height:.93;
  letter-spacing:-.045em;
}
.hero-copy h1 span{
  display:block;
  color:var(--gold-strong);
}
.lead{
  margin-top:1.2rem;
  max-width:58ch;
  color:var(--muted);
  font-size:1.08rem;
}
.hero-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 1.2rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.button:hover{transform:translateY(-2px)}
.button-primary{
  background:linear-gradient(135deg, rgba(223,196,120,.28), rgba(255,255,255,.08));
  color:#fff;
  border-color:rgba(223,196,120,.28);
}
.button-secondary{
  background:rgba(255,255,255,.05);
  color:#fff;
}

.highlight-box,
.glass-panel,
.glass-card,
.feature-card,
.value-card,
.founder-card,
.service-card,
.ops-card,
.plan-card,
.pricing-banner{
  position:relative;
  background:linear-gradient(180deg, rgba(16,33,58,.74), rgba(7,18,34,.80));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.highlight-box{
  padding:1.7rem;
}
.highlight-box h2{
  margin:.1rem 0 .8rem;
  font-size:1.85rem;
  line-height:1.02;
}
.highlight-box p:last-child{margin-bottom:0;color:var(--muted)}

.hero-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(18px);
  opacity:.45;
  animation:glowPulse 6.5s ease-in-out infinite;
}
.glow-a{width:240px;height:240px;left:7%;top:24%;background:rgba(104,154,232,.25)}
.glow-b{width:180px;height:180px;right:11%;top:18%;background:rgba(223,196,120,.20);animation-delay:1s}
.glow-c{width:150px;height:150px;left:48%;bottom:14%;background:rgba(100,146,228,.18);animation-delay:2s}

.hero-shape{
  position:absolute;
  border:1px solid rgba(223,196,120,.28);
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(223,196,120,.06));
  backdrop-filter:blur(5px);
  animation:floatShape 14s ease-in-out infinite;
}
.hero-shape.circle{border-radius:999px}
.hero-shape.square{border-radius:18px}
.hero-shape.rounded{border-radius:28px}
.shape-a{width:88px;height:88px;left:6%;top:20%}
.shape-b{width:70px;height:70px;right:8%;top:32%;animation-delay:-3s}
.shape-c{width:120px;height:62px;right:15%;bottom:14%;animation-delay:-7s}
.shape-d{width:56px;height:56px;left:13%;bottom:18%;animation-delay:-10s}

.section{
  position:relative;
  padding:7rem 0;
}
.section h2{
  margin:0;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1;
  letter-spacing:-.04em;
}
.section-intro{
  max-width:70ch;
  margin:1rem 0 0;
  color:var(--muted);
}

.split-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:2rem;
  align-items:start;
}
.glass-panel,
.glass-card,
.feature-card,
.value-card,
.founder-card,
.service-card,
.ops-card,
.plan-card{
  padding:1.55rem;
}
.glass-panel p:last-child,
.glass-card p:last-child,
.feature-card p:last-child,
.value-card p:last-child,
.founder-card p:last-child,
.service-card p:last-child,
.ops-card p:last-child,
.plan-card p:last-child{margin-bottom:0}

.shimmer{overflow:hidden}
.shimmer::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform:translateX(-65%) rotate(8deg);
  animation:shimmerMove 7.2s linear infinite;
  pointer-events:none;
}

.marble-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 26%, rgba(87,134,210,.18), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(223,196,120,.10), transparent 18%),
    radial-gradient(circle at 35% 80%, rgba(106,152,226,.12), transparent 24%);
  mix-blend-mode:screen;
  animation:marbleOverlay 18s ease-in-out infinite alternate;
}
.section-fade{
  position:absolute;
  left:0;right:0;height:76px;
  pointer-events:none;
}
.fade-top{top:0;background:linear-gradient(180deg, rgba(4,12,24,.72), transparent)}
.fade-bottom{bottom:0;background:linear-gradient(0deg, rgba(4,12,24,.72), transparent)}

.card-grid{
  display:grid;
  gap:1.35rem;
}
.card-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mission-vision-grid,
.values-grid,
.founders-grid,
.alignment-grid,
.strategy-grid,
.ops-grid,
.plans-grid{margin-top:1.5rem}

.icon-box{
  width:54px;height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(223,196,120,.20), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:1rem;
}
.icon-box svg{
  width:24px;height:24px;
  stroke:var(--gold-strong);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature-card h3,
.value-card h3,
.founder-card h3,
.service-card h3,
.ops-card h3,
.plan-card h3,
.glass-card h3,
.glass-panel h3{
  margin:0 0 .6rem;
  font-size:1.25rem;
}
.feature-card p,
.value-card p,
.service-card p,
.ops-card p,
.plan-card p,
.glass-card p,
.glass-panel p{
  color:var(--muted);
}
.feature-card,
.value-card,
.founder-card,
.service-card,
.ops-card,
.plan-card,
.glass-card,
.glass-panel,
.highlight-box{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.feature-card:hover,
.value-card:hover,
.founder-card:hover,
.service-card:hover,
.ops-card:hover,
.plan-card:hover,
.glass-card:hover,
.glass-panel:hover,
.highlight-box:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(223,196,120,.34);
  box-shadow:0 28px 60px rgba(0,0,0,.28);
}

.founder-card{
  text-align:center;
  padding-top:1.8rem;
}
.avatar{
  width:78px;height:78px;
  margin:0 auto 1rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--gold-strong);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, rgba(223,196,120,.18), rgba(120,168,244,.16));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.quote-line{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.10);
  color:#fff !important;
  font-weight:500;
}
.wide-panel{margin-top:1rem}
.service-card ul,
.plan-card ul,
.pricing-banner ul{
  color:var(--muted);
}
.ops-card{min-height:100%}

.pricing-banner{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:1.6rem;
  padding:1.65rem;
  margin-top:1.2rem;
}
.pricing-banner h3{
  margin:.15rem 0 .45rem;
  font-size:2rem;
}
.plan-summary{margin-bottom:1rem;color:var(--muted)}

.site-footer{
  padding:2rem 0 3rem;
  border-top:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(4,12,24,0), rgba(4,12,24,.62));
}
.footer-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:.8rem;
}
.footer-brand p{
  margin:.2rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}
.footer-copy{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* animations */
@keyframes orbPulse{
  0%,100%{transform:scale(1) translate3d(0,0,0);opacity:.38}
  50%{transform:scale(1.15) translate3d(8px,-10px,0);opacity:.58}
}
@keyframes glowPulse{
  0%,100%{transform:scale(1);opacity:.35}
  50%{transform:scale(1.18);opacity:.62}
}
@keyframes floatShape{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(12px,-20px,0) rotate(7deg)}
}
@keyframes shimmerMove{
  0%{transform:translateX(-65%) rotate(8deg)}
  100%{transform:translateX(75%) rotate(8deg)}
}
@keyframes marbleOverlay{
  0%{transform:translate3d(-1%,0,0) scale(1)}
  100%{transform:translate3d(2%,-2%,0) scale(1.05)}
}
@keyframes marbleDriftA{
  0%{transform:translate3d(-2%,0,0) rotate(0deg)}
  100%{transform:translate3d(3%,-2%,0) rotate(18deg)}
}
@keyframes marbleDriftB{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(-4%,2%,0) rotate(-20deg)}
}
@keyframes marbleDriftC{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(2%,-3%,0) rotate(14deg)}
}

@media (max-width: 980px){
  .hero-grid,
  .split-grid,
  .card-grid-2,
  .pricing-banner{grid-template-columns:1fr}
  .card-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .nav-shell{min-height:72px}
  .menu-toggle{display:block}
  .main-nav{
    position:absolute;
    top:calc(100% + .6rem);
    left:1rem;right:1rem;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    padding:1rem 1.1rem;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(8,20,38,.92);
    box-shadow:var(--shadow);
  }
  .main-nav.is-open{display:flex}
  .section{padding:5.5rem 0}
  .hero{padding-top:7.8rem}
  .hero-copy h1 span{display:inline}
  .card-grid-3{grid-template-columns:1fr}
  .highlight-box h2{font-size:1.5rem}
}