:root {
  --navy: #102b4b;
  --navy-2: #0b2747;
  --navy-3: #17395d;
  --teal: #2babb8;
  --teal-2: #54c0c8;
  --ink: #13263a;
  --muted: #647386;
  --line: #dbe4ea;
  --soft: #f4f8fa;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(16, 43, 75, .12);
  --radius: 24px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
::selection { background: rgba(43, 171, 184, .2); }

.page-noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .025;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.section { padding: 112px 0; }
.section-soft { background: var(--soft); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(16,43,75,.07);
}
.header-inner { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand img { width: 182px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; color: #30445b; font-size: 14px; font-weight: 650; }
.main-nav > a:not(.nav-cta) { position: relative; padding: 8px 0; }
.main-nav > a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px; background:var(--teal); transition:.25s ease; }
.main-nav > a:not(.nav-cta):hover::after { right: 0; }
.nav-cta { padding: 12px 18px; border-radius: 999px; color: #fff; background: var(--navy); box-shadow: 0 10px 24px rgba(16,43,75,.16); }
.nav-cta:hover { transform: translateY(-1px); background: var(--navy-3); }
.menu-toggle { display: none; border:0; background:transparent; width:42px; height:42px; padding:9px; }
.menu-toggle span { display:block; height:2px; background:var(--navy); margin:5px 0; transition:.25s ease; }

.hero { min-height: calc(100vh - 88px); display: grid; align-items: center; position:relative; overflow:hidden; padding-top: 72px; }
.hero::before { content:""; position:absolute; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle, rgba(43,171,184,.14), rgba(43,171,184,0) 68%); right:-180px; top:-100px; }
.hero::after { content:""; position:absolute; width:380px; height:380px; border-radius:50%; border:1px solid rgba(16,43,75,.08); left:-210px; bottom:-120px; }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.03fr .97fr; gap:64px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:20px; }
.eyebrow span { width:28px; height:2px; background:var(--teal); display:inline-block; }
.hero-slogan { font-size:15px; font-weight:800; letter-spacing:.04em; color:var(--teal); margin:-8px 0 16px; }
.hero h1 { font-size: clamp(48px, 6vw, 78px); line-height:.98; letter-spacing:-.055em; margin:0; color:var(--navy); max-width: 760px; }
.hero h1 em { font-style:normal; color:var(--teal); }
.hero-lead { font-size:19px; line-height:1.62; color:var(--muted); max-width:660px; margin:28px 0 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn { min-height:52px; padding:0 22px; border:1px solid transparent; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; gap:14px; font-size:14px; font-weight:800; transition:.22s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--navy); color:#fff; box-shadow:0 18px 34px rgba(16,43,75,.18); }
.btn-primary:hover { background:var(--navy-3); }
.btn-ghost { border-color:var(--line); background:#fff; color:var(--navy); }
.btn-ghost:hover { border-color:#b8c9d4; box-shadow:0 12px 28px rgba(16,43,75,.07); }
.btn-light { background:#fff; color:var(--navy); border:0; width:100%; }
.hero-trust { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:32px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:#708094; }
.hero-trust i { width:3px; height:3px; border-radius:50%; background:var(--teal); }

.hero-visual { position:relative; min-height:570px; display:grid; place-items:center; }
.radar-card { width:min(100%, 510px); border:1px solid rgba(16,43,75,.09); background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(244,248,250,.92)); border-radius:32px; padding:26px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.radar-card::after { content:""; position:absolute; inset:auto -120px -170px auto; width:350px; height:350px; border-radius:50%; background:rgba(43,171,184,.08); }
.radar-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; position:relative; z-index:2; }
.radar-topline > div { display:flex; flex-direction:column; gap:3px; }
.radar-topline strong { color:var(--navy); font-size:17px; }
.mini-label { color:#8290a0; font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
.pulse-dot { display:inline-flex; align-items:center; gap:6px; color:#378d94; font-size:9px; letter-spacing:.1em; font-weight:900; padding:7px 9px; border-radius:999px; background:rgba(43,171,184,.09); }
.pulse-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(43,171,184,.35); animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 10px rgba(43,171,184,0); } 100% { box-shadow:0 0 0 0 rgba(43,171,184,0); } }
.radar-stage { height:340px; position:relative; display:grid; place-items:center; }
.orbit { position:absolute; border-radius:50%; border:1px solid rgba(16,43,75,.12); }
.orbit-a { width:265px; height:265px; }
.orbit-b { width:175px; height:175px; }
.cross { position:absolute; background:rgba(16,43,75,.07); }
.cross-x { width:285px; height:1px; }
.cross-y { height:285px; width:1px; }
.needle { position:absolute; width:124px; height:124px; border-radius:100% 0 100% 100%; border-top:2px solid var(--teal); transform:rotate(29deg) skew(-13deg); opacity:.75; }
.core { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid rgba(16,43,75,.08); box-shadow:0 10px 28px rgba(16,43,75,.12); position:relative; z-index:3; }
.core span { width:20px; height:20px; border-radius:50%; background:var(--navy); border:5px solid #fff; outline:2px solid var(--teal); }
.radar-tag { position:absolute; padding:7px 10px; font-size:10px; font-weight:800; border-radius:8px; background:#fff; border:1px solid var(--line); color:#637384; box-shadow:0 8px 18px rgba(16,43,75,.06); }
.tag-1 { left:32px; top:96px; }
.tag-2 { right:24px; top:130px; }
.tag-3 { right:54px; bottom:48px; }
.metric-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.metric { background:#fff; border:1px solid rgba(16,43,75,.08); border-radius:14px; padding:13px; }
.metric span { color:var(--teal); font-weight:900; font-size:11px; }
.metric p { margin:3px 0 0; color:var(--navy); font-size:12px; font-weight:800; }
.floating-chip { position:absolute; padding:11px 14px; border-radius:12px; background:#fff; color:var(--navy); font-size:11px; font-weight:850; box-shadow:0 14px 32px rgba(16,43,75,.12); border:1px solid rgba(16,43,75,.07); }
.chip-a { left:-5px; top:120px; transform:rotate(-4deg); }
.chip-b { right:-10px; bottom:110px; transform:rotate(3deg); color:#2c8e96; }

.problem-strip { background:var(--navy); color:#fff; overflow:hidden; }
.problem-strip-inner { min-height:104px; display:flex; align-items:center; gap:48px; }
.problem-strip p { margin:0; min-width:290px; font-size:15px; font-weight:750; color:rgba(255,255,255,.9); }
.marquee { display:flex; align-items:center; gap:18px; white-space:nowrap; color:rgba(255,255,255,.68); font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.marquee b { color:var(--teal); }

.section-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:end; margin-bottom:48px; }
.section-heading h2, .method-intro h2, .impact-copy h2, .about-copy h2, .contact-copy h2 { margin:0; color:var(--navy); font-size:clamp(36px, 4.5vw, 56px); line-height:1.05; letter-spacing:-.045em; }
.section-heading p { margin:0; color:var(--muted); font-size:17px; line-height:1.65; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { background:#fff; border:1px solid rgba(16,43,75,.08); border-radius:20px; padding:28px; min-height:340px; transition:.25s ease; position:relative; overflow:hidden; }
.service-card::before { content:""; position:absolute; width:90px; height:90px; border-radius:50%; background:rgba(43,171,184,.08); top:-48px; right:-35px; transition:.3s ease; }
.service-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(16,43,75,.08); border-color:rgba(43,171,184,.28); }
.service-card:hover::before { transform:scale(1.35); }
.service-icon { display:inline-flex; width:42px; height:42px; border-radius:11px; align-items:center; justify-content:center; color:var(--teal); background:rgba(43,171,184,.09); font-size:11px; font-weight:900; }
.service-card h3 { margin:22px 0 10px; color:var(--navy); font-size:20px; line-height:1.25; }
.service-card p { margin:0; color:var(--muted); font-size:14px; }
.service-card ul { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:8px; color:#42566c; font-size:13px; font-weight:650; }
.service-card li::before { content:"—"; color:var(--teal); margin-right:9px; }

.method-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:92px; align-items:start; }
.method-intro { position:sticky; top:130px; }
.method-intro p { color:var(--muted); font-size:17px; line-height:1.7; margin:24px 0; }
.text-link { color:var(--navy); font-weight:850; font-size:14px; display:inline-flex; align-items:center; gap:10px; }
.text-link span { color:var(--teal); font-size:20px; transition:.2s ease; }
.text-link:hover span { transform:translateX(4px); }
.method-steps { border-top:1px solid var(--line); }
.method-step { display:grid; grid-template-columns:70px 1fr; gap:18px; padding:30px 0; border-bottom:1px solid var(--line); align-items:start; }
.method-step > span { width:44px; height:44px; border-radius:50%; border:1px solid rgba(43,171,184,.35); display:grid; place-items:center; color:var(--teal); font-size:11px; font-weight:900; }
.method-step h3 { margin:0 0 7px; color:var(--navy); font-size:21px; }
.method-step p { margin:0; color:var(--muted); font-size:14px; }

.impact-section { background:var(--navy); color:#fff; overflow:hidden; position:relative; }
.impact-section::before { content:""; position:absolute; width:550px; height:550px; border:1px solid rgba(255,255,255,.07); border-radius:50%; right:-180px; top:-180px; }
.impact-grid { position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.eyebrow-light { color:#dce9ed; }
.impact-copy h2, .contact-copy h2 { color:#fff; }
.impact-copy p { color:rgba(255,255,255,.68); font-size:17px; max-width:520px; margin:24px 0 0; }
.impact-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.impact-card { min-height:170px; border-radius:20px; padding:24px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; justify-content:flex-end; }
.impact-card strong { color:#fff; font-size:20px; }
.impact-card span { margin-top:8px; color:rgba(255,255,255,.62); font-size:13px; line-height:1.5; }

.about-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; }
.about-mark { min-height:480px; border-radius:28px; background:var(--soft); position:relative; overflow:hidden; display:grid; place-items:center; border:1px solid rgba(16,43,75,.06); }
.big-v { font-size:280px; line-height:1; font-weight:950; color:var(--navy); letter-spacing:-.1em; transform:translateX(-8px); }
.about-compass { position:absolute; width:120px; height:120px; border-radius:50%; right:70px; top:85px; background:#fff; border:18px solid var(--teal); box-shadow:0 18px 35px rgba(16,43,75,.1); }
.about-compass::before, .about-compass::after { content:""; position:absolute; background:var(--navy); left:50%; top:50%; transform:translate(-50%,-50%); }
.about-compass::before { width:150px; height:10px; clip-path:polygon(0 50%,42% 0,42% 35%,100% 50%,42% 65%,42% 100%); }
.about-compass::after { width:10px; height:150px; clip-path:polygon(50% 0,100% 42%,65% 42%,50% 100%,35% 42%,0 42%); }
.about-compass span { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--navy); left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; }
.about-copy p { color:var(--muted); font-size:17px; line-height:1.75; margin:22px 0 0; }
.about-pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.about-pill-row span { border:1px solid var(--line); border-radius:999px; padding:8px 12px; color:#4a5d72; font-size:12px; font-weight:750; }

.contact-section { background:linear-gradient(135deg, #0b2747 0%, #13375b 100%); color:#fff; position:relative; overflow:hidden; }
.contact-section::after { content:""; position:absolute; width:460px; height:460px; border-radius:50%; background:rgba(43,171,184,.09); left:-180px; bottom:-240px; }
.contact-grid { position:relative; z-index:1; display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.contact-copy p { color:rgba(255,255,255,.68); font-size:17px; line-height:1.7; margin:24px 0; }
.contact-points { display:grid; gap:12px; margin-top:34px; }
.contact-points span { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.8); font-size:13px; font-weight:700; }
.contact-points b { width:30px; height:30px; border:1px solid rgba(84,192,200,.45); color:var(--teal-2); border-radius:50%; display:grid; place-items:center; font-size:9px; }
.contact-form { background:#fff; color:var(--ink); padding:30px; border-radius:24px; box-shadow:0 28px 65px rgba(0,0,0,.16); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form label { display:grid; gap:8px; color:#344a61; font-size:12px; font-weight:800; margin-bottom:14px; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid #d8e2e8; border-radius:12px; background:#f9fbfc; color:var(--ink); padding:13px 14px; outline:none; resize:vertical; transition:.2s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(43,171,184,.09); }
.contact-form .btn-light { background:var(--navy); color:#fff; margin-top:4px; }
.form-status { margin:12px 0 0; min-height:20px; font-size:12px; color:#567086; }

.site-footer { background:#081f38; color:rgba(255,255,255,.64); padding:48px 0; }
.footer-inner { display:grid; grid-template-columns:1fr auto; gap:28px 60px; align-items:start; }
.footer-inner img { width:150px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:14px; }
.footer-inner > div:first-child p { margin:0; max-width:420px; font-size:13px; }
.footer-inner > div:first-child .footer-slogan { color:#fff; font-size:15px; font-weight:800; margin-bottom:5px; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; font-size:12px; font-weight:750; color:rgba(255,255,255,.78); }
.copyright { grid-column:1/-1; padding-top:24px; margin:0; border-top:1px solid rgba(255,255,255,.08); font-size:11px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.09s; }
.reveal-delay-2 { transition-delay:.18s; }

@media (max-width: 980px) {
  .section { padding:86px 0; }
  .menu-toggle { display:block; z-index:60; }
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .main-nav {
    position: fixed;
    top: 88px;
    left: 0;
    right: 0;
    bottom: 0;

    height: calc(100dvh - 88px);

    background: #fff;
    z-index: 55;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 24px;

    transform: translateX(100%);
  }
}
  .main-nav.open { transform:translateX(0); }
  .nav-cta { margin-top:8px; }
  .menu-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .hero { min-height:auto; }
  .hero-grid, .section-heading, .method-grid, .impact-grid, .about-grid, .contact-grid { grid-template-columns:1fr; }
  .hero-grid { gap:24px; }
  .hero-visual { min-height:500px; }
  .section-heading { gap:20px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .method-grid, .impact-grid, .about-grid, .contact-grid { gap:50px; }
  .method-intro { position:static; }
  .about-mark { min-height:420px; }
}

@media (max-width: 680px) {
  .container { width:min(100% - 30px, var(--container)); }
  .header-inner { height:76px; }
  .brand img { width:150px; }
  .main-nav {
    top: 76px;
    height: calc(100dvh - 76px);
  }
  .section { padding:72px 0; }
  .hero { padding:56px 0 76px; }
  .hero h1 { font-size:47px; }
  .hero-lead { font-size:16px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-trust { gap:9px; font-size:10px; }
  .hero-visual { min-height:420px; }
  .radar-card { padding:18px; border-radius:24px; }
  .radar-stage { height:270px; }
  .orbit-a { width:220px; height:220px; }
  .orbit-b { width:145px; height:145px; }
  .cross-x { width:235px; }
  .cross-y { height:235px; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .floating-chip { display:none; }
  .problem-strip-inner { display:block; padding:25px 0; }
  .problem-strip p { min-width:0; margin-bottom:14px; }
  .marquee { overflow:hidden; width:100%; }
  .section-heading h2, .method-intro h2, .impact-copy h2, .about-copy h2, .contact-copy h2 { font-size:38px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:0; }
  .method-step { grid-template-columns:56px 1fr; }
  .impact-cards { grid-template-columns:1fr; }
  .about-mark { min-height:330px; }
  .big-v { font-size:205px; }
  .about-compass { width:90px; height:90px; right:38px; top:58px; border-width:14px; }
  .about-compass::before { width:112px; }
  .about-compass::after { height:112px; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .contact-form { padding:20px; }
  .footer-inner { grid-template-columns:1fr; }
  .copyright { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}