:root {
  --cyan: #00D0FF;
  --cyan-600: #00A8CC;
  --navy-900: #0a1422;
  --navy-800: #0d192b;
  --navy-700: #14233b;
  --navy-600: #1f2f47;
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', sans-serif; background: #fff; color: #0d192b; overflow-x: hidden; }

h1, h2, h3, h4, .font-display { font-family: 'Sora', sans-serif; }

/* ---- type rhythm ---- */
.display-1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.display-2 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; }
.display-3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; }
.lead { font-size: 1.05rem; line-height: 1.7; }

/* ---- grain overlay ---- */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: overlay;
}

/* ---- cyan glass "ribbon" hero visual ---- */
.hero-wrap { background:
    radial-gradient(120% 90% at 78% 18%, rgba(0,208,255,0.32) 0%, rgba(0,168,204,0.10) 34%, rgba(13,25,43,0) 60%),
    radial-gradient(90% 120% at 12% 6%, rgba(0,208,255,0.16) 0%, rgba(13,25,43,0) 48%),
    linear-gradient(160deg, #0a1422 0%, #0d1e34 45%, #102742 100%);
}
.orb { position: absolute; border-radius: 9999px; filter: blur(2px); pointer-events: none; }
.disc {
  position: absolute; border-radius: 9999px; transform-style: preserve-3d;
  background:
    radial-gradient(60% 60% at 38% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0) 55%),
    conic-gradient(from 210deg, rgba(0,208,255,0.0), rgba(0,208,255,0.55), rgba(92,224,255,0.18), rgba(0,168,204,0.6), rgba(0,208,255,0.0));
  box-shadow: 0 30px 80px -20px rgba(0,208,255,0.45), inset 0 0 60px rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  opacity: 0.95;
}
.glow-soft { background: radial-gradient(circle at 50% 50%, rgba(0,208,255,0.55), rgba(0,208,255,0) 70%); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem;
       border-radius: 9999px; padding: 0.7rem 0.85rem 0.7rem 1.25rem; transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), background-color .25s ease, color .25s ease; cursor: pointer; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn .chip { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 9999px; transition: transform .35s var(--ease-spring); }
