:root{
      --hero-blue:#1E90FF; --hero-orange:#F2632E;
      --card:#ffffff; --ink:#0f2544; --muted:#475569; --line:#E6EDF7;
      --accent:#E83F6F; --ok:#10b981; --off:#94a3b8;
      --shadow:0 8px 18px rgba(2,6,23,.10); --shadow-2:0 12px 26px rgba(2,6,23,.16);
      --maxw:1200px; --radius:18px;
    }
    body{ margin:0; background:#fff; color:var(--ink); font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }

    .zone-hero{
      position:relative; overflow:hidden; color:#fff; isolation:isolate;
      background:
        radial-gradient(900px 600px at -10% -10%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(135deg, var(--hero-blue) 0%, var(--hero-orange) 100%);
      padding: clamp(56px,8vw,120px) 0 clamp(120px,12vw,160px);
      min-height: clamp(340px, 38vw, 480px);
    }
    .zone-hero .wrap{
      width:min(var(--maxw),92%); margin-inline:auto;
      display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center;
      position:relative; z-index:2;
    }
    @media (max-width:960px){ .zone-hero .wrap{ grid-template-columns:1fr; text-align:center; } }
    .z-eyebrow-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .z-eyebrow{ font-weight:900; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; font-size:14px; }
    .z-title{ margin:0; font-weight:900; line-height:1.04; font-size: clamp(36px,6.4vw,62px); letter-spacing:-.01em; }

    .z-desc-wrap{ margin-top: 8px; }
    .z-desc-card{
      display:inline-block; max-width: 60ch; padding: 12px 16px; border-radius: 14px;
      background: linear-gradient(180deg, rgba(2,6,23,.28), rgba(2,6,23,.18));
      border: 1px solid rgba(255,255,255,.32); box-shadow: 0 10px 28px rgba(2,6,23,.28);
      backdrop-filter: saturate(140%) blur(4px);
    }
    .z-desc{ margin:0; color:#fff; font-size: clamp(16px,2.1vw,20px); line-height:1.75; text-shadow: 0 1px 2px rgba(0,0,0,.30); }
    @media (max-width:960px){ .z-desc-card{ display:block; margin-inline:auto; } }

    .status-pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px; border-radius:999px; font-weight:800; font-size:13px;
      border:1px solid rgba(255,255,255,.35); color:#fff; margin-bottom:12px;
      background:rgba(255,255,255,.22); box-shadow:0 6px 16px rgba(2,6,23,.18);
    }
    .status-pill.ok{  background: rgba(16,185,129,.28); border-color: rgba(16,185,129,.45); }
    .status-pill.off{ background: rgba(148,163,184,.28); border-color: rgba(148,163,184,.45); }
    .status-pill i{ font-size:14px; }

    .hero-peeker{ position:absolute; right:max(2vw,24px); top:clamp(8px,2.6vw,28px); width:clamp(240px,28vw,420px);
      pointer-events:none; user-select:none; z-index:1; filter:drop-shadow(0 18px 40px rgba(2,6,23,.25)); opacity:.98; }
    .hero-peeker img{ display:block; width:100%; height:auto; object-fit:contain; }
    @media (max-width:720px){ .hero-peeker{ display:none; } }

    .streaks{ position:absolute; inset:0; z-index:1; pointer-events:none; }
    .streaks .cluster{ position:absolute; transform: rotate(-24deg); filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); }
    .streaks .left{ top:14%; left:22%; width:260px; }
    .streaks .right{ bottom:10%; right:6%; width:300px; }
    .streak-line{ height:2px; margin:20px 0;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); opacity:.35; border-radius:4px; }
    .streaks .left  .streak-line:nth-child(1){ width:66%; }
    .streaks .left  .streak-line:nth-child(2){ width:52%; }
    .streaks .left  .streak-line:nth-child(3){ width:60%; }
    .streaks .right .streak-line:nth-child(1){ width:58%; }
    .streaks .right .streak-line:nth-child(2){ width:46%; }
    .streaks .right .streak-line:nth-child(3){ width:64%; }

    .hero-bubbles{ position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; opacity:.65; }
    .hero-bubbles span{
      position:absolute; bottom:-12vh; border-radius:50%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.92), rgba(255,255,255,.28) 65%, rgba(255,255,255,0) 80%);
      will-change: transform, opacity; animation: rise var(--dur,12s) linear var(--delay,0s) infinite;
    }
    @keyframes rise{
      0%{ transform: translateY(0) translateX(0) scale(var(--scale,1)); opacity:0; }
      10%{ opacity: var(--op, .22); }
      55%{ transform: translateY(-58vh) translateX(var(--drift,0px)) scale(var(--scale,1)); }
      90%{ opacity: calc(var(--op, .22) * .35); }
      100%{ transform: translateY(-115vh) translateX(calc(var(--drift,0px) * 1.5)) scale(var(--scale,1)); opacity:0; }
    }
    @media (prefers-reduced-motion:reduce){ .hero-bubbles span{ animation:none; opacity:.08; } }

    .support-wrap{ width:min(var(--maxw),92%); margin-inline:auto; margin-top:-80px; margin-bottom:90px; position:relative; z-index:10; display:grid; gap:22px; }
    .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
    .card-body{ padding:22px; }

    .banner{ border-radius:12px; padding:14px 16px; border:1px solid var(--line); background:#fff; display:block; margin-bottom:16px; color:var(--ink); }
    .muted{ color:#64748b; }
    .info-note{ margin-top:12px; font-size:14px; color:#334155; background:#f8fafc; padding:10px 12px; border-left:4px solid var(--hero-blue); border-radius:6px; line-height:1.5; }

    .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:10px; }
    .kpi{ display:flex; gap:12px; align-items:center; border:1px solid var(--line); background:#f6f9ff; border-radius:12px; padding:12px; }
    .kpi .ico{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(2,6,23,.06); }
    .kpi .ico i{ color:#1E3A8A; }

    .cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
    .btn{ display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid #dfe3e8; text-decoration:none; font-weight:700; color:#0f2544; background:#fff; }
    .btn:hover{ filter:brightness(.98); }
    .btn-primary{ background:var(--hero-blue); color:#fff; border-color:var(--hero-blue); }
    .btn-primary:hover{ filter:brightness(.96); }
    .btn-call{ animation: call-blink 1.25s ease-in-out infinite; box-shadow:0 0 0 rgba(0,0,0,0); }
    @keyframes call-blink{ 0%,100%{ filter:none; box-shadow:0 0 0 rgba(0,0,0,0);} 50%{ filter:brightness(1.08); box-shadow:0 0 22px rgba(30,144,255,.55), 0 0 8px rgba(30,144,255,.35) inset; } }
    @media (prefers-reduced-motion:reduce){ .btn-call{ animation:none; } }

    details.acc{ border-top:1px solid var(--line); }
    details.acc:first-of-type{ border-top:none; }
    summary{ cursor:pointer; list-style:none; padding:16px 0; margin:0; font-weight:800; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:12px; }
    summary::-webkit-details-marker{ display:none; }
    summary::after{
      content: '+'; font-weight:900; width:22px; height:22px; display:inline-grid; place-items:center;
      border:1px solid var(--line); border-radius:6px; font-size:14px; line-height:1;
      background:#fff;
    }
    details[open] > summary::after{ content: '–'; }
    .acc-body{ padding:0 0 16px 0; }
    .tips{ padding-left:20px; margin:0; }
    .tips li{ margin:6px 0; color:var(--muted); }
    .tip-note{
      margin-top:10px; background:#fff7ed; border:1px solid #ffedd5; color:#9a3412;
      padding:10px 12px; border-radius:8px; font-size:14px;
    }