:root {
  --brand-blue: #1688F8;
  --brand-cyan: #43C6F5;
  --ink: #071A3B;
  --muted: #5F7396;
  --pale: #F2F8FF;
  --border: #CDE7FF;
  --white: #fff;
  --shadow: 0 18px 48px rgba(22, 136, 248, .12);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--pale); }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg,#fafdff 0,#f2f8ff 38%,#fff 100%); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: #0879e7; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img,svg { max-width: 100%; }
.skip-link { position:absolute; left:-9999px; top:8px; z-index:999; background:#fff; color:var(--ink); padding:10px 14px; border-radius:12px; border:2px solid var(--brand-blue); }
.skip-link:focus { left:12px; }
.site-header { position: sticky; top:0; z-index:50; backdrop-filter: blur(18px); background: rgba(250,253,255,.88); border-bottom:1px solid rgba(22,136,248,.12); }
.nav { max-width:var(--max); margin:auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-weight:850; letter-spacing:-.02em; font-size:1.18rem; }
.brand-mark { width:38px; height:38px; border-radius:13px; display:block; flex:0 0 auto; font-size:0; color:transparent; background:url('/assets/logo-mark.svg') center/contain no-repeat; filter: drop-shadow(0 8px 16px rgba(22,136,248,.18)); }
.nav-links { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.nav-links a { color:var(--muted); text-decoration:none; font-weight:700; font-size:.93rem; }
.nav-links a:hover,.nav-links a:focus { color:var(--brand-blue); }
.container { max-width:var(--max); margin:auto; padding:0 24px; }
.hero { padding:84px 0 64px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:50px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); color:#0f73cc; border-radius:999px; padding:8px 12px; font-weight:800; font-size:.84rem; box-shadow:0 8px 24px rgba(22,136,248,.07); }
h1 { font-size:clamp(2.75rem,6vw,5.4rem); line-height:.98; letter-spacing:-.055em; margin:18px 0 22px; }
.hero h1 span { background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--muted); font-size:clamp(1.05rem,2vw,1.24rem); max-width:680px; margin:0 0 28px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:0 20px; border-radius:15px; font-weight:850; text-decoration:none; border:1px solid transparent; background-clip:padding-box; }
.button-primary { color:#fff; border:0; background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan)); box-shadow:0 12px 28px rgba(22,136,248,.23); overflow:hidden; }
.button-secondary { color:var(--ink); background:#fff; border-color:var(--border); }
.button-on-dark { color:var(--ink); background:#fff; border:0; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.hero-card { background:#fff; border:1.5px solid var(--border); border-radius:32px; padding:22px; box-shadow:var(--shadow); overflow:hidden; }
.phone { border:1px solid #dbeeff; border-radius:28px; overflow:hidden; background:linear-gradient(180deg,#fff,#f4f9ff); padding:18px; }
.stat-card,.task-card { background:#fff; border:1.3px solid var(--border); border-radius:20px; padding:18px; box-shadow:0 10px 26px rgba(22,136,248,.08); margin:12px 0; }
.progress { height:10px; background:#eaf5ff; border-radius:999px; overflow:hidden; margin-top:12px; }
.progress span { display:block; height:100%; width:72%; background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan)); border-radius:inherit; }
.section { padding:74px 0; }
.section-soft { background:rgba(255,255,255,.7); border-top:1px solid rgba(22,136,248,.08); border-bottom:1px solid rgba(22,136,248,.08); }
.section-title { max-width:760px; margin:0 auto 36px; text-align:center; }
.section-title h2 { font-size:clamp(2rem,4vw,3.15rem); letter-spacing:-.04em; margin:0 0 12px; }
.section-title p { color:var(--muted); margin:0; font-size:1.06rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature { background:#fff; border:1.4px solid var(--border); border-radius:var(--radius-lg); padding:24px; box-shadow:0 12px 32px rgba(22,136,248,.07); }
.feature-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan)); margin-bottom:18px; box-shadow:0 8px 20px rgba(22,136,248,.18); }
.feature-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.feature h3 { margin:0 0 8px; font-size:1.17rem; }
.feature p { margin:0; color:var(--muted); }
.loop-section { position:relative; overflow:hidden; background:radial-gradient(circle at 50% 54%, rgba(67,198,245,.14), transparent 34%), linear-gradient(180deg,#fff,#f5faff 58%,#fff); }
.learning-loop { position:relative; min-height:520px; max-width:980px; margin:0 auto; }
.loop-orbit { position:absolute; width:330px; height:330px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:2px solid rgba(22,136,248,.28); box-shadow:0 0 0 18px rgba(22,136,248,.035), 0 0 70px 24px rgba(67,198,245,.18), inset 0 0 46px rgba(22,136,248,.08); animation:loopPulse 4.5s ease-in-out infinite; }
.loop-orbit::before,.loop-orbit::after { content:""; position:absolute; inset:34px; border-radius:50%; border:1px solid rgba(67,198,245,.28); }
.loop-orbit::after { inset:70px; border-color:rgba(22,136,248,.18); }
.loop-core { position:absolute; width:210px; height:210px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px; color:#fff; background:radial-gradient(circle at 35% 28%,#69d5fb 0,#2db2ef 28%,#1688f8 72%,#0968ca 100%); box-shadow:0 28px 70px rgba(22,136,248,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.loop-core-kicker { font-size:.72rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; opacity:.84; }
.loop-core strong { font-size:1.45rem; margin:4px 0; letter-spacing:-.03em; }
.loop-core > span:last-child { font-size:.78rem; opacity:.86; }
.loop-node { position:absolute; min-width:170px; padding:13px 16px; display:flex; gap:9px; align-items:center; background:rgba(255,255,255,.92); border:1.2px solid var(--border); border-radius:18px; box-shadow:0 14px 34px rgba(22,136,248,.10); backdrop-filter:blur(12px); }
.loop-node span { width:28px; height:28px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; color:#0879e7; background:#edf7ff; font-size:.68rem; font-weight:900; }
.loop-node strong { font-size:.94rem; }
.loop-node-1 { left:3%; top:48%; }
.loop-node-2 { left:15%; top:13%; }
.loop-node-3 { right:15%; top:13%; }
.loop-node-4 { right:3%; top:48%; }
.loop-node-5 { left:50%; bottom:5%; transform:translateX(-50%); }
.spark { position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(67,198,245,.28),0 0 22px 8px rgba(67,198,245,.48); left:50%; top:50%; margin:-5px; transform-origin:5px 5px; }
.spark-a { animation:orbitA 6s linear infinite; }
.spark-b { width:6px; height:6px; margin:-3px; animation:orbitB 8s linear infinite -2s; }
.spark-c { width:5px; height:5px; margin:-2.5px; animation:orbitC 7s linear infinite -4s; }
@keyframes loopPulse { 0%,100% { box-shadow:0 0 0 18px rgba(22,136,248,.035),0 0 70px 24px rgba(67,198,245,.16),inset 0 0 46px rgba(22,136,248,.08); } 50% { box-shadow:0 0 0 24px rgba(22,136,248,.045),0 0 95px 34px rgba(67,198,245,.24),inset 0 0 58px rgba(22,136,248,.12); } }
@keyframes orbitA { from { transform:rotate(0deg) translateX(164px) rotate(0deg); } to { transform:rotate(360deg) translateX(164px) rotate(-360deg); } }
@keyframes orbitB { from { transform:rotate(90deg) translateX(145px) rotate(-90deg); } to { transform:rotate(450deg) translateX(145px) rotate(-450deg); } }
@keyframes orbitC { from { transform:rotate(210deg) translateX(178px) rotate(-210deg); } to { transform:rotate(570deg) translateX(178px) rotate(-570deg); } }
.trust { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.trust-card { background:#071a3b; color:#fff; border-radius:28px; padding:30px; overflow:hidden; position:relative; }
.trust-card.light { background:#fff; color:var(--ink); border:1.5px solid var(--border); }
.trust-card p { color:#d3e1f7; }
.trust-card.light p { color:var(--muted); }
.privacy-glance { background:radial-gradient(circle at 82% 18%,rgba(67,198,245,.32),transparent 26%),linear-gradient(145deg,#071a3b,#0a2b59 58%,#0a4f8e); }
.card-kicker { display:inline-block; margin-bottom:9px; font-size:.76rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; color:#84dcff; }
.trust-card.light .card-kicker { color:#0879e7; }
.legal-shell { max-width:900px; margin:56px auto 84px; background:#fff; border:1.4px solid var(--border); border-radius:28px; padding:clamp(24px,5vw,54px); box-shadow:var(--shadow); }
.legal-shell h1 { font-size:clamp(2.25rem,5vw,3.7rem); margin-top:0; }
.legal-shell h2 { margin-top:2.2rem; font-size:1.65rem; letter-spacing:-.025em; }
.legal-shell h3 { margin-top:1.6rem; }
.legal-shell p,.legal-shell li { color:#233b5d; }
.legal-shell table { border-collapse:collapse; width:100%; overflow:auto; display:block; margin:20px 0; }
.legal-shell th,.legal-shell td { border:1px solid #dbeeff; padding:10px 12px; text-align:left; vertical-align:top; }
.legal-shell th { background:#f4f9ff; color:var(--ink); }
.legal-shell blockquote { margin:18px 0; padding:14px 18px; border-left:4px solid var(--brand-blue); background:#f5faff; color:#24496e; }
.legal-shell code { background:#eff7ff; padding:.1em .35em; border-radius:6px; }
.notice { background:#f2f8ff; border:1px solid var(--border); border-radius:16px; padding:16px 18px; color:#274a70; }
footer { background:#071a3b; color:#dbe7f6; padding:42px 0; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px; }
footer a { color:#fff; }
footer p { color:#b9cbe0; }
.small { font-size:.88rem; color:var(--muted); }
.brand-inverse { color:#fff; }
.footer-small { color:#9fb4cf; }
.mt-18 { margin-top:18px; }
.actions-center { justify-content:center; }
@media (max-width:900px) {
  .hero-grid,.trust { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .hero-card { max-width:560px; }
  .learning-loop { min-height:610px; max-width:680px; }
  .loop-node-1 { left:0; top:50%; }
  .loop-node-2 { left:4%; top:10%; }
  .loop-node-3 { right:4%; top:10%; }
  .loop-node-4 { right:0; top:50%; }
  .loop-node-5 { bottom:2%; }
}
@media (max-width:640px) {
  .nav { align-items:flex-start; }
  .nav-links { gap:12px; justify-content:flex-end; }
  .nav-links .optional { display:none; }
  .hero { padding-top:56px; }
  .grid-3,.footer-grid { grid-template-columns:1fr; }
  .legal-shell { margin:24px 12px 56px; border-radius:22px; }
  h1 { font-size:clamp(2.55rem,14vw,4rem); }
  .learning-loop { display:grid; min-height:0; gap:10px; padding:6px 0; }
  .loop-orbit,.loop-core { display:none; }
  .loop-node { position:static; transform:none; min-width:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}