.btn:hover .chip { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-cyan { background: var(--cyan); color: #06121f; box-shadow: 0 10px 24px -8px rgba(0,208,255,0.55); }
.btn-cyan:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(0,208,255,0.7); }
.btn-cyan .chip { background: #06121f; color: var(--cyan); }

.btn-light { background: #fff; color: #0d192b; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,0,0,0.4); }
.btn-light .chip { background: #0d192b; color: #fff; }

.btn-dark { background: #0d192b; color: #fff; }
.btn-dark:hover { transform: translateY(-2px); background: #14233b; }
.btn-dark .chip { background: var(--cyan); color: #06121f; }

.btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.14); }
.btn-ghost .chip { background: rgba(255,255,255,0.9); color: #06121f; }

/* ---- nav ---- */
.nav-link { font-size: 0.92rem; color: rgba(255,255,255,0.78); transition: color .2s ease; position: relative; }
.nav-link:hover { color: #fff; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--cyan); transition: width .3s var(--ease-spring); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #fff; }
.nav-link.active::after { width: 100%; }

/* ---- cards / surfaces ---- */
.card-dark { background: linear-gradient(180deg, #0f2138 0%, #0c1828 100%); border: 1px solid rgba(255,255,255,0.07); border-radius: 28px; }
.feature-img { position: relative; overflow: hidden; border-radius: 20px; background: linear-gradient(150deg, #0a1828, #0d2640); }
.cyan-scene { background:
    radial-gradient(70% 80% at 30% 25%, rgba(92,224,255,0.55), rgba(0,208,255,0) 55%),
    radial-gradient(80% 90% at 75% 80%, rgba(0,168,204,0.45), rgba(13,25,43,0) 60%),
    linear-gradient(140deg, #06304a 0%, #0a1c30 100%); }

/* bespoke SVG scene illustrations (fill their container) */
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* logo cloud chips */
.logo-chip { display:flex; align-items:center; justify-content:center; height: 92px; border-radius: 16px;
  background: #f1f5f9; color: #94a3b8; font-weight: 600; letter-spacing: 0.02em; transition: background .25s ease, color .25s ease, transform .35s var(--ease-spring); }
.logo-chip:hover { background: #e7edf3; color: #475569; transform: translateY(-3px); }

/* card link (services grid) */
.link-card { background: #f1f5f9; border-radius: 22px; border: 1px solid transparent; transition: transform .35s var(--ease-spring), border-color .25s ease, background .25s ease; }
.link-card:hover { transform: translateY(-4px); border-color: rgba(0,208,255,0.4); background: #eef4f9; }

/* stat cards */
.stat-card { background: #f1f5f9; border-radius: 22px; }

/* pricing */
.price-card { background: linear-gradient(180deg, #10233b 0%, #0b1726 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring); }
.price-card:hover { transform: translateY(-4px); }
.price-pop { background: linear-gradient(180deg, #0c2c44 0%, #0a1b2c 100%); border: 1px solid rgba(0,208,255,0.45); box-shadow: 0 30px 70px -30px rgba(0,208,255,0.5); }

.check { color: var(--cyan); flex: none; }

/* dashboard mockup */
.dash { background: #0a1726; border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; }
.dash-panel { background: #0e2034; border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; }
.dash-nav { color: rgba(255,255,255,0.55); }
.dash-nav.active { color: #fff; }

/* form */
.field { width: 100%; border: 1px solid #d8e0ea; border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.95rem; color: #0d192b; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.field:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,208,255,0.15); }
.field::placeholder { color: #94a3b8; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* floating brand badge */
.badge-float { position: fixed; right: 18px; top: 42%; z-index: 60; width: 46px; height: 46px; border-radius: 12px;
  background: #0d192b; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,208,255,0.4); }

.gradient-text { background: linear-gradient(100deg, #5ce0ff, #00D0FF 55%, #00A8CC); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* =================== workflow demo =================== */
.demo-rail { position: relative; min-height: 320px; }
.demo-rail::before { content: ""; position: absolute; left: 19px; top: 28px; bottom: 28px; width: 2px; background: rgba(255,255,255,0.08); }
.demo-progress { position: absolute; left: 19px; top: 28px; width: 2px; border-radius: 2px; height: calc(var(--p, 0) * (100% - 56px)); background: linear-gradient(#5ce0ff, #00A8CC); box-shadow: 0 0 12px rgba(0,208,255,0.6); transition: height .9s var(--ease-spring); }
.demo-step { position: relative; display: flex; gap: 1rem; padding: 0.55rem 0; opacity: 0.4; transition: opacity .4s ease; }
.demo-step.active, .demo-step.done { opacity: 1; }
.demo-node { position: relative; z-index: 2; flex: none; width: 40px; height: 40px; border-radius: 9999px; background: #0e2236; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); transition: all .4s var(--ease-spring); }
.demo-step.active .demo-node { background: #00D0FF; color: #06121f; border-color: #00D0FF; box-shadow: 0 0 0 6px rgba(0,208,255,0.15); }
.demo-step.done .demo-node { background: rgba(0,208,255,0.15); color: #00D0FF; border-color: rgba(0,208,255,0.5); }
.demo-title { color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.98rem; }
.demo-detail { color: rgba(255,255,255,0.5); font-size: 0.82rem; margin-top: 0.1rem; }
.demo-visual { margin-top: 0.7rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .55s var(--ease-spring), opacity .4s ease; }
.demo-step.active .demo-visual { max-height: 240px; opacity: 1; }

.wave { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.wave span { width: 3px; height: 100%; background: #00D0FF; border-radius: 2px; transform: scaleY(0.3); transform-origin: bottom; opacity: 0.85; }
.demo-step.active .wave span { animation: wavepulse 1s ease-in-out infinite; }
.wave span:nth-child(3n) { animation-delay: .12s; }
.wave span:nth-child(3n+1) { animation-delay: .26s; }
.wave span:nth-child(4n) { animation-delay: .4s; }
.rec-dot { width: 8px; height: 8px; border-radius: 9999px; background: #ff5a5a; }
.demo-step.active .rec-dot { animation: blink 1.2s ease-in-out infinite; }
.bar { height: 7px; border-radius: 7px; background: rgba(255,255,255,0.1); overflow: hidden; max-width: 260px; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, #5ce0ff, #00A8CC); transition: width 1.8s var(--ease-spring); }
.demo-step.active .bar > i { width: 100%; }
.line-in { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-spring), transform .5s var(--ease-spring); }
.demo-step.active .line-in { opacity: 1; transform: none; }
.mailcard { background: #0b1b2c; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0.7rem 0.85rem; max-width: 360px; }
.type-line { overflow: hidden; white-space: nowrap; width: 0; transition: width 1s steps(30); }
.demo-step.active .type-line { width: 100%; }
.approve-btn { display: inline-block; background: #00D0FF; color: #06121f; font-weight: 600; font-size: 0.8rem; padding: 0.4rem 1.1rem; border-radius: 9999px; }
.demo-step.active .approve-btn { animation: clickpulse 1.3s var(--ease-spring); }
.sent-badge { color: #00D0FF; font-weight: 600; font-size: 0.82rem; opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s ease; transition-delay: .9s; }
.demo-step.active .sent-badge { opacity: 1; transform: none; }

@keyframes wavepulse { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes clickpulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(0.94); } }

@media (prefers-reduced-motion: reduce) {
  .demo-progress { transition: none; }
  .demo-visual { transition: none; }
}

/* =================== blog / article prose =================== */
.article { color: #334155; }
.article > * + * { margin-top: 1.15rem; }
.article h2 { font-family: 'Sora', sans-serif; font-weight: 700; color: #0d192b; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.2; margin-top: 2.4rem; }
.article h3 { font-family: 'Sora', sans-serif; font-weight: 600; color: #0d192b; font-size: 1.25rem; margin-top: 1.8rem; }
.article h2:first-child, .article h3:first-child { margin-top: 0; }
.article p { line-height: 1.8; font-size: 1.05rem; }
.article ul, .article ol { padding-left: 1.3rem; }
.article ul li { list-style: disc; }
.article ol li { list-style: decimal; }
.article li { line-height: 1.8; margin-top: 0.4rem; }
.article a { color: #00A8CC; text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: #0d192b; }
.article strong { color: #0d192b; font-weight: 600; }
.article blockquote { border-left: 3px solid #00D0FF; padding: 0.3rem 0 0.3rem 1.2rem; color: #475569; font-style: italic; }
.article code { background: #eef3f8; padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.92em; }
.article img { border-radius: 14px; max-width: 100%; height: auto; }
.article hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2rem 0; }