/* SAVE OFFLINE SECTION */
.soff_section { position:relative; overflow:hidden; padding:72px 0 64px!important; background:linear-gradient(180deg,#fcfdff 0%,#f2f7ff 100%); }

/* BACKGROUND */
.soff_bg_glow { position:absolute; z-index:0; border-radius:50%; pointer-events:none; }
.soff_bg_glow_one { top:160px; left:-190px; width:380px; height:380px; background:radial-gradient(circle,rgba(37,99,235,.08) 0%,rgba(37,99,235,.02) 55%,transparent 72%); }
.soff_bg_glow_two { top:-120px; right:-120px; width:300px; height:300px; background:radial-gradient(circle,rgba(37,99,235,.07) 0%,rgba(37,99,235,.018) 55%,transparent 72%); }

.soff_bg_dots { position:absolute; z-index:0; width:105px; height:90px; opacity:.18; background-image:radial-gradient(#2563eb 1.4px,transparent 1.4px); background-size:16px 16px; pointer-events:none; }
.soff_bg_dots_left { top:28px; left:26px; }
.soff_bg_dots_right { top:290px; right:18px; }

/* HEADER */
.soff_header { position:relative; z-index:4; max-width:860px; margin:0 auto 65px; }
.soff_badge { display:inline-flex; align-items:center; gap:9px; padding:8px 18px; border-radius:999px; background:#eaf2ff; color:#2f7be8; font-size:15px; font-weight:700; letter-spacing:.2px; }

.soff_title { max-width:760px; margin:14px auto; color:#071c48; font-size:67px; line-height:1.02; font-weight:800; letter-spacing:-2.4px; }
.soff_title span { color:#3b82f6; }

.soff_subtitle { max-width:820px; margin:0 auto; color:#44516b; font-size:17px; line-height:1.65; }

/* OFFLINE SLASH */
.soff_slash { position:relative; display:inline-flex; align-items:center; justify-content:center; }

.soff_slash::after { content:""; position:absolute; top:50%; left:5%; width:90%; height:2px; border-radius:3px; background:currentColor; transform:translateY(-50%) rotate(-45deg); }

/* VISUAL */
.soff_visual_wrap { position:relative; z-index:2; max-width:1110px; margin:0 auto; }

.soff_illustration { position:relative; z-index:1; width:100%; max-width:760px; height:255px; margin:0 auto; }

/* CURVED PATH */
.soff_arc { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; }

.soff_arc_path { fill:none; stroke:#93c5fd; stroke-width:2.4; stroke-opacity:.82; stroke-dasharray:8 9; stroke-linecap:round; }

/* MOVING SYNC SPARK */
.soff_sync_spark { opacity:1; animation:soff_spark_visibility 7s linear infinite; }

.soff_sync_spark_outer { fill:rgba(37,99,235,.12); filter:blur(3px); }

.soff_sync_spark_middle { fill:rgba(96,165,250,.32); filter:blur(1.5px); }

.soff_sync_spark_core { fill:#2563eb; stroke:#fff; stroke-width:2px; filter:drop-shadow(0 0 7px rgba(37,99,235,.95)); }

/* ROBOT */
.soff_robot { position:absolute; top:10px; left:50%; z-index:3; width:245px; transform:translateX(-50%); filter:drop-shadow(0 16px 28px rgba(15,23,42,.12)); }

/* WIFI PIN */
.soff_pin { position:absolute; top:-48px; left:50%; z-index:5; width:66px; height:66px; display:grid; place-items:center; transform:translateX(-50%); border:3px solid #fda4af; border-radius:50%; background:#fff; color:#ef4444; font-size:22px; box-shadow:0 8px 20px rgba(15,23,42,.08); animation:soff_wifi_connect 7s linear infinite; }

.soff_pin::before { content:""; position:absolute; left:50%; bottom:-24px; width:3px; height:24px; border-radius:3px; background:#60a5fa; transform:translateX(-50%); }

.soff_pin .soff_slash::after { animation:soff_wifi_slash 7s linear infinite; }

/* LEFT + RIGHT NODES */
.soff_node { position:absolute; top:78px; z-index:3; width:62px; height:62px; display:grid; place-items:center; border:1px solid #dbeafe; border-radius:18px; background:rgba(239,246,255,.96); color:#3b82f6; font-size:22px; box-shadow:0 10px 24px rgba(37,99,235,.07); }

.soff_node_left { left:4%; animation:soff_left_send 7s linear infinite; }

.soff_node_right { right:4%; animation:soff_right_receive 7s linear infinite; }

/* DECORATIVE STARS */
.soff_sparkle { position:absolute; z-index:2; color:#93c5fd; }

.soff_sparkle_one { top:60px; left:12%; font-size:14px; }

.soff_sparkle_two { top:146px; right:12%; font-size:12px; }

/* SPARK VISIBILITY */
@keyframes soff_spark_visibility {
  0% { opacity:.25; }
  3%,91% { opacity:1; }
  96%,100% { opacity:0; }
}

/* LEFT NODE SEND STATE */
@keyframes soff_left_send {
  0% {
    border-color:#dbeafe;
    background:rgba(239,246,255,.96);
    color:#3b82f6;
    box-shadow:0 10px 24px rgba(37,99,235,.07);
  }

  3%,10% {
    border-color:#60a5fa;
    background:#fff;
    color:#2563eb;
    box-shadow:0 0 0 9px rgba(37,99,235,.10),0 0 28px rgba(37,99,235,.25);
  }

  16%,100% {
    border-color:#dbeafe;
    background:rgba(239,246,255,.96);
    color:#3b82f6;
    box-shadow:0 10px 24px rgba(37,99,235,.07);
  }
}

/* WIFI OFF -> CONNECTED */
@keyframes soff_wifi_connect {
  0%,39% {
    border-color:#fda4af;
    background:#fff;
    color:#ef4444;
    box-shadow:0 8px 20px rgba(15,23,42,.08);
  }

  42% {
    border-color:#93c5fd;
    background:#eff6ff;
    color:#2563eb;
    box-shadow:0 0 0 6px rgba(37,99,235,.08),0 0 25px rgba(37,99,235,.22);
  }

  46%,53% {
    border-color:#60a5fa;
    background:#fff;
    color:#2563eb;
    box-shadow:0 0 0 10px rgba(37,99,235,.10),0 0 35px rgba(37,99,235,.32);
  }

  58%,90% {
    border-color:#93c5fd;
    background:#fff;
    color:#2563eb;
    box-shadow:0 8px 22px rgba(37,99,235,.16);
  }

  94% {
    border-color:#fda4af;
    background:#fff;
    color:#ef4444;
    box-shadow:0 8px 20px rgba(15,23,42,.08);
  }

  100% {
    border-color:#fda4af;
    background:#fff;
    color:#ef4444;
    box-shadow:0 8px 20px rgba(15,23,42,.08);
  }
}

/* REMOVE WIFI SLASH WHEN INTERNET RETURNS */
@keyframes soff_wifi_slash {
  0%,39% {
    opacity:1;
    transform:translateY(-50%) rotate(-45deg) scaleX(1);
  }

  43% {
    opacity:0;
    transform:translateY(-50%) rotate(-45deg) scaleX(.2);
  }

  43%,91% {
    opacity:0;
    transform:translateY(-50%) rotate(-45deg) scaleX(.2);
  }

  95%,100% {
    opacity:1;
    transform:translateY(-50%) rotate(-45deg) scaleX(1);
  }
}

/* RIGHT NODE RECEIVES SYNC */
@keyframes soff_right_receive {
  0%,80% {
    border-color:#dbeafe;
    background:rgba(239,246,255,.96);
    color:#3b82f6;
    box-shadow:0 10px 24px rgba(37,99,235,.07);
  }

  84% {
    border-color:#93c5fd;
    background:#eff6ff;
    color:#2563eb;
    box-shadow:0 0 0 5px rgba(37,99,235,.06),0 0 20px rgba(37,99,235,.18);
  }

  87%,93% {
    border-color:#60a5fa;
    background:#fff;
    color:#2563eb;
    box-shadow:0 0 0 11px rgba(37,99,235,.11),0 0 36px rgba(37,99,235,.32);
  }

  100% {
    border-color:#dbeafe;
    background:rgba(239,246,255,.96);
    color:#3b82f6;
    box-shadow:0 10px 24px rgba(37,99,235,.07);
  }
}

/* CARDS */
.soff_cards { position:relative; z-index:6; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1080px; margin:13px auto 0; }

.soff_card { min-height:145px; display:flex; align-items:center; gap:18px; padding:22px 28px; border:1px solid #dbe3ef; border-radius:22px; background:rgba(255,255,255,.98); box-shadow:0 12px 28px rgba(15,23,42,.06); transition:transform .2s ease,border-color .2s ease; }

.soff_card:hover { transform:translateY(-3px); border-color:#cbd5e1; }

.soff_card_icon { position:relative; width:60px; height:60px; flex:0 0 60px; display:grid; place-items:center; border-radius:50%; font-size:24px; }

.soff_icon_blue { background:#eff6ff; color:#3b82f6; }

.soff_icon_green { background:#ecfdf5; color:#10b981; }

.soff_icon_purple { background:#f5f3ff; color:#8b5cf6; }

.soff_card_icon_badge { position:absolute; top:-3px; right:-2px; width:19px; height:19px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; background:#2563eb; color:#fff; font-size:8px; }

.soff_card_body { min-width:0; }

.soff_card_body h3 { margin:0 0 7px; color:#071c48; font-size:18px; line-height:1.25; font-weight:800; }

.soff_card_body p { margin:0; color:#526079; font-size:14px; line-height:1.55; }

/* BOTTOM FLOW */
.soff_flow { position:relative; z-index:4; display:flex; align-items:flex-start; justify-content:center; max-width:760px; margin:22px auto 0; }

.soff_flow_step { width:180px; flex:0 0 180px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }

.soff_flow_icon { width:68px; height:68px; display:grid; place-items:center; margin-bottom:2px; border:1px solid #dce5f2; border-radius:20px; background:#fff; color:#3481ef; font-size:24px; box-shadow:0 8px 20px rgba(15,23,42,.05); }

.soff_flow_icon_active { border-color:#bfdbfe; border-radius:50%; box-shadow:0 0 0 5px rgba(37,99,235,.05),0 8px 20px rgba(15,23,42,.05); animation:soff_pulse 2.4s ease-in-out infinite; }

.soff_flow_step strong { color:#071c48; font-size:14px; font-weight:800; }

.soff_flow_step span { color:#64748b; font-size:12.5px; }

.soff_flow_arrow { position:relative; width:118px; height:72px; flex:0 0 118px; color:#3b82f6; }

.soff_flow_arrow::before { content:""; position:absolute; top:34px; left:2px; right:10px; border-top:3px dotted #60a5fa; }

.soff_flow_arrow i { position:absolute; top:26px; right:0; z-index:2; padding-left:5px; background:#f4f8ff; font-size:15px; }

@keyframes soff_pulse {
  0%,100% { box-shadow:0 0 0 5px rgba(37,99,235,.04),0 8px 20px rgba(15,23,42,.05); }
  50% { box-shadow:0 0 0 9px rgba(37,99,235,.08),0 8px 20px rgba(15,23,42,.05); }
}

/* GET THE APP */
.soff_app_cta { position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:560px; margin:34px auto 0; text-align:center; }

.soff_app_cta_text { margin:0; color:#475569; font-size:14.5px; line-height:1.7; }

.soff_app_cta_text strong { display:block; color:#071c48; font-size:16px; font-weight:800; }

/* TABLET */
@media (max-width:991px) {
  .soff_section { padding:62px 0 56px!important; }

  .soff_title { font-size:48px; letter-spacing:-1.6px; }

  .soff_subtitle { font-size:16px; }

  .soff_illustration { height:245px; }

  .soff_robot { width:225px; }

  .soff_pin { top:-44px; width:62px; height:62px; }

  .soff_node { top:80px; width:58px; height:58px; font-size:20px; }

  .soff_cards { gap:14px; margin-top:-28px; }

  .soff_card { min-height:132px; padding:18px 20px; }

  .soff_card_icon { width:52px; height:52px; flex-basis:52px; font-size:20px; }

  .soff_card_body h3 { font-size:16px; }

  .soff_card_body p { font-size:13px; }

  .soff_flow_arrow { width:76px; flex-basis:76px; }
}

/* MOBILE */
@media (max-width:767px) {
  .soff_section { padding:54px 0 48px!important; }

  .soff_bg_dots_right { display:none; }

  .soff_bg_dots_left { top:14px; left:14px; width:76px; height:64px; background-size:12px 12px; }

  .soff_header { margin-bottom:60px; }

  .soff_badge { padding:7px 14px; font-size:12px; }

  .soff_title { max-width:520px; margin:12px auto; font-size:31px; line-height:1.08; letter-spacing:-1.2px; }

  .soff_subtitle { max-width:520px; font-size:15px; line-height:1.6; }

  .soff_illustration { max-width:540px; height:215px; }

  .soff_robot { top:10px; width:175px; }

  .soff_pin { top:-38px; width:54px; height:54px; border-width:2px; font-size:17px; }

  .soff_pin::before { bottom:-18px; width:2px; height:18px; }

  .soff_node { top:78px; width:48px; height:48px; border-radius:14px; font-size:17px; }

  .soff_node_left { left:4%; }

  .soff_node_right { right:4%; }

  .soff_sparkle_one { top:42px; left:13%; }

  .soff_sparkle_two { top:126px; right:12%; }

  .soff_cards { grid-template-columns:1fr; gap:10px; max-width:560px; margin:-18px auto 0; }

  .soff_card { min-height:0; padding:16px 18px; border-radius:18px; }

  .soff_card_icon { width:48px; height:48px; flex-basis:48px; font-size:18px; }

  .soff_card_body h3 { margin-bottom:4px; font-size:15px; }

  .soff_card_body p { font-size:12.5px; line-height:1.5; }

  .soff_flow { margin-top:18px; }

  .soff_flow_step { width:auto; flex:1 1 0; min-width:0; }

  .soff_flow_icon { width:52px; height:52px; border-radius:16px; font-size:18px; }

  .soff_flow_icon_active { border-radius:50%; }

  .soff_flow_step strong { font-size:12px; }

  .soff_flow_step span { font-size:10.5px; }

  .soff_flow_arrow { width:28px; height:54px; flex:0 0 28px; }

  .soff_flow_arrow::before { top:26px; left:0; right:5px; border-top-width:2px; }

  .soff_flow_arrow i { top:20px; right:0; padding-left:3px; font-size:11px; }
}

/* SMALL MOBILE */
@media (max-width:420px) {
  .soff_title { font-size:28px; }

  .soff_subtitle { font-size:14px; }

  .soff_illustration { height:198px; }

  .soff_robot { width:155px; }

  .soff_pin { top:-34px; width:48px; height:48px; font-size:15px; }

  .soff_node { top:76px; width:44px; height:44px; font-size:15px; }

  .soff_cards { margin-top:-14px; }

  .soff_card { padding:14px 15px; }

  .soff_card_icon { width:44px; height:44px; flex-basis:44px; }

  .soff_card_body h3 { font-size:14px; }

  .soff_card_body p { font-size:12px; }

  .soff_flow_icon { width:48px; height:48px; font-size:17px; }

  .soff_flow_step strong { font-size:11.5px; }

  .soff_flow_step span { font-size:10px; }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion:reduce) {
  .soff_sync_spark { display:none; }
  .soff_pin, .soff_pin .soff_slash::after, .soff_node_left, .soff_node_right, .soff_flow_icon_active { animation:none; }
  .soff_card { transition:none; }
}