/* ====================================================================
   OneDeveloperWay - Redesign 1e
   Design tokens adapted from the OneDeveloperWay design system.
   ==================================================================== */
@font-face {
    font-family:"Harabara Mais";
    src:url("../assets/fonts/HarabaraMaisDemo.ttf") format("truetype");
    font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face {
    font-family:"Nunito";
    src:url("../assets/fonts/nunito-latin.woff2") format("woff2");
    font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face {
    font-family:"JetBrains Mono";
    src:url("../assets/fonts/jetbrainsmono-latin.woff2") format("woff2");
    font-weight:100 800; font-style:normal; font-display:swap;
}
:root {
    --brand-50:#E6F7FE; --brand-100:#CDEEFC; --brand-200:#ACE1FA; --brand-500:#44C8F5;
    --brand-700:#00B3F0; --brand-800:#009FDB; --brand-900:#0084B6; --brand-950:#006890;
    --navy-900:#00374F; --navy-950:#001F2E;
    --ink:#0E1A22; --ink-2:#34424B; --ink-3:#5A6772; --ink-4:#929496;
    --line:#E5ECF1; --line-2:#D4DEE6; --fog:#F5F8FA; --paper:#FFFFFF;
    --font-display:"Harabara Mais", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:"JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --shadow-1:0 1px 2px rgba(0,35,60,.06), 0 1px 4px rgba(0,35,60,.04);
    --shadow-2:0 8px 24px rgba(0,35,60,.08), 0 2px 6px rgba(0,35,60,.06);
    --ease-out:cubic-bezier(.2,.8,.2,1);
    --max-w:1360px;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    margin:0; background:var(--fog); color:var(--ink);
    font-family:var(--font-sans); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a { color:var(--brand-900); text-decoration:none; }
a:hover { color:var(--brand-950); }
img { max-width:100%; }
h1,h2,h3,h4 { margin:0; }

.shell {
    max-width:var(--max-w); margin:0 auto; background:var(--paper);
    border-left:1px solid var(--line); border-right:1px solid var(--line);
}

/* ---- utility type ---- */
.display {
    font-family:var(--font-display); font-weight:600;
    letter-spacing:-0.02em; text-transform:lowercase; line-height:1.04;
}
.eyebrow {
    font:600 12px/1 var(--font-sans); text-transform:uppercase;
    letter-spacing:.14em; color:var(--brand-900);
}

/* ---- buttons ---- */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:600; line-height:1; border-radius:8px; cursor:pointer;
    transition:all 180ms var(--ease-out); border:1px solid transparent;
    text-decoration:none;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--brand-700); color:#fff; }
.btn-primary:hover { background:var(--brand-800); color:#fff; }
.btn-ghost { background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover { background:var(--fog); color:var(--ink); }
.btn-lg { font-size:15px; padding:14px 22px; }
.btn-sm { font-size:14px; padding:12px 18px; }

/* ---- nav ---- */
.nav {
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; height:64px; padding:0 40px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
}
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height:38px; width:38px; object-fit:contain; display:block; }
.brand-word {
    font-family:var(--font-display); font-weight:500; font-size:21px;
    color:var(--ink-4); letter-spacing:.01em; white-space:nowrap;
}
.nav-cta { display:flex; align-items:center; gap:12px; }

/* ---- sections ---- */
section { scroll-margin-top:72px; }
.pad { padding:72px 40px; }

/* ---- hero ---- */
.hero {
    padding:72px 40px 80px;
    display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
}
.chips {
    display:inline-flex; flex-wrap:wrap; background:var(--fog);
    border:1px solid var(--line-2); border-radius:999px; padding:4px; gap:2px;
    margin:18px 0 30px;
}
.chip {
    font:600 13.5px/1 var(--font-sans); padding:11px 18px; border-radius:999px;
    cursor:pointer; transition:all 180ms var(--ease-out); border:none;
    background:transparent; color:var(--ink-3);
}
.chip:hover { color:var(--ink); }
.chip.active { background:var(--navy-950); color:#fff; }
.hero h1 {
    font-size:60px; letter-spacing:-0.02em; color:var(--ink);
    margin:0 0 20px; min-height:126px;
}
.hero h1 .accent { color:var(--brand-800); }
.hero .lead {
    font-size:18px; line-height:1.6; color:var(--ink-2);
    max-width:520px; margin:0 0 32px; min-height:112px;
}
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero-art { display:flex; align-items:center; justify-content:center; }
.hero-art img {
    width:100%; max-width:340px; height:auto; object-fit:contain;
    animation:spin-in 1.2s var(--ease-out) both;
}
@keyframes spin-in { from{transform:rotate(-45deg);opacity:0} to{transform:rotate(0);opacity:1} }

/* ---- services ---- */
.services { background:var(--fog); }
/* route continues the same gray region below, so the cards->route gap is
   owned solely by .route-wrap's top padding (compound selector keeps this
   winning over the responsive .pad rule at every breakpoint). */
.services.pad { padding-bottom:0; }
.services h2 { font-size:40px; color:var(--ink); margin:0 0 14px; letter-spacing:-0.01em; }
.section-lead { font-size:17px; color:var(--ink-2); max-width:960px; margin:0 0 40px; line-height:1.55; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.svc-card {
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:24px; box-shadow:var(--shadow-1); transition:all 180ms var(--ease-out);
}
.svc-card:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.svc-card.featured { border-color:var(--brand-200); }
.svc-ico {
    width:36px; height:36px; border-radius:10px; background:var(--brand-50);
    color:var(--brand-900); display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
}
.svc-card.featured .svc-ico { background:var(--brand-700); color:#fff; }
.svc-card h3 { font:600 17px var(--font-sans); margin:0 0 3px; color:var(--ink); }
.svc-tag { font:500 10.5px/1 var(--font-mono); color:var(--ink-3); letter-spacing:.08em; margin-bottom:10px; }
.svc-card.featured .svc-tag { color:var(--brand-900); }
.svc-item { padding:8px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-2); }

/* ---- route ---- */
.route-wrap { padding:56px 40px 72px; background:var(--fog); }
.route {
    border:1px solid var(--line); border-radius:16px; padding:44px 48px; background:#fff;
}
.route-eyebrow { margin-bottom:28px; }
.route-grid { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.route-line { position:absolute; left:24px; right:24px; top:17px; border-top:2px dashed var(--line-2); }
.route-step { position:relative; }
.route-num {
    width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:14px;
    box-shadow:0 0 0 4px #fff; box-sizing:border-box;
}
.route-num.filled { background:var(--brand-700); color:#fff; }
.route-num.hollow { background:#fff; border:2px solid var(--brand-700); color:var(--brand-900); }
.route-step h4 { font:700 16px var(--font-sans); margin:0 0 4px; color:var(--ink); }
.route-step p { font-size:13.5px; line-height:1.5; color:var(--ink-3); margin:0; }

/* ---- AI lane (dark) ---- */
.ai { background:var(--navy-950); }
.ai .kicker { font:500 12px/1 var(--font-mono); letter-spacing:.1em; color:var(--brand-500); margin-bottom:16px; }
.ai h2 { font-size:40px; color:#fff; margin:0 0 14px; }
.ai .lead { font-size:16px; color:rgba(230,240,245,.78); max-width:560px; margin:0 0 44px; line-height:1.6; }
.ai-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ai-card {
    border:1px solid rgba(68,200,245,.25); border-top:2px solid var(--brand-700);
    border-radius:12px; padding:22px; background:rgba(0,55,79,.35);
}
.ai-card h3 { font:700 16px var(--font-sans); color:#fff; margin:0 0 8px; }
.ai-card p { font-size:13.5px; line-height:1.55; color:rgba(230,240,245,.7); margin:0; }

/* ---- CTA ---- */
.cta-wrap { padding:56px 40px; }
.cta {
    background:var(--navy-950); color:#fff; border-radius:16px; padding:48px 56px;
    display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:40px;
}
.cta h2 { font-size:38px; color:#fff; margin:0 0 8px; }
.cta p { color:var(--brand-200); margin:0; max-width:480px; font-size:15px; line-height:1.55; }
.cta-sign { width:264px; }
.cta-journey { display:flex; align-items:center; gap:10px; }
.cta-node { font-family:var(--font-mono); font-weight:500; font-size:19px; line-height:1; color:#fff; text-transform:lowercase; letter-spacing:.02em; }
.cta-track { position:relative; flex:1; display:flex; align-items:center; }
.cta-brand { position:absolute; font:500 10px/1 var(--font-mono); letter-spacing:.2em; color:var(--brand-500); white-space:nowrap; }
.cta-brand-top { left:0; right:0; bottom:calc(100% + 8px); text-align:center; }
.cta-brand-bottom { left:0; right:0; top:calc(100% + 8px); text-align:center; }
.cta-line { flex:1; height:2px; border-radius:2px; background:var(--brand-700); transform:scaleX(0); transform-origin:left center; animation:cta-draw 800ms var(--ease-out) 300ms forwards; }
.cta-arrow { flex:none; display:block; color:var(--brand-700); opacity:0; animation:cta-fade 300ms var(--ease-out) 1000ms forwards; }
@keyframes cta-draw { to { transform:scaleX(1); } }
@keyframes cta-fade { to { opacity:1; } }

/* ---- footer ---- */
.footer {
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:36px 40px; border-top:1px solid var(--line); flex-wrap:wrap;
}
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand img { height:28px; width:auto; }
.footer-copy { font-size:13px; color:var(--ink-3); }
.footer-links { display:flex; gap:20px; font-size:14px; align-items:center; }
.footer-links a { color:var(--ink-2); display:inline-flex; align-items:center; }
.footer-links a:hover { color:var(--ink); }

/* ====================  Responsive  ==================== */
@media (max-width:1024px) {
    .hero { grid-template-columns:1fr; gap:40px; padding:56px 32px 64px; }
    .hero-art { order:-1; }
    .hero-art img { max-width:240px; }
    .hero h1 { min-height:0; }
    .hero .lead { min-height:0; }
    .card-grid { grid-template-columns:repeat(2,1fr); }
    .ai-grid { grid-template-columns:repeat(2,1fr); }
    .cta { grid-template-columns:1fr; text-align:left; }
    .cta-sign { display:none; }
}
@media (max-width:820px) {
    .nav { padding:0 20px; }
    .brand-word { font-size:18px; }
    .pad { padding:56px 24px; }
    .hero { padding:48px 24px 56px; }
    .route-wrap, .cta-wrap { padding:40px 24px; }
    .hero h1 { font-size:44px; }
    .services h2, .ai h2 { font-size:32px; }
    .cta h2 { font-size:30px; }
    .route-grid { grid-template-columns:repeat(2,1fr); gap:28px 20px; }
    .route-line { display:none; }
    .route { padding:32px 24px; }
    .cta { padding:36px 28px; }
}
@media (max-width:520px) {
    .card-grid, .ai-grid { grid-template-columns:1fr; }
    .hero h1 { font-size:38px; }
    .hero-cta .btn { flex:1; }
    .footer { flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
    html { scroll-behavior:auto; }
}