/* =============================================================
   Crater Technology, Inc. — landing page styles
   Motif: the "crater ripple" — concentric contour rings that
   echo the brand name (impact + topography) across the page.
   ============================================================= */

:root{
  /* palette */
  --navy:#081226;
  --ink:#0C1E3A;
  --ink-2:#12294d;
  --blue-800:#123A8A;
  --blue:#1E5FE6;        /* primary */
  --blue-400:#4C86F7;
  --aqua:#34D6C3;        /* friendly accent */
  --mist:#EEF4FF;
  --paper:#F8FAFF;
  --white:#FFFFFF;
  --slate:#5A6A87;
  --slate-2:#7C8AA5;
  --line:#DCE6F7;

  /* type */
  --display:'Space Grotesk', system-ui, sans-serif;
  --body:'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  /* system */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px -28px rgba(18,41,77,.35);
  --shadow-sm:0 10px 30px -18px rgba(18,41,77,.4);
  --wrap:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px;border-radius:6px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--body);font-weight:600;font-size:.98rem;
  padding:.85em 1.35em;border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn__icon{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--solid{background:var(--blue);color:#fff;box-shadow:0 12px 26px -12px rgba(30,95,230,.7)}
.btn--solid:hover{transform:translateY(-2px);background:var(--blue-800);box-shadow:0 18px 34px -14px rgba(30,95,230,.8)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn--big{
  background:var(--white);color:var(--ink);font-size:1.12rem;padding:1.1em 1.8em;
  font-family:var(--mono);font-weight:500;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
}
.btn--big:hover{transform:translateY(-3px);color:var(--blue)}
.btn--big .btn__icon{width:1.2em;height:1.2em;stroke:var(--blue)}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 20px;
}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:var(--aqua)}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(30,95,230,.18)}
.eyebrow--light .eyebrow__dot{box-shadow:0 0 0 4px rgba(52,214,195,.2)}

/* =============================================================
   NAV
   ============================================================= */
.nav{position:sticky;top:0;z-index:100;background:rgba(248,250,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.is-scrolled{border-color:var(--line);box-shadow:0 8px 30px -22px rgba(18,41,77,.5)}
.nav__inner{display:flex;align-items:center;gap:24px;height:74px}

.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;color:var(--ink)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__mark .ring{fill:none;stroke:var(--blue);stroke-width:1.6;opacity:.9}
.brand__mark .r1{opacity:.35}
.brand__mark .r2{opacity:.6}
.brand__mark .dot{fill:var(--blue);stroke:none}
.brand__name{display:flex;flex-direction:column;line-height:1;gap:2px}
.brand__tld{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-2)}

.nav__links{display:flex;gap:30px;margin-left:auto;font-weight:500;font-size:.95rem;color:var(--slate)}
.nav__links a{position:relative;padding:4px 0;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue);transition:width .28s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex}

.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav__toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;flex-direction:column;gap:6px;padding:8px 24px 22px;background:var(--paper);border-bottom:1px solid var(--line)}
.mobile-nav a{padding:12px 4px;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:12px;justify-content:center}
.mobile-nav.is-open{display:flex}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;padding:64px 0 0;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(52,214,195,.10), transparent 55%),
    radial-gradient(120% 100% at 20% 0%, rgba(30,95,230,.10), transparent 50%);
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-bottom:56px}
.hero__copy{min-width:0}

.hero__title{font-size:clamp(2.15rem,6.5vw,4.5rem);font-weight:700;letter-spacing:-.035em;overflow-wrap:break-word}
.grad{
  background:linear-gradient(100deg,var(--blue) 0%,var(--blue-400) 45%,var(--aqua) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;position:relative;
}
.hero__lead{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--slate);max-width:34ch;margin:26px 0 34px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}

