:root {
      --ink: #07131f;
      --ink-2: #10263a;
      --muted: #5a6d7e;
      --line: rgba(7, 19, 31, .12);
      --paper: #f6f9fc;
      --white: #ffffff;
      --blue: #0ea5e9;
      --blue-2: #0369a1;
      --cyan: #67e8f9;
      --green: #22c55e;
      --shadow: 0 28px 80px rgba(7, 19, 31, .14);
      --radius: 28px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 4%, rgba(14,165,233,.20), transparent 28rem),
        radial-gradient(circle at 88% 0%, rgba(103,232,249,.16), transparent 25rem),
        linear-gradient(180deg, #f9fcff 0%, #eef6fb 52%, #f8fbfd 100%);
      line-height: 1.55;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    .wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

    .nav {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(18px);
      background: rgba(249, 252, 255, .78);
      border-bottom: 1px solid rgba(7, 19, 31, .08);
    }
    .nav-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .06em; }
    .brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 12px 30px rgba(14,165,233,.25); }
    .nav-links { display: flex; align-items: center; gap: 4px; }
    .nav-links a { padding: 10px 14px; color: var(--muted); font-weight: 700; font-size: 15px; border-radius: 999px; }
    .nav-links a:hover { background: rgba(14,165,233,.09); color: var(--blue-2); }

    .hero { position: relative; padding: 84px 0 70px; }
    .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }
    h1 { margin: 0 0 26px; font-size: clamp(46px, 7vw, 86px); line-height: 1.08; letter-spacing: -.07em; max-width: 820px; }
    .blue-text { color: var(--blue-2); }
    .lead { font-size: clamp(19px, 2.2vw, 25px); color: var(--muted); max-width: 680px; margin: 0 0 32px; }
    .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 850; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background: var(--blue); color: white; border-color: rgba(14,165,233,.2); box-shadow: 0 18px 42px rgba(14,165,233,.30); }
    .btn-ghost { background: rgba(255,255,255,.64); color: var(--ink-2); }
    .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; max-width: 620px; }
    .trust-card { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.58); }
    .trust-card strong { display: block; font-size: 22px; letter-spacing: -.04em; }
    .trust-card span { color: var(--muted); font-weight: 650; font-size: 13px; }

    .network-panel {
      position: relative;
      min-height: 560px;
      border-radius: 38px;
      background: linear-gradient(145deg, #081827, #0f2b42 50%, #0a1724);
      box-shadow: var(--shadow);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
    }
    .network-panel::before {
      content: "";
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(103,232,249,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,232,249,.11) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: radial-gradient(circle at 55% 42%, black, transparent 72%);
      opacity: .9;
    }
    .orbit { position: absolute; inset: 50px; border: 1px dashed rgba(103,232,249,.24); border-radius: 50%; animation: rotate 32s linear infinite; }
    .orbit.two { inset: 105px; animation-duration: 22s; animation-direction: reverse; }
    .scan-line { position: absolute; left: 8%; right: 8%; top: 22%; height: 2px; background: linear-gradient(90deg, transparent, rgba(103,232,249,.9), transparent); box-shadow: 0 0 24px rgba(103,232,249,.8); animation: scan 4.8s ease-in-out infinite; opacity: .85; }
    @keyframes rotate { to { transform: rotate(360deg); } }
    @keyframes scan { 0%, 100% { transform: translateY(0); opacity: .18; } 45%, 55% { opacity: .9; } 50% { transform: translateY(min(300px, 62vw)); } }
    @keyframes nodePulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.03); } }
    .node { position: absolute; display: grid; place-items: center; border-radius: 22px; color: white; font-weight: 900; box-shadow: 0 20px 44px rgba(0,0,0,.25); }
    .node.logo { width: 126px; height: 126px; left: calc(50% - 63px); top: calc(50% - 63px); background: white; padding: 18px; }
    .node.logo img { width: 100%; height: 100%; border-radius: 24px; }
    .node.small { width: 90px; height: 90px; background: rgba(14,165,233,.82); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(10px); }
    .node.n1 { left: 58px; top: 96px; animation: nodePulse 5.2s ease-in-out infinite; }
    .node.n2 { right: 64px; top: 118px; background: rgba(34,197,94,.75); animation: nodePulse 5.2s ease-in-out .8s infinite; }
    .node.n3 { left: 88px; bottom: 86px; background: rgba(15,118,180,.86); animation: nodePulse 5.2s ease-in-out 1.4s infinite; }
    .node.n4 { right: 76px; bottom: 104px; background: rgba(103,232,249,.55); color: #052033; animation: nodePulse 5.2s ease-in-out 2s infinite; }
    .panel-card { position: absolute; left: 28px; right: 28px; bottom: 28px; padding: 20px; border-radius: 24px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(18px); color: white; }
    .panel-card strong { display: block; font-size: 20px; letter-spacing: -.03em; }
    .panel-card span { color: rgba(255,255,255,.70); }

    section { padding: 86px 0; }
    .section-head { margin-bottom: 34px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
    .section-head h2 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.055em; }
    .section-head p { margin: 0; max-width: 520px; color: var(--muted); font-size: 18px; }

    .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
    .service { position: relative; min-height: 260px; padding: 26px; border-radius: var(--radius); background: rgba(255,255,255,.68); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(7,19,31,.07); overflow: hidden; }
    .service::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; right: -62px; top: -62px; background: rgba(14,165,233,.12); }
    .service .icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--ink); color: white; font-size: 24px; margin-bottom: 26px; }
    .service h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.12; letter-spacing: -.035em; }
    .service p { margin: 0; color: var(--muted); }

    .case { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: stretch; background: #061421; color: white; border-radius: 38px; overflow: hidden; box-shadow: var(--shadow); }
    .case-copy { padding: 42px; }
    .case-kicker { color: var(--cyan); text-transform: uppercase; font-weight: 900; font-size: 13px; letter-spacing: .12em; }
    .case h2 { font-size: clamp(38px, 5vw, 64px); line-height: .98; letter-spacing: -.06em; margin: 14px 0 18px; }
    .case p { color: rgba(255,255,255,.72); font-size: 18px; }
    .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 32px; }
    .chip { padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.06); font-weight: 750; font-size: 13px; }
    .case-visual { min-height: 420px; padding: 34px; background:
      radial-gradient(circle at 22% 12%, rgba(34,197,94,.36), transparent 18rem),
      radial-gradient(circle at 82% 82%, rgba(14,165,233,.42), transparent 18rem),
      #0a2032; display: grid; place-items: center; }
    .phone { width: min(310px, 90%); border-radius: 36px; padding: 14px; background: #061421; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 34px 70px rgba(0,0,0,.35); transform: rotate(3deg); }
    .phone-screen { border-radius: 26px; background: linear-gradient(180deg, #f7fff8, #e8f7ec); min-height: 520px; padding: 20px; color: #102018; overflow: hidden; }
    .plant-hero { height: 180px; border-radius: 22px; background: linear-gradient(135deg, #14532d, #22c55e); position: relative; overflow: hidden; }
    .leaf { position: absolute; width: 90px; height: 130px; border-radius: 90px 0 90px 0; background: rgba(255,255,255,.22); transform: rotate(24deg); left: 42px; top: 22px; }
    .leaf.two { left: 130px; top: 52px; transform: rotate(-20deg); background: rgba(255,255,255,.16); }
    .app-card { margin-top: 14px; padding: 16px; background: white; border-radius: 20px; box-shadow: 0 14px 30px rgba(20,83,45,.10); }
    .app-card b { display: block; margin-bottom: 4px; }
    .progress { height: 10px; border-radius: 999px; background: #dbeee1; overflow: hidden; margin-top: 14px; }
    .progress span { display: block; height: 100%; width: 72%; background: #22c55e; }

    .process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .step { padding: 26px; border-left: 4px solid var(--blue); background: rgba(255,255,255,.7); border-radius: 0 24px 24px 0; box-shadow: 0 18px 44px rgba(7,19,31,.06); }
    .step b { color: var(--blue-2); }
    .step h3 { font-size: 24px; letter-spacing: -.035em; margin: 8px 0; }
    .step p { color: var(--muted); margin: 0; }

    .contact { border-radius: 38px; padding: 42px; background: linear-gradient(135deg, var(--blue-2), var(--ink)); color: white; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
    .contact h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -.055em; margin: 0 0 16px; }
    .contact p { color: rgba(255,255,255,.75); font-size: 18px; }
    .contact-list { display: grid; gap: 12px; }
    .contact-item { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); }
    .contact-item span { display: block; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
    .contact-item a, .contact-item b { font-size: 20px; font-weight: 850; }

    footer {
      position: relative;
      overflow: hidden;
      margin-top: 80px;
      color: rgba(226, 239, 248, .78);
      background:
        radial-gradient(circle at 18% 8%, rgba(14,165,233,.24), transparent 24rem),
        radial-gradient(circle at 88% 86%, rgba(34,197,94,.16), transparent 22rem),
        linear-gradient(135deg, #061421 0%, #082238 52%, #04101b 100%);
    }
    footer::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
    .footer-shell { position: relative; padding: 64px 0 30px; }
    .footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr 1fr; gap: 34px; align-items: start; }
    .footer-brand { display: inline-flex; align-items: center; gap: 14px; color: white; font-weight: 950; letter-spacing: .06em; font-size: 28px; }
    .footer-brand img { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 16px 38px rgba(14,165,233,.28); }
    .footer-copy { max-width: 390px; margin: 18px 0 0; color: rgba(226,239,248,.70); font-size: 16px; }
    .footer-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 430px; margin-top: 24px; }
    .footer-badge { padding: 15px; border-radius: 20px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.045); }
    .footer-badge b { display: block; color: white; }
    .footer-badge span { display: block; margin-top: 4px; color: rgba(226,239,248,.58); font-size: 13px; }
    .footer-title { margin: 0 0 16px; color: white; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; }
    .footer-links { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }
    .footer-links a { color: rgba(226,239,248,.76); font-weight: 750; transition: color .2s ease, transform .2s ease; }
    .footer-links a:hover { color: white; transform: translateX(3px); }
    .footer-cta { padding: 24px; border-radius: 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); box-shadow: 0 26px 70px rgba(0,0,0,.24); }
    .footer-cta h3 { margin: 0 0 10px; color: white; font-size: 24px; line-height: 1.12; letter-spacing: -.035em; }
    .footer-cta p { margin: 0 0 18px; color: rgba(226,239,248,.68); font-size: 15px; }
    .footer-cta .btn { width: 100%; border-color: rgba(14,165,233,.35); }
    .footer-contact { display: grid; gap: 10px; margin-top: 18px; font-size: 14px; }
    .footer-contact a, .footer-contact span { color: rgba(226,239,248,.78); }
    .footer-bottom { margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.10); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; color: rgba(226,239,248,.50); font-size: 14px; }
    .footer-legal { display: block; min-width: 0; }
    .footer-copyright, .footer-policy-links { display: block; }
    .footer-policy-links { margin-top: 8px; color: rgba(226,239,248,.56); }
    .footer-bottom a { color: rgba(226,239,248,.74); font-weight: 800; }

    @media (max-width: 980px) {
      .hero-grid, .case, .contact { grid-template-columns: 1fr; }
      .services { grid-template-columns: repeat(2, 1fr); }
      .network-panel { min-height: 470px; }
      .section-head { display: block; }
      .section-head p { margin-top: 14px; }
    }
    @media (max-width: 680px) {
      .wrap { width: min(100% - 24px, 1160px); }
      .nav-links { gap: 0; }
      .nav-links a { padding: 8px 9px; font-size: 13px; }
      .hero { padding-top: 54px; padding-bottom: 44px; }
      .hero-grid { gap: 34px; }
      .trust, .services, .process { grid-template-columns: 1fr; }
      .network-panel {
        min-height: 0;
        height: clamp(310px, 80vw, 360px);
        border-radius: 28px;
        width: 100%;
        overflow: visible;
        margin-bottom: 118px;
      }
      .network-panel::before { background-size: 34px 34px; }
      .orbit { inset: 34px; }
      .orbit.two { inset: 82px; }
      .scan-line { left: 10%; right: 10%; top: 18%; }
      .node.small { width: 62px; height: 62px; border-radius: 18px; font-size: 12px; }
      .node.logo { width: 96px; height: 96px; left: calc(50% - 48px); top: calc(50% - 48px); padding: 13px; }
      .node.n1 { left: 26px; top: 58px; }
      .node.n2 { right: 28px; top: 70px; }
      .node.n3 { left: 34px; bottom: 46px; }
      .node.n4 { right: 34px; bottom: 54px; }
      .panel-card { left: 0; right: 0; bottom: -102px; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.92); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 18px 42px rgba(7,19,31,.12); }
      .panel-card strong { font-size: 16px; }
      .panel-card span { color: var(--muted); font-size: 13px; display: block; margin-top: 4px; }
      .case-copy, .contact { padding: 26px; }
      .phone-screen { min-height: 440px; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-badges { grid-template-columns: 1fr; }
      .footer-bottom { grid-template-columns: 1fr; }
    }

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

/* Shared production additions */
.skip-link { position: absolute; left: -999px; top: 12px; z-index: 100; background: var(--ink); color: white; padding: 10px 14px; border-radius: 999px; }
.skip-link:focus { left: 12px; }
.breadcrumb { padding: 18px 0 0; color: var(--muted); font-size: 14px; font-weight: 750; }
.breadcrumb a { color: var(--blue-2); }
.page-hero { padding: 72px 0 42px; }
.page-hero.legal { padding-bottom: 18px; }
.page-hero.legal + section { padding-top: 22px; }
.page-hero h1 { max-width: 980px; }
.page-hero .lead { max-width: 820px; }
.kicker { color: var(--blue-2); text-transform: uppercase; font-size: 13px; font-weight: 950; letter-spacing: .16em; margin-bottom: 14px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 360px; gap: 28px; align-items: start; }
.content-card { padding: 30px; border-radius: var(--radius); background: rgba(255,255,255,.72); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(7,19,31,.07); }
.content-card h2 { margin: 0 0 16px; font-size: clamp(30px, 4vw, 46px); line-height: 1.04; letter-spacing: -.045em; }
.content-card h3 { margin: 26px 0 10px; font-size: 24px; letter-spacing: -.035em; }
.content-card p, .content-card li { color: var(--muted); font-size: 17px; }
.check-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(34,197,94,.13); }
.side-card { position: sticky; top: 96px; padding: 26px; border-radius: 28px; background: linear-gradient(135deg, var(--ink), var(--blue-2)); color: white; box-shadow: var(--shadow); }
.side-card h2, .side-card h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.08; letter-spacing: -.04em; }
.side-card p { color: rgba(255,255,255,.76); }
.side-card .btn { width: 100%; margin-top: 12px; }
.local-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.local-strip span { padding: 8px 11px; border-radius: 999px; background: rgba(14,165,233,.10); color: var(--blue-2); font-weight: 850; font-size: 13px; }
.faq { display: grid; gap: 12px; }
details { padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.72); border: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 900; color: var(--ink); }
details p { margin: 10px 0 0; color: var(--muted); }
.legal h1 { font-size: clamp(42px, 6vw, 72px); }
.legal .content-card { max-width: 900px; }
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: none; }
.cookie-banner.is-visible { display: block; }
.cookie-box { width: min(760px, 100%); margin-left: auto; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.cookie-box h2 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -0.02em; }
.cookie-box p { margin: 0; color: var(--muted); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cookie-actions .btn { min-height: 44px; padding-inline: 16px; }
@media (max-width: 980px) { .content-grid { grid-template-columns: 1fr; } .side-card { position: static; } }