.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:46px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.hero__stats dt{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.hero__stats dd{margin:2px 0 0;font-size:.82rem;color:var(--slate-2)}

/* ----- crater signature ----- */
.hero__crater{display:flex;justify-content:center;align-items:center;width:100%;min-width:0;overflow:hidden;padding:14px}
.crater{position:relative;width:min(420px,80vw);aspect-ratio:1;display:grid;place-items:center}
.crater__rings{position:absolute;inset:0;display:grid;place-items:center}
.cr{position:absolute;border-radius:50%;border:1.5px solid rgba(30,95,230,.28);transform:rotateX(62deg)}
.cr1{width:98%;height:98%;border-color:rgba(30,95,230,.14)}
.cr2{width:72%;height:72%;border-color:rgba(30,95,230,.24)}
.cr3{width:47%;height:47%;border-color:rgba(30,95,230,.4)}
.cr4{width:24%;height:24%;border-color:rgba(52,214,195,.6)}
.pulse{position:absolute;width:24%;height:24%;border-radius:50%;border:2px solid var(--aqua);transform:rotateX(62deg);animation:ripple 3.6s var(--ease) infinite}
.core{
  position:absolute;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--blue-400),var(--blue) 55%,var(--blue-800));
  box-shadow:0 20px 44px -14px rgba(30,95,230,.75), 0 0 0 10px rgba(30,95,230,.08);
}
@keyframes ripple{
  0%{transform:rotateX(62deg) scale(1);opacity:.9}
  70%{opacity:.12}
  100%{transform:rotateX(62deg) scale(4.1);opacity:0}
}

/* chips rest on the crater rings and float gently — robust, no transform conflicts */
.orbit{position:absolute;inset:0}
.orbit .chip{
  position:absolute;width:52px;height:52px;border-radius:14px;background:var(--white);
  box-shadow:var(--shadow-sm);display:grid;place-items:center;
  border:1px solid var(--line);animation:float 6s ease-in-out infinite;
}
.orbit .chip::before{content:"";width:26px;height:26px;background-size:contain;background-repeat:no-repeat;background-position:center}
/* place chips around the crater (kept inside the box so nothing overflows) */
.orbit--a .chip:nth-child(1){top:2%;left:34%;animation-delay:0s}
.orbit--a .chip:nth-child(2){bottom:3%;right:30%;animation-delay:-3s}
.orbit--b .chip:nth-child(1){top:36%;left:2%;animation-delay:-1.2s}
.orbit--b .chip:nth-child(2){top:30%;right:2%;animation-delay:-4.2s}
.orbit--c .chip:nth-child(1){top:10%;right:9%;animation-delay:-2.4s}
.orbit--c .chip:nth-child(2){bottom:12%;left:7%;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* chip icons (inline SVG via data URI, tinted blue) */
.chip[data-icon="eth"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E5FE6'%3E%3Cpath d='M12 1.5 5 12.3l7 4.1 7-4.1L12 1.5Zm0 20.9L5 13.7l7 4.1 7-4.1-7 8.7Z'/%3E%3C/svg%3E")}
.chip[data-icon="react"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='2.1' fill='%231E5FE6' stroke='none'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(120 12 12)'/%3E%3C/svg%3E")}
.chip[data-icon="node"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2 3.5 7v10L12 22l8.5-5V7L12 2Z'/%3E%3Cpath d='M12 8.5c-1.7 0-2.7.8-2.7 1.9 0 2.4 5.4 1.2 5.4 3.4 0 1-.9 1.7-2.7 1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.chip[data-icon="cloud"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 18a4 4 0 0 1-.4-8 5.5 5.5 0 0 1 10.6-1.2A3.8 3.8 0 0 1 17.5 18H6.5Z'/%3E%3C/svg%3E")}
.chip[data-icon="ai"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2.5'/%3E%3Cpath d='M10.5 10.5h3v3h-3z' fill='%231E5FE6' stroke='none'/%3E%3Cpath d='M9.5 4v2M14.5 4v2M9.5 18v2M14.5 18v2M4 9.5h2M4 14.5h2M18 9.5h2M18 14.5h2' stroke-linecap='round'/%3E%3C/svg%3E")}
.chip[data-icon="mobile"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.6'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E")}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);overflow:hidden;padding:16px 0}
.ticker__row{display:flex;gap:26px;align-items:center;white-space:nowrap;font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;color:var(--slate);animation:scrollx 32s linear infinite;width:max-content}
.ticker__sep{color:var(--blue);opacity:.6}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* =============================================================
   SECTIONS (generic)
   ============================================================= */
.section{padding:92px 0}
.section__head{max-width:640px;margin-bottom:52px}
.section__head--center{margin-inline:auto;text-align:center}
.section__title{font-size:clamp(1.9rem,3.6vw,2.75rem);letter-spacing:-.03em}
.section__sub{margin-top:18px;color:var(--slate);font-size:1.08rem}

/* ---------- capability cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px 28px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card::after{content:"";position:absolute;inset:auto -40% -60% auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,95,230,.1),transparent 70%);opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(30,95,230,.35)}
.card:hover::after{opacity:1}
.card__ix{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:.78rem;color:var(--slate-2);letter-spacing:.1em}
.card__icon{width:54px;height:54px;border-radius:14px;background:var(--mist);display:grid;place-items:center;margin-bottom:20px;border:1px solid var(--line)}
.card__icon::before{content:"";width:30px;height:30px;background-size:contain;background-repeat:no-repeat;background-position:center}
.card h3{font-size:1.28rem;margin-bottom:10px}
.card p{color:var(--slate);font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags li{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--blue-800);background:var(--mist);border:1px solid var(--line);padding:5px 10px;border-radius:8px}

/* domain icons */
.card__icon[data-domain="blockchain"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.4'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.4'/%3E%3Crect x='8.5' y='14' width='7' height='7' rx='1.4'/%3E%3Cpath d='M9.5 6.5h5M7 10l4 4M17 10l-5 4' stroke-linecap='round'/%3E%3C/svg%3E")}
.card__icon[data-domain="cloud"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 19a4.2 4.2 0 0 1-.4-8.4A5.8 5.8 0 0 1 17.1 9 4 4 0 0 1 17.5 19H6.5Z'/%3E%3Cpath d='M9.5 14.5 12 12l2.5 2.5M12 12v5'/%3E%3C/svg%3E")}
.card__icon[data-domain="mobile"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='3'/%3E%3Cpath d='M10 18.5h4M9.5 5.5h5'/%3E%3C/svg%3E")}
.card__icon[data-domain="ai"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='6.5' y='6.5' width='11' height='11' rx='2.5'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1' fill='%231E5FE6' stroke='none'/%3E%3Cpath d='M9.5 3.5v3M14.5 3.5v3M9.5 17.5v3M14.5 17.5v3M3.5 9.5h3M3.5 14.5h3M17.5 9.5h3M17.5 14.5h3' stroke-linecap='round'/%3E%3C/svg%3E")}
.card__icon[data-domain="devops"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a8 8 0 0 1 13-2.5M20 8a8 8 0 0 1-13 8.5'/%3E%3Cpath d='M17 3.5V7h-3.5M7 20.5V17h3.5'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/svg%3E")}
.card__icon[data-domain="design"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5.5 18.5 8.5 8 19l-4 1 1-4L15.5 5.5Z'/%3E%3Cpath d='M13.5 7.5 16.5 10.5'/%3E%3C/svg%3E")}

/* =============================================================
   TECH MARQUEE
   ============================================================= */
.stack{padding-bottom:96px}
.marquee{position:relative;overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:16px;width:max-content;animation:scrollx 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.tech{
  display:inline-flex;align-items:center;gap:12px;padding:14px 22px 14px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink);white-space:nowrap;
  transition:border-color .25s,transform .25s;
}
.tech:hover{border-color:var(--blue);transform:translateY(-3px)}
.tech::before{content:"";width:26px;height:26px;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center}
.tech[data-tech="ethereum"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E5FE6'%3E%3Cpath d='M12 1.5 5 12.3l7 4.1 7-4.1L12 1.5Z' opacity='.85'/%3E%3Cpath d='M5 13.7 12 22.4l7-8.7-7 4.1-7-4.1Z' opacity='.55'/%3E%3C/svg%3E")}
.tech[data-tech="solidity"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E5FE6'%3E%3Cpath d='m9 3-3 5h4l3-5H9Zm6 0-3 5 3 5 3-5-3-5ZM6 13l3 5h6l-3-5H6Z' opacity='.8'/%3E%3C/svg%3E")}
.tech[data-tech="react"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='2' fill='%231E5FE6' stroke='none'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.2' transform='rotate(120 12 12)'/%3E%3C/svg%3E")}
.tech[data-tech="node"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 2 3.5 7v10L12 22l8.5-5V7L12 2Z'/%3E%3Cpath d='M12 8.5c-1.7 0-2.7.8-2.7 1.9 0 2.4 5.4 1.2 5.4 3.4 0 1-.9 1.7-2.7 1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.tech[data-tech="typescript"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%231E5FE6'/%3E%3Cpath d='M13 11.2h5m-2.5 0V19M6 13.2h4.2M8 13.2V19' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.tech[data-tech="python"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E5FE6'%3E%3Cpath d='M11.9 2c-2.5 0-4 1.2-4 3v2h4.2v.8H6.3c-1.9 0-3.3 1.4-3.3 4s1.2 4 3 4h1.6v-2.3c0-1.9 1.6-3.5 3.5-3.5h3.4c1.6 0 2.8-1.2 2.8-2.8V5c0-1.8-1.8-3-4.4-3Zm-1.6 2.1a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Z' opacity='.85'/%3E%3Cpath d='M12.1 22c2.5 0 4-1.2 4-3v-2h-4.2v-.8h5.8c1.9 0 3.3-1.4 3.3-4s-1.2-4-3-4h-1.6v2.3c0 1.9-1.6 3.5-3.5 3.5H9.5c-1.6 0-2.8 1.2-2.8 2.8V19c0 1.8 1.8 3 5.4 3Zm1.6-2.1a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8Z' opacity='.55'/%3E%3C/svg%3E")}
.tech[data-tech="go"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 9h4M3 12h3'/%3E%3Ccircle cx='13' cy='12' r='5.5'/%3E%3Ccircle cx='13' cy='12' r='1.6' fill='%231E5FE6' stroke='none'/%3E%3C/svg%3E")}
.tech[data-tech="aws"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 8 6l4 2.5v5L8 16l-4-2.5v-5Z'/%3E%3Cpath d='M8 6v10M4 8.5 8 11l4-2.5'/%3E%3Cpath d='M15 18c2.5 1.2 5 1.2 7-.2' stroke-width='1.4'/%3E%3C/svg%3E")}
.tech[data-tech="docker"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E5FE6'%3E%3Crect x='4' y='10' width='3' height='3' rx='.4'/%3E%3Crect x='7.5' y='10' width='3' height='3' rx='.4'/%3E%3Crect x='11' y='10' width='3' height='3' rx='.4'/%3E%3Crect x='7.5' y='6.5' width='3' height='3' rx='.4'/%3E%3Crect x='11' y='6.5' width='3' height='3' rx='.4'/%3E%3Cpath d='M2 13h16c.5 2-1 5-5 5H8c-4 0-6-3-6-5Z' opacity='.7'/%3E%3C/svg%3E")}
.tech[data-tech="kubernetes"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6.5v9L12 21.5 4 15.5v-9L12 2.5Z'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Cpath d='M12 4.5v3.1M12 16.4v3.1M6 9v3M18 9v3' stroke-linecap='round'/%3E%3C/svg%3E")}
.tech[data-tech="postgres"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.5'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6'/%3E%3Cpath d='M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E")}
.tech[data-tech="graphql"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FE6' stroke-width='1.4'%3E%3Cpath d='M12 3 20 7.5v9L12 21 4 16.5v-9L12 3Z'/%3E%3Cpath d='M12 3 4 16.5h16L12 3Z'/%3E%3Ccircle cx='12' cy='3' r='1.4' fill='%231E5FE6' stroke='none'/%3E%3Ccircle cx='4' cy='16.5' r='1.4' fill='%231E5FE6' stroke='none'/%3E%3Ccircle cx='20' cy='16.5' r='1.4' fill='%231E5FE6' stroke='none'/%3E%3C/svg%3E")}

/* =============================================================
   APPROACH
   ============================================================= */
.approach{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.approach__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.approach__intro .btn{margin-top:30px}
.steps{display:grid;gap:14px}
.step{display:flex;gap:22px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 24px;transition:transform .3s var(--ease),border-color .3s}
.step:hover{transform:translateX(6px);border-color:rgba(30,95,230,.4)}
.step__num{font-family:var(--mono);font-size:.95rem;font-weight:500;color:var(--blue);background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:6px 12px;flex:none}
.step h3{font-size:1.16rem;margin-bottom:4px}
.step p{color:var(--slate);font-size:.96rem}

/* =============================================================
   FOUNDERS
   ============================================================= */
.founders{background:var(--paper)}
.founder-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.founder{display:flex;gap:22px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.founder:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.founder__avatar{
  width:76px;height:76px;flex:none;border-radius:20px;position:relative;
  background:linear-gradient(145deg,var(--blue) 0%,var(--blue-800) 60%,var(--aqua) 140%);
  display:grid;place-items:center;box-shadow:0 14px 30px -14px rgba(30,95,230,.7);
}
.founder__avatar::after{content:attr(data-initials);font-family:var(--display);font-weight:700;font-size:1.6rem;color:#fff;letter-spacing:.02em}
.founder__avatar::before{content:"";position:absolute;inset:8px;border-radius:14px;border:1.5px solid rgba(255,255,255,.25)}
.founder__body h3{font-size:1.24rem}
.founder__role{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:5px 0 10px}
.founder__body p:last-child{color:var(--slate);font-size:.96rem}

/* =============================================================
   CTA / CONTACT
   ============================================================= */
.cta{position:relative;background:linear-gradient(160deg,var(--ink) 0%,var(--navy) 100%);color:#fff;overflow:hidden;padding:110px 0}
.cta__crater{
  position:absolute;top:50%;left:50%;width:1000px;height:1000px;transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,rgba(52,214,195,.14),transparent 22%),
    repeating-radial-gradient(circle,transparent 0 48px,rgba(255,255,255,.05) 48px 49px);
  opacity:.7;pointer-events:none;
}
.cta__inner{position:relative;text-align:center;max-width:640px}
.cta__title{font-size:clamp(2.1rem,4.4vw,3.2rem);letter-spacing:-.03em}
.cta__sub{margin:20px auto 38px;color:rgba(226,235,252,.82);font-size:1.12rem;max-width:46ch}
.cta__hint{margin-top:24px;font-size:.92rem;color:rgba(226,235,252,.7)}
.cta__hint a{color:var(--aqua);border-bottom:1px solid rgba(52,214,195,.4)}
.cta__hint a:hover{border-color:var(--aqua)}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{background:var(--navy);color:rgba(226,235,252,.72);padding:64px 0 28px}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand--footer{color:#fff}
.brand--footer .ring{stroke:var(--aqua)}
.brand--footer .dot{fill:var(--aqua)}
.brand--footer .brand__tld{color:rgba(226,235,252,.55)}
.footer__tag{margin-top:16px;font-size:.95rem;max-width:24ch}
.footer__col h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,235,252,.5);margin-bottom:16px;font-weight:500}
.footer__col a{display:block;padding:5px 0;color:rgba(226,235,252,.8);transition:color .2s}
.footer__col a:hover{color:var(--aqua)}
.footer__muted{display:block;margin-top:8px;font-size:.85rem;color:rgba(226,235,252,.45)}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:.82rem;color:rgba(226,235,252,.5)}
.footer__coords{font-family:var(--mono);letter-spacing:.08em}

/* =============================================================
   REVEAL ANIMATION
   ============================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__crater{order:-1}
  .crater{width:min(360px,80vw)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .approach__grid{grid-template-columns:1fr;gap:36px}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .section{padding:68px 0}
  .cards{grid-template-columns:1fr}
  .founder-cards{grid-template-columns:1fr}
  .founder{flex-direction:column;text-align:center;align-items:center}
  .hero__stats{grid-template-columns:1fr;gap:14px}
  .footer__inner{grid-template-columns:1fr}
  .footer__base{flex-direction:column}
  .cta{padding:80px 0}
  .btn--big{font-size:.9rem;padding:1em 1.15em;white-space:normal;word-break:break-word;text-align:center;line-height:1.3}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .marquee__track,.ticker__row{animation:none !important}
}