/* eSIMaccess — consolidated styles */

/* ===== from index.html ===== */
:root{
    --bg:#F6F5FC;
    --bg-hero-a:#EFE9FF;
    --bg-hero-b:#FFEDE3;
    --ink:#1C1633;
    --ink-soft:#5B5578;
    --primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;
    --primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;
    --yellow:#FFC93C;
    --teal:#2EC4B6;
    --card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{
    background:#fff;
    backdrop-filter:none;
    padding-top:1.1rem;
    padding-bottom:1.1rem;
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(28,22,51,0.06);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
  }
  .navbar > .container-xl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:0.75rem;
  }
  .navbar-brand{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.5rem;
    display:flex;
    align-items:center;
    gap:0.55rem;
    color:var(--ink) !important;
    text-decoration:none !important;
    position:relative;
    z-index:2;
    cursor:pointer;
  }
  .navbar-brand img{
    height:36px;
    width:auto;
    display:block;
  }
  .footer-logo img{
    height: 60px;
    width:auto;
    display:block;
  }
  .lang-switch{
    display:inline-flex;
    align-items:stretch;
    flex-shrink:0;
    height:42px;
    border:1.5px solid #E2DEF5;
    border-radius:100px;
    overflow:hidden;
    background:#fff;
  }
  .lang-switch a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.38rem;
    min-width:34px;
    padding:0 0.72rem;
    font-weight:800;
    font-size:0.72rem;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    text-decoration:none !important;
    line-height:1;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .lang-switch .lang-flag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:12px;
    border-radius:2px;
    overflow:hidden;
    flex-shrink:0;
    box-shadow:inset 0 0 0 1px rgba(28,22,51,0.12);
  }
  .lang-switch .lang-flag svg{
    display:block;
    width:18px;
    height:12px;
  }
  .lang-switch a:hover,
  .lang-switch a:focus-visible{
    color:var(--ink);
    outline:none;
  }
  .lang-switch a.is-active{
    background:var(--ink);
    color:#fff !important;
  }
  .lang-switch a.is-active .lang-flag{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28);
  }
  .nav-icon-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    background:transparent;
    border:1.5px solid #E2DEF5;
    text-decoration:none !important;
    transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  }
  .nav-icon-btn:hover,
  .nav-icon-btn:focus,
  .nav-icon-btn:active,
  .nav-icon-btn:visited{
    color:var(--primary);
    border-color:var(--primary);
    text-decoration:none !important;
  }
  .nav-user{
    position:relative;
    flex-shrink:0;
  }
  .nav-user-btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    margin:0;
    padding:3px 10px 3px 3px;
    border:1.5px solid #E2DEF5;
    border-radius:100px;
    background:#fff;
    color:var(--ink);
    cursor:pointer;
    line-height:1;
    transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .nav-user-btn:hover,
  .nav-user-btn:focus-visible,
  .nav-user.is-open .nav-user-btn{
    border-color:rgba(91,79,232,0.45);
    box-shadow:0 8px 22px rgba(28,22,51,0.08);
    outline:none;
  }
  .nav-user-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(145deg, var(--violet), var(--violet-soft));
    color:#fff;
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:0.78rem;
    letter-spacing:0.02em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 0 0 2px #fff;
  }
  .nav-user-avatar.lg{
    width:40px;
    height:40px;
    font-size:0.88rem;
    box-shadow:none;
  }
  .nav-user-meta{
    display:none;
    align-items:center;
    gap:0.28rem;
    min-width:0;
  }
  .nav-user-name{
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:700;
    font-size:0.88rem;
    color:var(--ink);
  }
  .nav-user-caret{
    flex-shrink:0;
    color:var(--ink-soft);
    transition:transform 0.2s ease;
  }
  .nav-user.is-open .nav-user-caret{transform:rotate(180deg);}
  .nav-user-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:min(292px, calc(100vw - 1.5rem));
    padding:0.45rem;
    border:1px solid rgba(28,22,51,0.08);
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 50px rgba(28,22,51,0.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index:80;
  }
  .nav-user.is-open .nav-user-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .nav-user-dropdown-head{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.7rem 0.7rem 0.85rem;
    margin:0 0 0.35rem;
    border-bottom:1px solid rgba(28,22,51,0.08);
  }
  .nav-user-dropdown-id{
    min-width:0;
  }
  .nav-user-dropdown-id strong{
    display:block;
    font-size:0.92rem;
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .nav-user-dropdown-id span{
    display:block;
    font-size:0.78rem;
    color:var(--ink-soft);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .nav-user-item{
    display:flex !important;
    align-items:center;
    gap:0.7rem;
    width:100%;
    margin:0;
    padding:0.72rem 0.75rem;
    border:none;
    border-radius:12px;
    background:transparent;
    color:var(--ink) !important;
    font-family:inherit;
    font-size:0.9rem;
    font-weight:600;
    line-height:1.2;
    text-align:left;
    text-decoration:none !important;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .nav-user-item svg{
    flex-shrink:0;
    opacity:0.78;
  }
  .nav-user-item:hover,
  .nav-user-item:focus-visible{
    background:rgba(91,79,232,0.08);
    color:var(--ink) !important;
    outline:none;
  }
  .nav-user-item.danger{color:#C2412B !important;}
  .nav-user-item.danger:hover,
  .nav-user-item.danger:focus-visible{
    background:rgba(255,107,74,0.1);
    color:#C2412B !important;
  }
  .nav-user-sep{
    height:1px;
    margin:0.35rem 0.55rem;
    background:rgba(28,22,51,0.08);
  }
  @media (min-width:992px){
    .nav-user-meta{display:inline-flex;}
  }
  @media (max-width:991.98px){
    .nav-user{display:none;}
    .navbar > .container-xl .lang-switch{display:none;}
  }
  .burger{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1.5px solid #E2DEF5;
    background:#fff;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
  }
  .burger span{
    display:block;
    width:16px;
    height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform 0.2s ease, opacity 0.2s ease;
  }
  .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.is-open span:nth-child(2){opacity:0;}
  .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  body.nav-open{overflow:hidden;}
  .nav-backdrop{
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(28,22,51,0.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.28s ease, visibility 0.28s ease;
  }
  .nav-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-panel{
    position:fixed;
    top:0;
    right:0;
    z-index:110;
    display:flex;
    flex-direction:column;
    width:min(22rem, 88vw);
    height:100%;
    height:100dvh;
    margin:0;
    padding:0;
    background:#fff !important;
    border:none;
    border-top:none;
    box-shadow:-18px 0 48px rgba(28,22,51,0.16);
    transform:translateX(105%);
    visibility:hidden;
    pointer-events:none;
    transition:transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
    text-align:left;
  }
  .nav-panel.is-open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
  }
  .nav-panel-inner{
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    height:100%;
    padding:1.15rem 1.25rem 1.35rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    margin-bottom:0.35rem;
    padding-bottom:1rem;
    border-bottom:1px solid rgba(28,22,51,0.08);
  }
  .nav-panel-brand img{
    height:34px;
    width:auto;
  }
  .nav-panel-close{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1.5px solid #E2DEF5;
    background:#fff;
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    padding:0;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .nav-panel-close:hover,
  .nav-panel-close:focus-visible{
    border-color:var(--ink);
    outline:none;
  }
  .nav-panel-links{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    gap:0;
    padding:0.35rem 0 1rem;
  }
  .nav-panel-links a,
  .nav-panel-inner a:not(.navbar-brand):not(.lang-switch a),
  .nav-panel a:not(.navbar-brand):not(.lang-switch a){
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:0.85rem;
    width:100%;
    padding:0.95rem 0.15rem;
    margin:0;
    font-weight:600;
    font-size:1.05rem;
    line-height:1.3;
    color:var(--ink) !important;
    text-align:left;
    text-decoration:none !important;
    border-bottom:1px solid rgba(28,22,51,0.08);
    border-radius:0;
    background:transparent;
  }
  .nav-panel-links a > span{
    min-width:0;
  }
  .nav-panel-arrow{
    flex-shrink:0;
    color:var(--ink-soft);
    opacity:0.55;
    transition:transform 0.18s ease, opacity 0.18s ease, color 0.18s ease;
  }
  .nav-panel-links a:not(.btn-pill):hover .nav-panel-arrow,
  .nav-panel-links a:not(.btn-pill):focus-visible .nav-panel-arrow{
    opacity:1;
    color:var(--ink);
    transform:translateX(3px);
  }
  .nav-panel-links a:last-child,
  .nav-panel-links a.btn-pill{
    border-bottom:none;
  }
  .nav-panel-links .btn-pill,
  .nav-panel .btn-pill{
    justify-content:center !important;
    gap:0;
    width:100%;
    margin-top:0.85rem;
    padding:0.85rem 1.25rem !important;
    border-bottom:none !important;
    border-radius:100px;
    color:#fff !important;
    font-size:0.95rem !important;
  }
  .nav-panel-foot{
    margin-top:auto;
    padding-top:1rem;
    border-top:1px solid rgba(28,22,51,0.08);
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .nav-panel-foot .lang-switch{
    display:inline-flex;
    height:44px;
  }
  .nav-panel-foot .lang-switch a{
    min-width:52px;
    border-bottom:none !important;
    width:auto;
    padding:0 0.9rem;
    font-size:0.78rem;
    justify-content:center;
  }
  @media (min-width:992px){
    .burger{display:none !important;}
    .nav-backdrop,
    .nav-backdrop.is-open,
    .nav-panel,
    .nav-panel.is-open{display:none !important;}
  }
  .nav-link.custom{
    font-weight:600;
    font-size:0.95rem;
    color:var(--ink) !important;
    padding:0.5rem 1rem !important;
  }
  .btn-pill{
    font-weight:700;
    font-size:0.92rem;
    line-height:1.15;
    border-radius:100px;
    padding:0.65rem 1.5rem;
    background:var(--primary);
    color:#fff;
    border:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none !important;
  }
  .btn-pill:hover,
  .btn-pill:focus,
  .btn-pill:active,
  .btn-pill:visited{
    color:#fff;
    text-decoration:none !important;
  }
  .btn-pill:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(28,22,51,0.35);
  }
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{
    font-weight:700;
    font-size:0.92rem;
    border-radius:100px;
    padding:0.55rem 1.15rem 0.55rem 0.55rem;
    background:#fff;
    color:var(--ink);
    border:none;
    box-shadow:0 4px 18px rgba(28,22,51,0.08);
    transition:transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    display:inline-flex;
    align-items:center;
    gap:0.7rem;
    text-decoration:none !important;
  }
  .btn-ghost .play-dot{
    width:2.1rem;
    height:2.1rem;
    border-radius:50%;
    background:var(--primary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .btn-ghost .play-dot svg{
    width:11px;
    height:11px;
    margin-left:1px;
  }
  .btn-ghost:hover,
  .btn-ghost:focus,
  .btn-ghost:active,
  .btn-ghost:visited{
    color:var(--primary);
    text-decoration:none !important;
  }
  .btn-ghost:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(28,22,51,0.18);
  }
  .btn-ghost:hover .play-dot{
    background:var(--primary-dark);
    transform:scale(1.06);
  }

  .hero{
    position:relative;
    padding:4.5rem 0 3rem;
    background:
      radial-gradient(52% 68% at 12% 8%, rgba(91,79,232,0.16) 0%, transparent 100%),
      radial-gradient(46% 62% at 88% 22%, rgba(46,196,182,0.13) 0%, transparent 100%),
      radial-gradient(50% 70% at 70% 96%, rgba(255,107,74,0.10) 0%, transparent 100%),
      linear-gradient(180deg, #FBFAFF 0%, #F7F5FE 100%);
    overflow:hidden;
    border-radius:0 0 48px 48px;
  }
  .hero::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, rgba(28,22,51,0.07) 1px, transparent 1.5px);
    background-size:24px 24px;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 45%, transparent 80%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 45%, transparent 80%);
    pointer-events:none;
  }
  .hero::after{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    right:-140px;
    top:-180px;
    border-radius:50%;
    border:1.5px dashed rgba(91,79,232,0.22);
    pointer-events:none;
    animation:spin-slow 60s linear infinite;
  }
  @keyframes spin-slow{
    to{transform:rotate(360deg);}
  }
  .cloud{
    position:absolute;
    background:#fff;
    border-radius:50%;
    opacity:0.7;
    filter:blur(0.5px);
  }
  .hero .cloud{display:none;}
  .cloud-drift{animation:drift 22s ease-in-out infinite;}
  .cloud-drift-slow{animation:drift 30s ease-in-out infinite reverse;}
  @keyframes drift{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(28px);}
  }
  @media (prefers-reduced-motion: reduce){
    .hero::after{animation:none;}
  }
  .eyebrow-chip{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    margin-bottom:1.6rem;
    position:relative;
    z-index:2;
    font-size:0.88rem;
    font-weight:600;
    color:var(--ink-soft);
    letter-spacing:0.01em;
  }
  .eyebrow-chip::before{
    content:'';
    width:6px;height:6px;
    border-radius:50%;
    background:var(--teal);
    flex-shrink:0;
  }
  .hero h1{
    font-size:clamp(2.5rem, 5.4vw, 4.1rem);
    line-height:1.04;
    margin-bottom:1.4rem;
    position:relative;
    z-index:2;
  }
  .hero h1 .swoosh{
    position:relative;
    color:var(--violet);
  }
  .hero-sub{
    font-size:1.15rem;
    max-width:40ch;
    margin-bottom:2.1rem;
    position:relative;
    z-index:2;
  }
  .hero-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem;margin-bottom:2.6rem;position:relative;z-index:6;}
  .hero-ctas .btn-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1.15;
    padding:0.65rem 1.5rem;
  }
  .hero-search{
    width:100%;
    max-width:440px;
    position:relative;
    z-index:6;
  }
  .hero-search-box{position:relative;z-index:6;}
  .hero-search-field{
    display:flex;
    align-items:center;
    gap:0.7rem;
    background:#fff;
    border-radius:100px;
    padding:0.7rem 1.1rem;
    box-shadow:0 8px 28px rgba(28,22,51,0.1);
    border:1.5px solid transparent;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .hero-search-field:focus-within{
    border-color:var(--primary);
    box-shadow:0 10px 32px rgba(91,79,232,0.18);
  }
  .hero-search-field svg{
    flex-shrink:0;
    color:var(--ink-soft);
  }
  .hero-search-input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font:inherit;
    font-size:0.98rem;
    font-weight:500;
    color:var(--ink);
    min-width:0;
  }
  .hero-search-input::placeholder{color:var(--ink-soft);font-weight:500;}
  .hero-search-input::-webkit-search-cancel-button{-webkit-appearance:none;}
  .hero-search-suggest{margin-top:0.85rem;}
  .hero-search-suggest.is-hidden{display:none;}
  .hero-search-suggest-label{
    display:block;
    font-size:0.78rem;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:0.55rem;
  }
  .hero-country-chips{
    display:flex;
    flex-wrap:wrap;
    gap:0.45rem;
  }
  .hero-country-chip{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    padding:0.38rem 0.75rem 0.38rem 0.45rem;
    border-radius:100px;
    background:rgba(255,255,255,0.82);
    border:1px solid rgba(226,222,245,0.95);
    color:var(--ink);
    font-size:0.82rem;
    font-weight:600;
    text-decoration:none !important;
    transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .hero-country-chip img{
    width:18px;
    height:14px;
    border-radius:2px;
    object-fit:cover;
    box-shadow:0 1px 2px rgba(28,22,51,0.12);
  }
  .hero-country-chip:hover,
  .hero-country-chip:focus{
    transform:translateY(-1px);
    border-color:var(--primary);
    color:var(--ink);
    box-shadow:0 6px 16px rgba(28,22,51,0.1);
    text-decoration:none !important;
  }
  .hero-search-results{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 0.45rem);
    background:#fff;
    border-radius:18px;
    box-shadow:0 16px 40px rgba(28,22,51,0.16);
    border:1px solid rgba(226,222,245,0.95);
    overflow:hidden;
    z-index:30;
    max-height:280px;
    overflow-y:auto;
  }
  .hero-search-results[hidden]{display:none !important;}
  .hero-search-result{
    display:flex;
    align-items:center;
    gap:0.7rem;
    width:100%;
    padding:0.75rem 1rem;
    border:none;
    background:transparent;
    text-align:left;
    font:inherit;
    font-weight:600;
    font-size:0.92rem;
    color:var(--ink);
    text-decoration:none !important;
    cursor:pointer;
    transition:background 0.15s ease;
  }
  .hero-search-result:hover,
  .hero-search-result:focus,
  .hero-search-result.is-active{
    background:#F4F2FF;
    color:var(--ink);
    text-decoration:none !important;
  }
  .hero-search-result img{
    width:24px;
    height:18px;
    border-radius:3px;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 1px 2px rgba(28,22,51,0.12);
  }
  .hero-search-result span{flex:1;}
  .hero-search-result small{
    font-size:0.75rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .hero-search-empty{
    padding:1rem;
    font-size:0.88rem;
    color:var(--ink-soft);
    text-align:center;
  }
  .hero-search-more{
    display:block;
    padding:0.75rem 1rem;
    font-size:0.85rem;
    font-weight:700;
    color:var(--primary);
    text-decoration:none !important;
    border-top:1px solid rgba(226,222,245,0.95);
  }
  .hero-search-more:hover{background:#F4F2FF;}
  .avatar-row{display:flex;align-items:center;gap:0.8rem;position:relative;z-index:1;}
  .avatar-stack{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .avatar-stack img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:2.5px solid #fff;
    box-shadow:0 2px 8px rgba(28,22,51,0.12);
    margin-left:-12px;
  }
  .avatar-stack img:first-child{margin-left:0;}

  .phone-stage{
    position:relative;
    width:100%;
    max-width:480px;
    aspect-ratio:1/1;
    margin:0 auto;
    perspective:1500px;
    perspective-origin:50% 44%;
    --mx:0;
    --my:0;
  }
  .phone-scene{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transform-style:preserve-3d;
    transform:rotateX(calc(4deg + var(--my) * -7deg)) rotateY(calc(-17deg + var(--mx) * 11deg));
    transition:transform 0.5s cubic-bezier(0.2,0.7,0.3,1);
  }
  .phone-blob{
    position:absolute;
    width:74%;
    height:74%;
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%, rgba(143,133,245,0.55), rgba(91,79,232,0.28) 45%, rgba(255,107,74,0.14) 70%, transparent 78%);
    filter:blur(26px);
    transform:translateZ(-140px);
    animation:blob-breathe 8s ease-in-out infinite;
  }
  .phone-ground{
    position:absolute;
    bottom:6%;
    width:210px;
    height:44px;
    border-radius:50%;
    background:radial-gradient(ellipse, rgba(28,22,51,0.28), transparent 70%);
    filter:blur(12px);
    transform:translateZ(-60px);
  }
  .phone{
    position:relative;
    width:222px;
    height:444px;
    transform-style:preserve-3d;
    animation:phone-float 7s ease-in-out infinite;
  }
  .phone-edge{
    position:absolute;
    inset:-3px;
    border-radius:42px;
    background:linear-gradient(120deg, #4A4287 0%, #1A1533 40%, #0F0C24 100%);
    transform:translateZ(-14px);
  }
  .phone-body{
    position:absolute;
    inset:0;
    border-radius:40px;
    background:linear-gradient(145deg, #3B3470 0%, #1C1633 42%, #272052 100%);
    box-shadow:
      0 48px 80px rgba(28,22,51,0.38),
      0 8px 20px rgba(28,22,51,0.2),
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset -1px 0 0 rgba(255,255,255,0.08);
    transform-style:preserve-3d;
  }
  .phone-btn{
    position:absolute;
    right:-3px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:linear-gradient(180deg, #4A4287, #2A2352);
    transform:translateZ(-6px);
  }
  .phone-btn.b1{top:112px;height:52px;}
  .phone-btn.b2{top:176px;height:34px;}
  .phone-screen{
    position:absolute;
    inset:9px;
    border-radius:33px;
    background:linear-gradient(175deg, #FBFAFF 0%, #F3F1FC 100%);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:0.55rem 0.85rem 0.95rem;
  }
  .phone-notch{
    position:absolute;
    top:9px;
    left:50%;
    transform:translateX(-50%);
    width:78px;
    height:20px;
    border-radius:12px;
    background:#141028;
    z-index:4;
  }
  .phone-glass{
    position:absolute;
    inset:0;
    border-radius:33px;
    background:linear-gradient(118deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 22%, transparent 46%);
    pointer-events:none;
    z-index:5;
  }
  .scr-status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.58rem;
    font-weight:700;
    color:var(--ink);
    padding:0.15rem 0.3rem 0;
    height:22px;
  }
  .scr-status .net{display:flex;align-items:center;gap:3px;}
  .scr-status .bar{width:2.5px;border-radius:1px;background:var(--ink);}
  .scr-status .bar:nth-child(1){height:4px;}
  .scr-status .bar:nth-child(2){height:6px;}
  .scr-status .bar:nth-child(3){height:8px;}
  .scr-status .batt{
    width:16px;height:8px;border:1px solid var(--ink);border-radius:2px;
    position:relative;
  }
  .scr-status .batt::after{
    content:'';position:absolute;inset:1.5px;right:5px;background:var(--teal);border-radius:1px;
  }
  .scr-brand{
    margin-top:0.7rem;
    font-family:'Baloo 2',sans-serif;
    font-weight:800;
    font-size:0.92rem;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:0.35rem;
  }
  .scr-brand i{
    width:7px;height:7px;border-radius:50%;background:var(--teal);
    display:inline-block;
    animation:live-dot 2s ease-in-out infinite;
  }
  .scr-plan{
    margin-top:0.55rem;
    background:#fff;
    border-radius:14px;
    padding:0.5rem 0.6rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
    box-shadow:0 6px 16px rgba(28,22,51,0.07);
  }
  .scr-plan img{width:24px;height:18px;border-radius:3px;object-fit:cover;}
  .scr-plan b{font-size:0.72rem;color:var(--ink);display:block;line-height:1.2;}
  .scr-plan span{font-size:0.6rem;color:var(--ink-soft);font-weight:600;}
  .scr-stage{
    position:relative;
    flex:1;
    margin-top:0.6rem;
    border-radius:18px;
    background:linear-gradient(160deg, #EFECFF 0%, #F7F2FF 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .scr-qr{
    position:absolute;
    width:96px;
    height:96px;
    padding:7px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(28,22,51,0.12);
    animation:qr-cycle 9s ease-in-out infinite;
  }
  .scr-qr svg{width:100%;height:100%;display:block;}
  .scr-scan{
    position:absolute;
    width:110px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--coral), transparent);
    box-shadow:0 0 12px rgba(255,107,74,0.8);
    animation:scan-cycle 9s ease-in-out infinite;
  }
  .scr-spinner{
    position:absolute;
    width:34px;height:34px;
    border-radius:50%;
    border:3px solid rgba(28,22,51,0.18);
    border-top-color:var(--primary);
    opacity:0;
    animation:spin-cycle 9s ease-in-out infinite, spin 0.9s linear infinite;
  }
  .scr-check{
    position:absolute;
    width:56px;height:56px;
    border-radius:50%;
    background:var(--teal);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0.4);
    box-shadow:0 10px 26px rgba(46,196,182,0.4);
    animation:check-cycle 9s ease-in-out infinite;
  }
  .scr-check::after{
    content:'';
    width:17px;height:9px;
    border-left:3.5px solid #fff;
    border-bottom:3.5px solid #fff;
    transform:rotate(-45deg) translate(1px,-2px);
    border-radius:1px;
  }
  .scr-ripple{
    position:absolute;
    width:56px;height:56px;
    border-radius:50%;
    border:2px solid var(--teal);
    opacity:0;
    animation:ripple-cycle 9s ease-out infinite;
  }
  .scr-label{
    position:absolute;
    bottom:9px;
    font-size:0.62rem;
    font-weight:700;
    color:var(--ink-soft);
    opacity:0;
  }
  .scr-label.l1{animation:label-1 9s ease-in-out infinite;}
  .scr-label.l2{animation:label-2 9s ease-in-out infinite;}
  .scr-label.l3{animation:label-3 9s ease-in-out infinite;color:var(--teal);}
  .scr-foot{
    margin-top:0.55rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.4rem;
  }
  .scr-speed{display:flex;align-items:flex-end;gap:3px;height:22px;}
  .scr-speed i{
    width:5px;
    border-radius:2px;
    background:var(--primary);
    transform-origin:bottom;
    transform:scaleY(0.18);
    opacity:0.3;
    animation:speed-cycle 9s ease-out infinite;
  }
  .scr-speed i:nth-child(1){height:9px;animation-delay:0s;}
  .scr-speed i:nth-child(2){height:14px;animation-delay:0.12s;}
  .scr-speed i:nth-child(3){height:18px;animation-delay:0.24s;}
  .scr-speed i:nth-child(4){height:22px;animation-delay:0.36s;}
  .scr-usage{
    font-size:0.58rem;
    font-weight:700;
    color:var(--ink-soft);
    text-align:right;
    line-height:1.25;
  }
  .scr-usage b{display:block;font-size:0.72rem;color:var(--ink);}

  .float-card{
    position:absolute;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(10px);
    border-radius:18px;
    padding:0.55rem 0.8rem;
    box-shadow:0 20px 44px rgba(28,22,51,0.16);
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-weight:700;
    font-size:0.8rem;
    color:var(--ink);
    white-space:nowrap;
    transform-style:preserve-3d;
    animation:card-bob 5.5s ease-in-out infinite;
    --z:110px;
    --face:15deg;
    --lift:14px;
  }
  .float-card img{width:20px;height:15px;border-radius:2px;object-fit:cover;}
  .float-card small{display:block;font-size:0.62rem;font-weight:600;color:var(--ink-soft);}
  .float-card.f1{top:9%;left:-1%;--z:130px;animation-delay:0s;}
  .float-card.f2{top:45%;right:-7%;--z:165px;--lift:17px;animation-delay:1.4s;}
  .float-card.f3{bottom:11%;left:1%;--z:95px;--lift:11px;animation-delay:2.6s;}
  .float-chip{
    position:absolute;
    display:flex;
    align-items:center;
    gap:0.4rem;
    padding:0.4rem 0.7rem;
    border-radius:100px;
    background:var(--ink);
    color:#fff;
    font-size:0.7rem;
    font-weight:700;
    box-shadow:0 16px 34px rgba(28,22,51,0.28);
    transform-style:preserve-3d;
    animation:card-bob 6.5s ease-in-out infinite;
    --z:150px;
    --face:15deg;
    --lift:12px;
  }
  .float-chip .pulse{
    width:7px;height:7px;border-radius:50%;background:var(--teal);
    animation:live-dot 1.8s ease-in-out infinite;
  }
  .float-chip.c1{top:18%;right:-6%;--z:185px;animation-delay:0.7s;}
  .float-chip.c2{bottom:20%;right:-8%;--z:120px;--lift:9px;animation-delay:2s;background:var(--coral);}

  @keyframes phone-float{
    0%,100%{transform:translateY(0) rotateZ(0deg);}
    50%{transform:translateY(-16px) rotateZ(-0.6deg);}
  }
  @keyframes blob-breathe{
    0%,100%{transform:translateZ(-140px) scale(1);opacity:0.9;}
    50%{transform:translateZ(-140px) scale(1.09);opacity:1;}
  }
  @keyframes card-bob{
    0%,100%{transform:translate3d(0,0,var(--z)) rotateY(var(--face));}
    50%{transform:translate3d(0,calc(var(--lift) * -1),var(--z)) rotateY(var(--face));}
  }
  @keyframes live-dot{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.45;transform:scale(0.82);}
  }
  @keyframes spin{
    to{transform:rotate(360deg);}
  }
  @keyframes qr-cycle{
    0%,2%{opacity:0;transform:scale(0.9);}
    6%,36%{opacity:1;transform:scale(1);}
    42%,100%{opacity:0;transform:scale(0.92);}
  }
  @keyframes scan-cycle{
    0%,5%{opacity:0;transform:translateY(-46px);}
    8%{opacity:1;}
    34%{opacity:1;transform:translateY(46px);}
    38%,100%{opacity:0;transform:translateY(46px);}
  }
  @keyframes spin-cycle{
    0%,41%{opacity:0;}
    45%,55%{opacity:1;}
    59%,100%{opacity:0;}
  }
  @keyframes check-cycle{
    0%,58%{opacity:0;transform:scale(0.4);}
    64%{opacity:1;transform:scale(1.12);}
    68%,92%{opacity:1;transform:scale(1);}
    97%,100%{opacity:0;transform:scale(0.9);}
  }
  @keyframes ripple-cycle{
    0%,60%{opacity:0;transform:scale(0.6);}
    66%{opacity:0.7;transform:scale(1);}
    80%,100%{opacity:0;transform:scale(2.1);}
  }
  @keyframes label-1{
    0%,4%{opacity:0;}
    9%,34%{opacity:1;}
    39%,100%{opacity:0;}
  }
  @keyframes label-2{
    0%,42%{opacity:0;}
    46%,55%{opacity:1;}
    59%,100%{opacity:0;}
  }
  @keyframes label-3{
    0%,62%{opacity:0;}
    67%,92%{opacity:1;}
    97%,100%{opacity:0;}
  }
  @keyframes speed-cycle{
    0%,60%{transform:scaleY(0.18);opacity:0.3;}
    70%,92%{transform:scaleY(1);opacity:1;}
    98%,100%{transform:scaleY(0.18);opacity:0.3;}
  }
  @media (max-width: 991.98px){
    .float-card.f1{left:0;}
    .float-card.f2{right:-2%;}
    .float-card.f3{left:2%;}
    .float-chip.c1{right:2%;}
  }
  @media (prefers-reduced-motion: reduce){
    .phone, .phone-blob, .float-card, .float-chip, .scr-qr, .scr-scan,
    .scr-spinner, .scr-check, .scr-ripple, .scr-label, .scr-speed i,
    .scr-brand i, .float-chip .pulse,
    .cloud-drift, .cloud-drift-slow{animation:none !important;}
    .phone-scene{transition:none;}
    .scr-qr{opacity:1;}
    .scr-label.l1{opacity:1;}
    .scr-speed i{transform:scaleY(1);opacity:1;}
  }

  .stat-strip{
    display:flex;
    gap:3rem;
    flex-wrap:wrap;
    justify-content:center;
    padding:2.6rem 0;
  }
  .stat-item{text-align:center;}
  .stat-num{
    font-family:'Baloo 2',sans-serif;
    font-weight:800;
    font-size:2.4rem;
    color:var(--primary);
    line-height:1;
  }
  .stat-label{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}

  section{padding:4rem 0;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 3.2rem;}
  .kicker{
    color:var(--coral);
    font-weight:700;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:0.6rem;
    display:block;
  }
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem);}

  .step-card{
    background:var(--card);
    border-radius:28px;
    padding:2.3rem 1.9rem;
    height:100%;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .step-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(28,22,51,0.12);}
  .step-anim{
    width:100%;
    height:120px;
    border-radius:20px;
    margin-bottom:1.3rem;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .step-anim.dest{background:linear-gradient(160deg, #FFF5F2 0%, #FFEFE9 100%);}
  .step-anim.qr{background:linear-gradient(160deg, #F0FBF9 0%, #EAF9F5 100%);}
  .step-anim.land{background:linear-gradient(160deg, #FFFBF0 0%, #FFF7E0 100%);}

  /* 1 — globe + destination cards */
  .anim-dest-scene{
    position:relative;
    display:flex;
    align-items:center;
    width:170px;
    height:52px;
  }
  .anim-globe-wrap{
    position:relative;
    width:52px;height:52px;
    flex-shrink:0;
  }
  .anim-globe{
    width:52px;height:52px;
    border-radius:50%;
    background:linear-gradient(145deg, var(--violet-soft), var(--violet));
    position:relative;
    animation:globe-spin 8s linear infinite;
  }
  .anim-globe::before,
  .anim-globe::after{
    content:'';
    position:absolute;
    border:1.5px solid rgba(255,255,255,0.35);
    border-radius:50%;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
  }
  .anim-globe::before{width:70%;height:28%;}
  .anim-globe::after{width:70%;height:52%;}
  .anim-globe span{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.25);
    transform:scaleX(0.35);
  }
  .anim-cards{
    position:relative;
    width:110px;
    height:36px;
    margin-left:0.65rem;
    flex-shrink:0;
  }
  .anim-card{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    gap:0.45rem;
    background:#fff;
    border-radius:10px;
    padding:0.35rem 0.55rem;
    box-shadow:0 4px 14px rgba(28,22,51,0.08);
    opacity:0;
    transform:translateX(12px) scale(0.92);
    animation:card-cycle 6s ease-in-out infinite;
  }
  .anim-card:nth-child(2){animation-delay:2s;}
  .anim-card:nth-child(3){animation-delay:4s;}
  .anim-card img{width:22px;height:16px;border-radius:2px;object-fit:cover;}
  .anim-card b{font-size:0.72rem;color:var(--ink);font-weight:700;}
  @keyframes globe-spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
  @keyframes card-cycle{
    0%,28%,100%{opacity:0;transform:translateX(12px) scale(0.92);}
    5%,22%{opacity:1;transform:translateX(0) scale(1);}
  }

  /* 2 — phone install */
  .anim-phone{
    width:54px;height:88px;
    background:#fff;
    border-radius:12px;
    border:2px solid rgba(46,196,182,0.35);
    position:relative;
    box-shadow:0 8px 20px rgba(28,22,51,0.08);
  }
  .anim-phone-notch{
    width:18px;height:4px;
    background:#E8E4F5;
    border-radius:4px;
    margin:8px auto 0;
  }
  .anim-phone-screen{
    position:absolute;
    inset:18px 8px 10px;
    background:#F4FBFA;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .anim-qr-mini{
    width:28px;height:28px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3px;
    opacity:0;
    animation:qr-appear 3s ease-in-out infinite;
  }
  .anim-qr-mini i{
    background:var(--teal);
    border-radius:1px;
    opacity:0;
    animation:qr-dot 3s ease-in-out infinite;
  }
  .anim-qr-mini i:nth-child(1){animation-delay:0.1s;}
  .anim-qr-mini i:nth-child(2){animation-delay:0.2s;}
  .anim-qr-mini i:nth-child(3){animation-delay:0.15s;}
  .anim-qr-mini i:nth-child(4){animation-delay:0.25s;}
  .anim-qr-mini i:nth-child(5){animation-delay:0.35s;}
  .anim-qr-mini i:nth-child(6){animation-delay:0.3s;}
  .anim-qr-mini i:nth-child(7){animation-delay:0.4s;}
  .anim-qr-mini i:nth-child(8){animation-delay:0.5s;}
  .anim-qr-mini i:nth-child(9){animation-delay:0.45s;}
  .anim-check{
    position:absolute;
    width:22px;height:22px;
    border-radius:50%;
    background:var(--teal);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0.5);
    animation:check-pop 3s ease-in-out infinite;
  }
  .anim-check::after{
    content:'';
    width:5px;height:9px;
    border:2px solid #fff;
    border-top:none;border-left:none;
    transform:rotate(45deg) translate(-1px,-1px);
  }
  @keyframes qr-appear{
    0%,15%,55%,100%{opacity:0;}
    25%,45%{opacity:1;}
  }
  @keyframes qr-dot{
    0%,15%,55%,100%{opacity:0;transform:scale(0.5);}
    25%,45%{opacity:1;transform:scale(1);}
  }
  @keyframes check-pop{
    0%,48%,100%{opacity:0;transform:scale(0.5);}
    58%,78%{opacity:1;transform:scale(1);}
  }

  /* 3 — signal bars + connected */
  .anim-connect{
    display:flex;
    align-items:flex-end;
    gap:5px;
    height:44px;
  }
  .anim-connect span{
    width:8px;
    background:var(--yellow);
    border-radius:4px;
    transform-origin:bottom;
    animation:bar-rise 2.4s ease-in-out infinite;
  }
  .anim-connect span:nth-child(1){height:14px;animation-delay:0s;}
  .anim-connect span:nth-child(2){height:24px;animation-delay:0.15s;}
  .anim-connect span:nth-child(3){height:34px;animation-delay:0.3s;}
  .anim-connect span:nth-child(4){height:44px;animation-delay:0.45s;}
  .anim-connected{
    margin-left:0.75rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.35rem;
  }
  .anim-connected-dot{
    width:10px;height:10px;
    border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 0 0 rgba(46,196,182,0.5);
    animation:connected-pulse 2.4s ease-out infinite;
  }
  .anim-connected-label{
    font-size:0.68rem;
    font-weight:700;
    color:var(--ink-soft);
    letter-spacing:0.04em;
    text-transform:uppercase;
    opacity:0;
    animation:label-fade 2.4s ease-in-out infinite;
  }
  @keyframes bar-rise{
    0%,100%{transform:scaleY(0.3);opacity:0.35;}
    40%,70%{transform:scaleY(1);opacity:1;}
  }
  @keyframes connected-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(46,196,182,0.5);}
    50%{box-shadow:0 0 0 8px rgba(46,196,182,0);}
  }
  @keyframes label-fade{
    0%,35%{opacity:0;}
    50%,80%{opacity:1;}
    100%{opacity:0;}
  }

  @media (prefers-reduced-motion: reduce){
    .anim-globe, .anim-card, .anim-qr-mini, .anim-qr-mini i, .anim-check,
    .anim-connect span, .anim-connected-dot, .anim-connected-label{animation:none;}
    .anim-card:first-child{opacity:1;transform:none;}
    .anim-qr-mini{opacity:1;}
    .anim-qr-mini i{opacity:1;transform:none;}
    .anim-check{opacity:1;transform:none;}
    .anim-connect span{transform:scaleY(1);opacity:1;}
    .anim-connected-label{opacity:1;}
  }
  .step-card h3{font-size:1.2rem;margin-bottom:0.6rem;}
  .step-card p{font-size:0.95rem;margin:0;}

  .coverage-card{
    background:var(--ink);
    border-radius:36px;
    padding:3rem;
    position:relative;
    overflow:hidden;
    color:#fff;
  }
  .coverage-card h2{color:#fff;}
  .coverage-card p{color:#C8C3E0;}
  .dot-map{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:20px;
    overflow:hidden;
    background:radial-gradient(ellipse at 40% 40%, #2A2450 0%, #1C1633 70%);
  }
  .dot-map-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 40%;
    opacity:0.45;
    filter:brightness(1.4) contrast(1.1) saturate(0.3);
    pointer-events:none;
    user-select:none;
  }
  .map-pin{
    position:absolute;
    transform:translate(-50%, -50%);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.35rem;
  }
  .map-pin.label-above{flex-direction:column-reverse;}
  .map-pin.label-left{flex-direction:row-reverse;gap:0.4rem;}
  .map-pin.label-right{flex-direction:row;gap:0.4rem;}
  .map-pin .dot{
    position:relative;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--yellow);
    box-shadow:0 0 0 3px rgba(255,201,60,0.25);
    flex-shrink:0;
  }
  .map-pin .dot::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:var(--yellow);
    animation:pulse 2.6s ease-out infinite;
  }
  .map-pin:nth-child(odd) .dot::after{animation-delay:0.8s;}
  .map-pin:nth-child(3n) .dot::after{animation-delay:1.5s;}
  .map-pin .pin-label{
    background:rgba(255,255,255,0.95);
    color:var(--ink);
    font-size:0.68rem;
    font-weight:700;
    padding:0.22rem 0.55rem;
    border-radius:100px;
    white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    line-height:1.2;
  }
  @keyframes pulse{
    0%{transform:scale(1);opacity:0.7;}
    100%{transform:scale(3.2);opacity:0;}
  }
  @media (max-width: 767.98px){
    .map-pin .pin-label{font-size:0.58rem;padding:0.15rem 0.4rem;}
    .map-pin .dot{width:8px;height:8px;}
  }
  .country-pill{
    background:rgba(255,255,255,0.08);
    border-radius:100px;
    padding:0.4rem 0.9rem;
    font-size:0.82rem;
    font-weight:600;
    display:inline-block;
    margin:0.25rem 0.3rem 0 0;
  }
  .country-pill.more{background:var(--yellow);color:var(--ink);}

  /* ---- Countries section (replaces pricing plans) ---- */
  .region-tab{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-weight:700;
    font-size:1.05rem;
    margin-bottom:1.4rem;
  }
  .region-tab .swatch{width:12px;height:12px;border-radius:50%;}
  .country-card{
    background:var(--card);
    border-radius:20px;
    padding:1.2rem 1.3rem;
    display:flex;
    align-items:center;
    gap:0.85rem;
    box-shadow:0 4px 16px rgba(28,22,51,0.05);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    height:100%;
  }
  .country-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(28,22,51,0.1);}
  .country-flag{
    width:36px;height:27px;
    border-radius:4px;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 1px 3px rgba(28,22,51,0.12);
  }
  .country-pill .flag-img{
    width:18px;height:13px;
    border-radius:2px;
    object-fit:cover;
    margin-right:0.35rem;
    vertical-align:middle;
  }
  .country-name{font-weight:700;font-size:0.98rem;margin-bottom:0.15rem;}
  .country-meta{font-size:0.78rem;color:var(--ink-soft);}
  .country-price{font-size:0.85rem;font-weight:700;color:var(--primary);margin-top:0.35rem;}
  .country-price span{font-weight:500;color:var(--ink-soft);font-size:0.72rem;}
  .country-price.soon{color:var(--ink-soft);font-weight:600;font-size:0.78rem;}

  #countries .country-card{
    flex-direction:column;
    align-items:flex-start;
    padding:1.35rem 1.25rem;
    gap:0.9rem;
  }
  #countries .country-card-body{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex:1;
  }
  #countries .country-buy{
    margin-top:1.1rem;
    align-self:flex-start;
    width:auto;
    padding:0.32rem 0.85rem;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.2;
    box-shadow:none;
  }
  #countries .country-buy:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(28,22,51,0.22);
  }

  @media (max-width: 767.98px){
    .hero{padding-top:3.8rem;padding-bottom:1.6rem;}
    .hero .eyebrow-chip{margin-bottom:1.1rem;}
    .hero h1{font-size:clamp(2rem, 8vw, 2.6rem);}
    .hero-sub{font-size:0.98rem;margin-bottom:1.4rem;}
    .hero::after{display:none;}
    .hero-ctas{flex-direction:column;align-items:center;gap:0.9rem;margin-bottom:1.6rem;}
    .hero-search{max-width:100%;}
    .hero-search-field{padding:0.65rem 1rem;}
    .hero-country-chips{justify-content:center;}
    .hero-search-suggest-label{text-align:center;}
    .hero .avatar-row{display:none;}
    .stat-strip{gap:1.4rem 2rem;padding:1.6rem 0 0.4rem;}
    .stat-num{font-size:1.9rem;}

    #countries .country-card{
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:1.45rem 1.15rem;
      gap:0.65rem;
      border-radius:16px;
    }
    #countries .country-card-body{
      align-items:center;
      text-align:center;
    }
    #countries .country-flag{
      width:36px;
      height:27px;
    }
    #countries .country-name{
      font-size:0.9rem;
      margin-bottom:0.15rem;
      line-height:1.25;
    }
    #countries .country-meta{
      font-size:0.7rem;
      line-height:1.3;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    #countries .country-price{
      font-size:0.82rem;
      margin-top:0.5rem;
      line-height:1.3;
    }
    #countries .country-price span{
      display:block;
      margin-top:0.15rem;
      font-size:0.68rem;
    }
    #countries .country-buy{
      align-self:center;
      margin-top:1rem;
      padding:0.3rem 0.75rem;
      font-size:0.7rem;
    }
  }

  @media (max-width: 575.98px){
    #countries .row.g-3{--bs-gutter-x:0.75rem;--bs-gutter-y:0.75rem;}
    #countries .country-card{padding:1.35rem 1rem;min-height:100%;}
    #countries .country-name{font-size:0.86rem;}
  }

  .testi-card{
    background:var(--card);
    border-radius:24px;
    padding:2rem;
    height:100%;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);
  }
  .testi-avatar{
    width:52px;height:52px;border-radius:50%;
    object-fit:cover;
    display:block;
    margin-bottom:1rem;
    box-shadow:0 4px 12px rgba(28,22,51,0.12);
  }
  .testi-card p{font-size:0.95rem;color:var(--ink);margin-bottom:1rem;}
  .testi-name{
    display:flex;
    align-items:center;
    gap:0.45rem;
    flex-wrap:wrap;
    font-size:0.85rem;
    font-weight:700;
    color:var(--ink-soft);
  }
  .testi-flags{display:inline-flex;align-items:center;gap:0.3rem;}
  .testi-flags img{
    width:20px;
    height:15px;
    border-radius:2px;
    object-fit:cover;
    box-shadow:0 1px 2px rgba(28,22,51,0.15);
  }

  .accordion-item{
    border:none !important;
    border-radius:20px !important;
    margin-bottom:0.9rem;
    background:var(--card);
    overflow:hidden;
    box-shadow:0 4px 16px rgba(28,22,51,0.04);
  }
  .accordion-button{
    border-radius:20px !important;
    background:var(--card);
    font-family:'Baloo 2',sans-serif;
    font-weight:600;
    font-size:1.02rem;
    color:var(--ink);
    box-shadow:none !important;
    padding:1.3rem 1.6rem;
  }
  .accordion-button:not(.collapsed){
    background:var(--card);
    color:var(--primary);
  }
  .accordion-body{color:var(--ink-soft);font-size:0.94rem;padding:0 1.6rem 1.4rem;}

  .cta-banner{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:stretch;
    background:linear-gradient(120deg, var(--primary) 0%, var(--violet) 100%);
    border-radius:36px;
    padding:0;
    text-align:left;
    color:#fff;
    position:relative;
    overflow:hidden;
    min-height:320px;
  }
  .cta-banner-copy{
    padding:3.2rem 2.6rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    z-index:1;
  }
  .cta-banner h2{color:#fff;margin-bottom:1rem;}
  .cta-banner p{color:#E6E3FB;max-width:40ch;margin:0 0 2rem;}
  .cta-banner-media{
    position:relative;
    min-height:260px;
    height:100%;
    overflow:hidden;
    border-radius:0 36px 36px 0;
  }
  .cta-banner-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .cta-banner-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(91,79,232,0.45) 0%, transparent 55%);
    pointer-events:none;
  }
  @media (max-width:768px){
    .cta-banner{grid-template-columns:1fr;text-align:center;}
    .cta-banner-copy{padding:2.4rem 1.6rem 2rem;align-items:center;}
    .cta-banner p{margin-left:auto;margin-right:auto;}
    .cta-banner-media{
      min-height:200px;
      order:-1;
      border-radius:36px 36px 0 0;
    }
    .cta-banner-media::after{
      background:linear-gradient(180deg, transparent 40%, rgba(91,79,232,0.55) 100%);
    }
  }

  footer{
    background:var(--ink);
    color:#fff;
    padding:0;
    margin-top:0;
  }
  .footer-top{
    padding:4rem 0 3rem;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-brand{
    margin-bottom:1.5rem;
  }
  .footer-logo{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.45rem;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    text-decoration:none !important;
    margin-bottom:1rem;
  }
  .footer-logo:hover{color:#fff;}
  .footer-brand p{
    color:#fff;
    font-size:0.92rem;
    line-height:1.65;
    max-width:32ch;
    margin-bottom:1.4rem;
  }
  .footer-stats{
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
    margin-bottom:1.5rem;
  }
  .footer-stat strong{
    display:block;
    font-family:'Baloo 2', sans-serif;
    font-size:1.35rem;
    font-weight:800;
    color:var(--yellow);
    line-height:1.1;
  }
  .footer-stat span{
    font-size:0.72rem;
    font-weight:600;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .footer-social{
    display:flex;
    gap:0.55rem;
  }
  .footer-social a{
    width:38px;height:38px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none !important;
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .footer-social a:hover{
    background:rgba(28,22,51,0.35);
    border-color:rgba(91,79,232,0.5);
    transform:translateY(-2px);
    color:#fff;
  }
  .footer-col-title{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:0.95rem;
    color:#fff;
    margin-bottom:1.1rem;
    letter-spacing:0.01em;
  }
  .footer-links{
    list-style:none;
    padding:0;
    margin:0;
  }
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{
    color:#fff;
    text-decoration:none !important;
    font-size:0.88rem;
    font-weight:500;
    transition:opacity 0.2s ease;
  }
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{
    list-style:none;
    padding:0;
    margin:0;
  }
  .footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:0.65rem;
    margin-bottom:0.85rem;
    font-size:0.88rem;
    color:#fff;
  }
  .footer-contact svg{flex-shrink:0;margin-top:2px;opacity:0.85;}
  .footer-contact a{
    color:#fff;
    text-decoration:none !important;
  }
  .footer-contact a:hover{opacity:0.75;}
  .footer-trust{
    padding:1.6rem 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-trust-inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem 2.5rem;
  }
  .footer-trust-item{
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-size:0.82rem;
    font-weight:600;
    color:#fff;
  }
  .footer-trust-item svg{opacity:0.85;}
  .foot-bottom{
    padding:1.5rem 0 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.8rem;
    color:#fff;
  }
  .foot-legal{
    display:flex;
    flex-wrap:wrap;
    gap:0.35rem 1.2rem;
  }
  .foot-legal a{
    color:#fff;
    text-decoration:none !important;
    transition:opacity 0.2s ease;
  }
  .foot-legal a:hover{opacity:0.75;}

/* ===== from pays.html ===== */
:root{
    --bg:#F6F5FC;
    --bg-hero-a:#EFE9FF;
    --bg-hero-b:#FFEDE3;
    --ink:#1C1633;
    --ink-soft:#5B5578;
    --primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;
    --primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;
    --yellow:#FFC93C;
    --teal:#2EC4B6;
    --card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}

  .navbar{
    background:#fff;
    backdrop-filter:blur(10px);
    padding-top:1.1rem;
    padding-bottom:1.1rem;
    position:sticky;
    top:0;
    z-index:50;
  }
  .navbar-brand{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.5rem;
    display:flex;
    align-items:center;
    gap:0.55rem;
    color:var(--ink) !important;
    text-decoration:none !important;
  }
  .nav-link.custom{
    font-weight:600;
    font-size:0.95rem;
    color:var(--ink) !important;
    padding:0.5rem 1rem !important;
    text-decoration:none !important;
  }
  .btn-pill{
    font-weight:700;
    font-size:0.92rem;
    line-height:1.15;
    border-radius:100px;
    padding:0.65rem 1.5rem;
    background:var(--primary);
    color:#fff;
    border:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    cursor:pointer;
  }
  .btn-pill:hover,.btn-pill:focus{color:#fff;text-decoration:none !important;}
  .btn-pill:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(28,22,51,0.35);
  }
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{
    font-weight:700;
    font-size:0.92rem;
    border-radius:100px;
    padding:0.7rem 1.5rem;
    background:transparent;
    color:var(--ink);
    border:2px solid #E2DEF5;
    transition:border-color 0.2s ease, transform 0.2s ease;
    display:inline-block;
    text-decoration:none !important;
  }
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}

  .page-hero{
    position:relative;
    padding:3.5rem 0 2.5rem;
    background:linear-gradient(150deg, var(--bg-hero-a) 0%, var(--bg) 55%, var(--bg-hero-b) 100%);
    border-radius:0 0 48px 48px;
    overflow:hidden;
  }
  .cloud{
    position:absolute;
    background:#fff;
    border-radius:50%;
    opacity:0.7;
    filter:blur(0.5px);
  }
  .eyebrow-chip{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    margin-bottom:1.2rem;
    font-size:0.88rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .eyebrow-chip::before{
    content:'';
    width:6px;height:6px;
    border-radius:50%;
    background:var(--teal);
    flex-shrink:0;
  }
  .page-hero h1{
    font-size:clamp(2rem, 4.5vw, 3.2rem);
    line-height:1.08;
    margin-bottom:0.9rem;
  }
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{font-size:1.05rem;max-width:52ch;margin-bottom:0;}

  .toolbar{
    background:var(--card);
    border-radius:24px;
    padding:1.4rem 1.6rem;
    box-shadow:0 6px 24px rgba(28,22,51,0.06);
    margin-top:-1.8rem;
    margin-bottom:2.5rem;
    position:relative;
    z-index:2;
  }
  .search-wrap{position:relative;}
  .search-wrap svg{
    position:absolute;
    left:1rem;
    top:50%;
    transform:translateY(-50%);
    color:var(--ink-soft);
    pointer-events:none;
  }
  .search-input{
    width:100%;
    border:2px solid #E2DEF5;
    border-radius:100px;
    padding:0.75rem 1.2rem 0.75rem 2.8rem;
    font-size:0.95rem;
    font-weight:500;
    color:var(--ink);
    background:var(--bg);
    transition:border-color 0.2s ease;
  }
  .search-input:focus{
    outline:none;
    border-color:var(--primary);
    background:#fff;
  }
  .filter-groups{margin-top:1.25rem;}
  .filter-group{margin-bottom:0.85rem;}
  .filter-group:last-child{margin-bottom:0;}
  .filter-label{
    font-size:0.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    margin-bottom:0.45rem;
  }
  .filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:0.45rem;
  }
  .filter-btn{
    font-weight:600;
    font-size:0.78rem;
    border-radius:100px;
    padding:0.4rem 0.85rem;
    border:2px solid #E2DEF5;
    background:transparent;
    color:var(--ink-soft);
    cursor:pointer;
    transition:all 0.2s ease;
  }
  .filter-btn:hover{border-color:var(--primary);color:var(--ink);}
  .filter-btn.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
  }
  .filter-btn.active.coral{background:#1C1633;border-color:#1C1633;}
  .filter-btn.active.teal{background:#1C1633;border-color:#1C1633;}
  .filter-btn.active.yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}
  .toolbar-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid #E2DEF5;
  }
  .active-filters-count{
    font-size:0.8rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .active-filters-count.has-filters{color:var(--primary);}
  .clear-filters{
    font-size:0.8rem;
    font-weight:700;
    color:var(--coral);
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
  }
  .clear-filters.visible{opacity:1;pointer-events:auto;}
  .toggle-filters{
    font-size:0.8rem;
    font-weight:700;
    color:var(--primary);
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    display:flex;
    align-items:center;
    gap:0.35rem;
  }
  .toggle-filters svg{transition:transform 0.2s ease;}
  .toggle-filters.open svg{transform:rotate(180deg);}
  .filter-groups.collapsed .filter-group:not(.filter-group-main){display:none;}
  .results-meta{
    font-size:0.85rem;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:1.5rem;
  }
  .results-meta strong{color:var(--primary);}

  .country-card{
    background:var(--card);
    border-radius:20px;
    padding:1.2rem 1.3rem;
    display:flex;
    align-items:center;
    gap:0.85rem;
    box-shadow:0 4px 16px rgba(28,22,51,0.05);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    height:100%;
    cursor:pointer;
    border:none;
    width:100%;
    text-align:left;
  }
  .country-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(28,22,51,0.1);}
  .country-flag{
    width:36px;height:27px;
    border-radius:4px;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 1px 3px rgba(28,22,51,0.12);
  }
  .country-name{font-weight:700;font-size:0.98rem;margin-bottom:0.15rem;color:var(--ink);}
  .country-meta{font-size:0.78rem;color:var(--ink-soft);}
  .country-price{font-size:0.85rem;font-weight:700;color:var(--primary);margin-top:0.35rem;}
  .country-price span{font-weight:500;color:var(--ink-soft);font-size:0.72rem;}

  @media (max-width: 767.98px){
    .country-card{
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:1.15rem 0.75rem;
      gap:0.6rem;
    }
    .country-card > div{
      width:100%;
      text-align:center;
    }
    .country-flag{
      display:block;
      margin:0 auto;
    }
    .country-name{
      font-size:0.9rem;
      line-height:1.25;
    }
    .country-meta{
      font-size:0.7rem;
      line-height:1.3;
    }
    .country-price{
      font-size:0.82rem;
      margin-top:0.4rem;
    }
    .country-price span{
      font-size:0.68rem;
    }
  }

  .empty-state{
    text-align:center;
    padding:4rem 2rem;
    background:var(--card);
    border-radius:28px;
    box-shadow:0 4px 16px rgba(28,22,51,0.05);
  }
  .empty-state h3{font-size:1.3rem;margin-bottom:0.5rem;}

  .loading-state{
    text-align:center;
    padding:4rem 2rem;
    color:var(--ink-soft);
    font-weight:600;
  }

  /* Modal */
  .modal-content{
    border:none;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(28,22,51,0.18);
  }
  .modal-header{
    border:none;
    padding:1.8rem 1.8rem 0.5rem;
    background:linear-gradient(135deg, var(--bg-hero-a), var(--bg));
  }
  .modal-title-wrap{
    display:flex;
    align-items:center;
    gap:0.85rem;
  }
  .modal-title-wrap img{
    width:44px;height:33px;
    border-radius:5px;
    object-fit:cover;
    box-shadow:0 2px 6px rgba(28,22,51,0.12);
  }
  .modal-title{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:1.35rem;
    margin:0;
  }
  .modal-sub{font-size:0.82rem;color:var(--ink-soft);font-weight:600;}
  .modal-body{padding:0.75rem 1.5rem 1.25rem;}
  .plan-picker-title{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--ink);
    margin:0 0 0.85rem;
    line-height:1.2;
  }
  .plan-picker-title[hidden]{display:none !important;}
  .plan-picker-group{
    padding:0;
    margin:0 0 0.85rem;
  }
  .plan-picker-group:last-child{margin-bottom:0;}
  .plan-picker-days{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:1.15rem;
    color:var(--ink);
    margin:0 0 0.55rem;
    line-height:1.2;
  }
  .plan-picker-list{display:flex;flex-direction:column;gap:0.35rem;}
  .modal-day-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
    margin:0 0 1rem;
  }
  .modal-day-tabs[hidden]{display:none !important;}
  .modal-day-tab{
    border:1.5px solid #E2DEF5;
    background:transparent;
    color:var(--ink-soft);
    border-radius:999px;
    padding:0.4rem 0.85rem;
    font-size:0.8rem;
    font-weight:700;
    cursor:pointer;
    transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .modal-day-tab:hover,
  .modal-day-tab.active{
    border-color:var(--primary);
    color:var(--primary);
    background:#fff;
  }
  .plan-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.85rem;
    padding:0.7rem 0.95rem;
    background:#fff;
    border:1.5px solid #E8E4F5;
    border-radius:14px;
    margin-bottom:0;
    cursor:pointer;
    transition:background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .plan-item:hover{
    background:#F7F5FF;
    border-color:#D5CFF0;
  }
  .plan-item.is-selected{
    border-color:var(--primary);
    background:#F3F0FF;
    box-shadow:0 0 0 3px rgba(91,79,232,0.12);
  }
  .plan-item:last-child{margin-bottom:0;}
  .plan-item-main{min-width:0;flex:1;}
  .plan-item-buy{display:flex;flex-direction:column;align-items:flex-end;gap:0.45rem;flex-shrink:0;}
  .plan-data-amount{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.15rem;
    color:var(--ink);
    line-height:1.15;
    margin-bottom:0.2rem;
  }
  .plan-name{font-weight:700;font-size:0.92rem;color:var(--ink);margin-bottom:0.15rem;}
  .plan-meta{font-size:0.78rem;color:var(--ink-soft);}
  .plan-item .plan-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;}
  .plan-net{
    display:inline-flex;
    align-items:center;
    gap:0.28rem;
    flex-shrink:0;
    padding:0.22rem 0.5rem;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:800;
    letter-spacing:0.02em;
    line-height:1;
    background:rgba(91,79,232,0.1);
    color:var(--primary);
  }
  .plan-net-5g{background:rgba(34,197,94,0.12);color:#15803d;}
  .plan-net-4g{background:rgba(91,79,232,0.1);color:var(--violet);}
  .plan-net-3g{background:rgba(28,22,51,0.08);color:var(--ink-soft);}
  .plan-net-icon{display:block;}

  .checkout-auth-modal .modal-header{
    padding-bottom:0.35rem;
  }
  .checkout-auth-modal .modal-title{
    font-size:1.25rem;
  }
  .checkout-auth-modal .modal-sub{
    max-width:36ch;
    margin-top:0.35rem;
    line-height:1.45;
  }
  .checkout-auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.35rem;
    padding:0.3rem;
    margin-bottom:1.15rem;
    background:var(--bg);
    border-radius:14px;
  }
  .checkout-auth-tab{
    border:none;
    background:transparent;
    border-radius:11px;
    padding:0.65rem 0.75rem;
    font:inherit;
    font-size:0.88rem;
    font-weight:700;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  .checkout-auth-tab.is-active{
    background:#fff;
    color:var(--ink);
    box-shadow:0 4px 14px rgba(28,22,51,0.08);
  }
  .checkout-auth-form{
    display:flex;
    flex-direction:column;
    gap:0.95rem;
  }
  .checkout-auth-form .field label{
    display:block;
    font-size:0.82rem;
    font-weight:700;
    margin-bottom:0.35rem;
    color:var(--ink);
  }
  .checkout-auth-form .field input{
    width:100%;
    border:1.5px solid #E2DEF5;
    border-radius:14px;
    padding:0.75rem 0.95rem;
    font:inherit;
    font-size:0.95rem;
    background:#fff;
    color:var(--ink);
    outline:none;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .checkout-auth-form .field input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(91,79,232,0.12);
  }
  .checkout-auth-form .btn-pill.full{
    width:100%;
    margin-top:0.25rem;
    justify-content:center;
  }
  #checkout-auth-error{
    background:rgba(255,107,74,0.1);
    color:#C2410C;
    border-radius:12px;
    padding:0.75rem 0.9rem;
    font-size:0.88rem;
    font-weight:600;
    margin-bottom:0.85rem;
  }
  #checkout-auth-error[hidden]{display:none !important;}

  .plan-days-picker{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    margin-top:0.55rem;
    font-size:0.75rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .plan-days-picker select{
    border:1px solid rgba(42,36,84,0.12);
    border-radius:999px;
    padding:0.2rem 0.55rem;
    background:#fff;
    font:inherit;
    color:var(--ink);
  }
  .plan-days-picker .plan-period-custom{
    width:4.5rem;
    border:1px solid rgba(42,36,84,0.12);
    border-radius:999px;
    padding:0.2rem 0.55rem;
    background:#fff;
    font:inherit;
    color:var(--ink);
  }
  .plan-days-picker .plan-period-custom[hidden]{display:none !important;}
  .plan-price{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.1rem;
    color:var(--primary);
    white-space:nowrap;
  }
  .btn-close{opacity:0.5;}

  footer{
    background:var(--ink);
    color:#fff;
    padding:0;
    margin-top:0;
  }
  .footer-top{
    padding:4rem 0 3rem;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-brand{
    margin-bottom:1.5rem;
  }
  .footer-logo{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.45rem;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    text-decoration:none !important;
    margin-bottom:1rem;
  }
  .footer-logo:hover{color:#fff;}
  .footer-brand p{
    color:#fff;
    font-size:0.92rem;
    line-height:1.65;
    max-width:32ch;
    margin-bottom:1.4rem;
  }
  .footer-stats{
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
    margin-bottom:1.5rem;
  }
  .footer-stat strong{
    display:block;
    font-family:'Baloo 2', sans-serif;
    font-size:1.35rem;
    font-weight:800;
    color:var(--yellow);
    line-height:1.1;
  }
  .footer-stat span{
    font-size:0.72rem;
    font-weight:600;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .footer-social{
    display:flex;
    gap:0.55rem;
  }
  .footer-social a{
    width:38px;height:38px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none !important;
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .footer-social a:hover{
    background:rgba(28,22,51,0.35);
    border-color:rgba(91,79,232,0.5);
    transform:translateY(-2px);
    color:#fff;
  }
  .footer-col-title{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:0.95rem;
    color:#fff;
    margin-bottom:1.1rem;
    letter-spacing:0.01em;
  }
  .footer-links{
    list-style:none;
    padding:0;
    margin:0;
  }
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{
    color:#fff;
    text-decoration:none !important;
    font-size:0.88rem;
    font-weight:500;
    transition:opacity 0.2s ease;
  }
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{
    list-style:none;
    padding:0;
    margin:0;
  }
  .footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:0.65rem;
    margin-bottom:0.85rem;
    font-size:0.88rem;
    color:#fff;
  }
  .footer-contact svg{flex-shrink:0;margin-top:2px;opacity:0.85;}
  .footer-contact a{
    color:#fff;
    text-decoration:none !important;
  }
  .footer-contact a:hover{opacity:0.75;}
  .footer-trust{
    padding:1.6rem 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-trust-inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem 2.5rem;
  }
  .footer-trust-item{
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-size:0.82rem;
    font-weight:600;
    color:#fff;
  }
  .footer-trust-item svg{opacity:0.85;}
  .foot-bottom{
    padding:1.5rem 0 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.8rem;
    color:#fff;
  }
  .foot-legal{
    display:flex;
    flex-wrap:wrap;
    gap:0.35rem 1.2rem;
  }
  .foot-legal a{
    color:#fff;
    text-decoration:none !important;
    transition:opacity 0.2s ease;
  }
  .foot-legal a:hover{opacity:0.75;}

/* ===== from couverture.html ===== */
:root{
    --bg:#F6F5FC;
    --bg-hero-a:#EFE9FF;
    --bg-hero-b:#FFEDE3;
    --ink:#1C1633;
    --ink-soft:#5B5578;
    --primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;
    --primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;
    --yellow:#FFC93C;
    --teal:#2EC4B6;
    --card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{
    background:#fff;
    backdrop-filter:blur(10px);
    padding-top:1.1rem;
    padding-bottom:1.1rem;
    position:sticky;
    top:0;
    z-index:50;
  }
  .navbar-brand{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.5rem;
    display:flex;
    align-items:center;
    gap:0.55rem;
    color:var(--ink) !important;
    text-decoration:none !important;
  }
  .nav-link.custom{
    font-weight:600;
    font-size:0.95rem;
    color:var(--ink) !important;
    padding:0.5rem 1rem !important;
    text-decoration:none !important;
  }
  .btn-pill{
    font-weight:700;
    font-size:0.92rem;
    line-height:1.15;
    border-radius:100px;
    padding:0.65rem 1.5rem;
    background:var(--primary);
    color:#fff;
    border:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    cursor:pointer;
  }
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{
    color:#fff;
    text-decoration:none !important;
  }
  .btn-pill:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(28,22,51,0.35);
  }
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{
    font-weight:700;
    font-size:0.92rem;
    border-radius:100px;
    padding:0.7rem 1.5rem;
    background:transparent;
    color:var(--ink);
    border:2px solid #E2DEF5;
    transition:border-color 0.2s ease, transform 0.2s ease;
    display:inline-block;
    text-decoration:none !important;
  }
  .btn-ghost:hover,.btn-ghost:focus,.btn-ghost:active,.btn-ghost:visited{
    color:var(--ink);
    text-decoration:none !important;
  }
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);}
  .btn-ghost.light{
    color:#fff;
    border-color:rgba(255,255,255,0.35);
  }
  .btn-ghost.light:hover,.btn-ghost.light:focus,.btn-ghost.light:visited{
    color:#fff;
    border-color:#fff;
  }

  .page-hero{
    position:relative;
    padding:4rem 0 3.5rem;
    background:linear-gradient(150deg, var(--bg-hero-a) 0%, var(--bg) 55%, var(--bg-hero-b) 100%);
    border-radius:0 0 48px 48px;
    overflow:hidden;
  }
  .cloud{
    position:absolute;
    background:#fff;
    border-radius:50%;
    opacity:0.7;
    filter:blur(0.5px);
  }
  .cloud-drift{animation:drift 22s ease-in-out infinite;}
  .cloud-drift-slow{animation:drift 30s ease-in-out infinite reverse;}
  @keyframes drift{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(28px);}
  }
  .eyebrow-chip{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    margin-bottom:1.4rem;
    font-size:0.88rem;
    font-weight:600;
    color:var(--ink-soft);
    position:relative;
    z-index:2;
  }
  .eyebrow-chip::before{
    content:'';
    width:6px;height:6px;
    border-radius:50%;
    background:var(--teal);
    flex-shrink:0;
  }
  .page-hero h1{
    font-size:clamp(2.3rem, 5vw, 3.6rem);
    line-height:1.06;
    margin-bottom:1.2rem;
    position:relative;
    z-index:2;
  }
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{
    font-size:1.12rem;
    max-width:44ch;
    margin-bottom:2rem;
    position:relative;
    z-index:2;
  }
  .hero-ctas{
    display:flex;
    gap:0.9rem;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
  }

  section{padding:4.5rem 0;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 3rem;}
  .kicker{
    color:var(--coral);
    font-weight:700;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:0.6rem;
    display:block;
  }
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:0.7rem;}

  .coverage-card{
    background:var(--ink);
    border-radius:36px;
    padding:3rem;
    position:relative;
    overflow:hidden;
    color:#fff;
  }
  .coverage-card h2{color:#fff;font-size:clamp(1.6rem, 3vw, 2.2rem);margin-bottom:0.8rem;}
  .coverage-card p{color:#C8C3E0;margin-bottom:1.4rem;}
  .coverage-card .kicker{color:var(--yellow);}
  .dot-map{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:20px;
    overflow:hidden;
    background:radial-gradient(ellipse at 40% 40%, #2A2450 0%, #1C1633 70%);
  }
  .dot-map-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 40%;
    opacity:0.45;
    filter:brightness(1.4) contrast(1.1) saturate(0.3);
    pointer-events:none;
    user-select:none;
  }
  .map-pin{
    position:absolute;
    transform:translate(-50%, -50%);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.35rem;
  }
  .map-pin.label-above{flex-direction:column-reverse;}
  .map-pin.label-left{flex-direction:row-reverse;gap:0.4rem;}
  .map-pin.label-right{flex-direction:row;gap:0.4rem;}
  .map-pin .dot{
    position:relative;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--yellow);
    box-shadow:0 0 0 3px rgba(255,201,60,0.25);
    flex-shrink:0;
  }
  .map-pin .dot::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:var(--yellow);
    animation:pulse 2.6s ease-out infinite;
  }
  .map-pin:nth-child(odd) .dot::after{animation-delay:0.8s;}
  .map-pin:nth-child(3n) .dot::after{animation-delay:1.5s;}
  .map-pin .pin-label{
    background:rgba(255,255,255,0.95);
    color:var(--ink);
    font-size:0.68rem;
    font-weight:700;
    padding:0.22rem 0.55rem;
    border-radius:100px;
    white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    line-height:1.2;
  }
  @keyframes pulse{
    0%{transform:scale(1);opacity:0.7;}
    100%{transform:scale(3.2);opacity:0;}
  }
  .country-pill{
    background:rgba(255,255,255,0.08);
    border-radius:100px;
    padding:0.4rem 0.9rem;
    font-size:0.82rem;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    margin:0.25rem 0.3rem 0 0;
    color:#fff;
  }
  .country-pill img{
    width:18px;height:13px;
    border-radius:2px;
    object-fit:cover;
  }
  .country-pill.more{background:var(--yellow);color:var(--ink);}

  .stat-strip{
    display:flex;
    gap:2.5rem;
    flex-wrap:wrap;
    justify-content:center;
    padding:0.5rem 0 1rem;
  }
  .stat-item{text-align:center;}
  .stat-num{
    font-family:'Baloo 2',sans-serif;
    font-weight:800;
    font-size:2.4rem;
    color:var(--primary);
    line-height:1;
  }
  .stat-label{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}

  .explain-card{
    background:var(--card);
    border-radius:28px;
    padding:2rem 1.8rem;
    height:100%;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .explain-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(28,22,51,0.1);}
  .explain-anim{
    width:100%;
    height:130px;
    border-radius:20px;
    margin-bottom:1.3rem;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .explain-anim.one{background:linear-gradient(160deg, #FFF5F2 0%, #FFEFE9 100%);}
  .explain-anim.two{background:linear-gradient(160deg, #F0FBF9 0%, #EAF9F5 100%);}
  .explain-anim.three{background:linear-gradient(160deg, #F3F0FF 0%, #EDE9FF 100%);}
  .explain-card h3{font-size:1.25rem;margin-bottom:0.55rem;}
  .explain-card p{font-size:0.95rem;margin-bottom:0;}

  /* Anim 1 — single country */
  .anim-phone{
    width:54px;height:86px;
    background:#fff;
    border-radius:10px;
    border:2.5px solid var(--ink);
    position:relative;
    box-shadow:0 8px 18px rgba(28,22,51,0.1);
  }
  .anim-phone::before{
    content:'';
    position:absolute;
    top:6px;left:50%;
    transform:translateX(-50%);
    width:16px;height:3px;
    background:var(--ink);
    border-radius:2px;
  }
  .anim-signal{
    position:absolute;
    top:18px;left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:18px;
  }
  .anim-signal span{
    width:5px;
    background:var(--coral);
    border-radius:2px;
    animation:signal-bar 1.4s ease-in-out infinite;
  }
  .anim-signal span:nth-child(1){height:6px;animation-delay:0s;}
  .anim-signal span:nth-child(2){height:10px;animation-delay:0.15s;}
  .anim-signal span:nth-child(3){height:14px;animation-delay:0.3s;}
  .anim-signal span:nth-child(4){height:18px;animation-delay:0.45s;}
  @keyframes signal-bar{
    0%,100%{opacity:0.35;transform:scaleY(0.7);}
    50%{opacity:1;transform:scaleY(1);}
  }
  .anim-flag-float{
    position:absolute;
    right:18%;
    top:22%;
    width:36px;height:26px;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 6px 14px rgba(28,22,51,0.15);
    animation:bob 3.2s ease-in-out infinite;
  }
  .anim-flag-float img{width:100%;height:100%;object-fit:cover;}

  /* Anim 2 — regional hops */
  .anim-route{
    position:relative;
    width:200px;
    height:70px;
  }
  .anim-route-line{
    position:absolute;
    top:50%;
    left:12px;right:12px;
    height:3px;
    background:rgba(46,196,182,0.25);
    border-radius:2px;
    overflow:hidden;
  }
  .anim-route-line::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, var(--teal), transparent);
    width:40%;
    animation:route-flow 2.2s ease-in-out infinite;
  }
  @keyframes route-flow{
    0%{transform:translateX(-100%);}
    100%{transform:translateX(280%);}
  }
  .anim-hop{
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:34px;height:34px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--teal);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(46,196,182,0.25);
    animation:hop-pop 2.8s ease-in-out infinite;
  }
  .anim-hop img{width:100%;height:100%;object-fit:cover;}
  .anim-hop.h1{left:12%;animation-delay:0s;}
  .anim-hop.h2{left:50%;animation-delay:0.4s;}
  .anim-hop.h3{left:88%;animation-delay:0.8s;}
  @keyframes hop-pop{
    0%,100%{transform:translate(-50%, -50%) scale(1);}
    40%{transform:translate(-50%, -58%) scale(1.08);}
  }

  /* Anim 3 — global orbit */
  .anim-orbit{
    position:relative;
    width:90px;height:90px;
  }
  .anim-globe{
    width:56px;height:56px;
    border-radius:50%;
    background:linear-gradient(145deg, var(--violet-soft), var(--violet));
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    animation:globe-spin 8s linear infinite;
  }
  .anim-globe::before,
  .anim-globe::after{
    content:'';
    position:absolute;
    border:1.5px solid rgba(255,255,255,0.35);
    border-radius:50%;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
  }
  .anim-globe::before{width:70%;height:28%;}
  .anim-globe::after{width:70%;height:52%;}
  .anim-globe span{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.25);
    transform:scaleX(0.35);
  }
  @keyframes globe-spin{
    from{filter:hue-rotate(0deg);}
    to{filter:hue-rotate(20deg);}
  }
  .orbit-ring{
    position:absolute;
    inset:0;
    border:2px dashed rgba(91,79,232,0.25);
    border-radius:50%;
    animation:orbit-spin 6s linear infinite;
  }
  .orbit-dot{
    position:absolute;
    width:12px;height:12px;
    background:var(--yellow);
    border-radius:50%;
    top:-6px;left:50%;
    margin-left:-6px;
    box-shadow:0 0 0 4px rgba(255,201,60,0.25);
  }
  @keyframes orbit-spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }

  @keyframes bob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }

  .banner{
    border-radius:32px;
    padding:2.8rem 2.4rem;
    position:relative;
    overflow:hidden;
  }
  .banner h2{font-size:clamp(1.5rem, 2.8vw, 2rem);margin-bottom:0.7rem;}
  .banner p{margin-bottom:1.5rem;max-width:42ch;}
  .banner-coral{
    background:linear-gradient(135deg, #FFE8E1 0%, #FFF5F2 100%);
  }
  .banner-teal{
    background:linear-gradient(135deg, #E6F9F6 0%, #F2FCFB 100%);
  }
  .banner-purple{
    background:linear-gradient(135deg, #EDE9FF 0%, #F6F5FC 100%);
  }
  .banner-deco{
    position:absolute;
    border-radius:50%;
    opacity:0.5;
    pointer-events:none;
  }

  .journey{
    background:var(--card);
    border-radius:32px;
    padding:2.5rem 2rem;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);
  }
  .journey-track{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    margin:2rem 0 1.5rem;
    position:relative;
  }
  .journey-step{
    text-align:center;
    position:relative;
    z-index:1;
  }
  .journey-anim{
    width:100%;
    height:110px;
    border-radius:20px;
    margin-bottom:1rem;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .journey-anim.choose{background:linear-gradient(160deg, #FFF5F2 0%, #FFEFE9 100%);}
  .journey-anim.receive{background:linear-gradient(160deg, #F3F0FF 0%, #EDE9FF 100%);}
  .journey-anim.install{background:linear-gradient(160deg, #F0FBF9 0%, #EAF9F5 100%);}
  .journey-anim.land{background:linear-gradient(160deg, #FFFBF0 0%, #FFF7E0 100%);}

  /* Journey 1 — choose destination */
  .j-dest-scene{
    position:relative;
    display:flex;
    align-items:center;
    width:150px;
    height:48px;
  }
  .j-globe{
    width:44px;height:44px;
    border-radius:50%;
    background:linear-gradient(145deg, var(--violet-soft), var(--violet));
    position:relative;
    flex-shrink:0;
    animation:j-globe-spin 8s linear infinite;
  }
  .j-globe::before,
  .j-globe::after{
    content:'';
    position:absolute;
    border:1.5px solid rgba(255,255,255,0.35);
    border-radius:50%;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
  }
  .j-globe::before{width:70%;height:28%;}
  .j-globe::after{width:70%;height:52%;}
  .j-globe span{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.25);
    transform:scaleX(0.35);
  }
  .j-cards{
    position:relative;
    width:95px;
    height:32px;
    margin-left:0.55rem;
  }
  .j-card{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    gap:0.35rem;
    background:#fff;
    border-radius:8px;
    padding:0.3rem 0.45rem;
    box-shadow:0 4px 14px rgba(28,22,51,0.08);
    opacity:0;
    transform:translateX(10px) scale(0.92);
    animation:j-card-cycle 6s ease-in-out infinite;
  }
  .j-card:nth-child(2){animation-delay:2s;}
  .j-card:nth-child(3){animation-delay:4s;}
  .j-card img{width:18px;height:13px;border-radius:2px;object-fit:cover;}
  .j-card b{font-size:0.65rem;color:var(--ink);font-weight:700;}
  @keyframes j-globe-spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
  }
  @keyframes j-card-cycle{
    0%,28%,100%{opacity:0;transform:translateX(10px) scale(0.92);}
    5%,22%{opacity:1;transform:translateX(0) scale(1);}
  }

  /* Journey 2 — receive instant QR notification */
  .j-notif{
    position:relative;
    width:130px;
    height:54px;
  }
  .j-notif-card{
    position:absolute;
    inset:0;
    background:#fff;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(28,22,51,0.16);
    display:flex;
    align-items:center;
    gap:0.55rem;
    padding:0.45rem 0.65rem;
    opacity:0;
    transform:translateY(-14px) scale(0.92);
    animation:j-notif-in 3.2s ease-in-out infinite;
  }
  .j-notif-qr{
    width:28px;height:28px;
    border-radius:6px;
    background:linear-gradient(145deg, #EDE9FF, #F6F5FC);
    border:1.5px solid rgba(28,22,51,0.35);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
    padding:4px;
    flex-shrink:0;
  }
  .j-notif-qr i{
    background:var(--primary);
    border-radius:1px;
    opacity:0;
    animation:j-notif-dots 3.2s ease-in-out infinite;
  }
  .j-notif-qr i:nth-child(1){animation-delay:0.35s;}
  .j-notif-qr i:nth-child(2){animation-delay:0.42s;}
  .j-notif-qr i:nth-child(3){animation-delay:0.38s;}
  .j-notif-qr i:nth-child(4){animation-delay:0.48s;}
  .j-notif-qr i:nth-child(5){animation-delay:0.55s;}
  .j-notif-qr i:nth-child(6){animation-delay:0.5s;}
  .j-notif-qr i:nth-child(7){animation-delay:0.58s;}
  .j-notif-qr i:nth-child(8){animation-delay:0.65s;}
  .j-notif-qr i:nth-child(9){animation-delay:0.6s;}
  .j-notif-text{
    display:flex;
    flex-direction:column;
    gap:0.28rem;
    min-width:0;
    flex:1;
  }
  .j-notif-line{
    height:5px;
    border-radius:3px;
    background:#E2DEF5;
    opacity:0;
    animation:j-notif-line 3.2s ease-in-out infinite;
  }
  .j-notif-line.l1{width:78%;animation-delay:0.45s;}
  .j-notif-line.l2{width:52%;height:4px;animation-delay:0.55s;}
  .j-notif-ping{
    position:absolute;
    top:-4px;right:-4px;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--coral);
    box-shadow:0 0 0 0 rgba(255,107,74,0.45);
    opacity:0;
    animation:j-notif-ping 3.2s ease-out infinite;
  }
  @keyframes j-notif-in{
    0%,8%,100%{opacity:0;transform:translateY(-14px) scale(0.92);}
    18%,72%{opacity:1;transform:translateY(0) scale(1);}
    85%{opacity:0;transform:translateY(8px) scale(0.96);}
  }
  @keyframes j-notif-dots{
    0%,20%,85%,100%{opacity:0;transform:scale(0.4);}
    35%,70%{opacity:1;transform:scale(1);}
  }
  @keyframes j-notif-line{
    0%,20%,85%,100%{opacity:0;transform:scaleX(0.6);}
    35%,70%{opacity:1;transform:scaleX(1);}
  }
  @keyframes j-notif-ping{
    0%,15%{opacity:0;transform:scale(0.5);box-shadow:0 0 0 0 rgba(255,107,74,0.45);}
    25%{opacity:1;transform:scale(1);}
    55%{opacity:1;box-shadow:0 0 0 8px rgba(255,107,74,0);}
    75%,100%{opacity:0;transform:scale(1);box-shadow:0 0 0 0 rgba(255,107,74,0);}
  }

  /* Journey 3 — install on phone */
  .j-phone{
    width:48px;height:78px;
    background:#fff;
    border-radius:10px;
    border:2px solid rgba(46,196,182,0.35);
    position:relative;
    box-shadow:0 8px 18px rgba(28,22,51,0.08);
  }
  .j-phone-notch{
    width:16px;height:3px;
    background:#E8E4F5;
    border-radius:3px;
    margin:7px auto 0;
  }
  .j-phone-screen{
    position:absolute;
    inset:16px 7px 8px;
    background:#F4FBFA;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .j-qr-mini{
    width:24px;height:24px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
    opacity:0;
    animation:j-qr-appear 3s ease-in-out infinite;
  }
  .j-qr-mini i{
    background:var(--teal);
    border-radius:1px;
    opacity:0;
    animation:j-qr-dot 3s ease-in-out infinite;
  }
  .j-qr-mini i:nth-child(1){animation-delay:0.1s;}
  .j-qr-mini i:nth-child(2){animation-delay:0.2s;}
  .j-qr-mini i:nth-child(3){animation-delay:0.15s;}
  .j-qr-mini i:nth-child(4){animation-delay:0.25s;}
  .j-qr-mini i:nth-child(5){animation-delay:0.35s;}
  .j-qr-mini i:nth-child(6){animation-delay:0.3s;}
  .j-qr-mini i:nth-child(7){animation-delay:0.4s;}
  .j-qr-mini i:nth-child(8){animation-delay:0.5s;}
  .j-qr-mini i:nth-child(9){animation-delay:0.45s;}
  .j-check{
    position:absolute;
    width:20px;height:20px;
    border-radius:50%;
    background:var(--teal);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0.5);
    animation:j-check-pop 3s ease-in-out infinite;
  }
  .j-check::after{
    content:'';
    width:5px;height:9px;
    border:2px solid #fff;
    border-top:none;border-left:none;
    transform:rotate(45deg) translate(-1px,-1px);
  }
  @keyframes j-qr-appear{
    0%,15%,55%,100%{opacity:0;}
    25%,45%{opacity:1;}
  }
  @keyframes j-qr-dot{
    0%,15%,55%,100%{opacity:0;transform:scale(0.5);}
    25%,45%{opacity:1;transform:scale(1);}
  }
  @keyframes j-check-pop{
    0%,48%,100%{opacity:0;transform:scale(0.5);}
    58%,78%{opacity:1;transform:scale(1);}
  }

  /* Journey 4 — land connected */
  .j-connect{
    display:flex;
    align-items:flex-end;
    gap:5px;
    height:40px;
  }
  .j-connect span{
    width:7px;
    background:var(--yellow);
    border-radius:3px;
    transform-origin:bottom;
    animation:j-bar-rise 2.4s ease-in-out infinite;
  }
  .j-connect span:nth-child(1){height:12px;animation-delay:0s;}
  .j-connect span:nth-child(2){height:22px;animation-delay:0.15s;}
  .j-connect span:nth-child(3){height:30px;animation-delay:0.3s;}
  .j-connect span:nth-child(4){height:40px;animation-delay:0.45s;}
  .j-connected{
    margin-left:0.65rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.3rem;
  }
  .j-connected-dot{
    width:10px;height:10px;
    border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 0 0 rgba(46,196,182,0.5);
    animation:j-connected-pulse 2.4s ease-out infinite;
  }
  .j-connected-label{
    font-size:0.62rem;
    font-weight:700;
    color:var(--ink-soft);
    letter-spacing:0.04em;
    text-transform:uppercase;
    opacity:0;
    animation:j-label-fade 2.4s ease-in-out infinite;
  }
  @keyframes j-bar-rise{
    0%,100%{transform:scaleY(0.3);opacity:0.35;}
    40%,70%{transform:scaleY(1);opacity:1;}
  }
  @keyframes j-connected-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(46,196,182,0.5);}
    50%{box-shadow:0 0 0 8px rgba(46,196,182,0);}
  }
  @keyframes j-label-fade{
    0%,30%,100%{opacity:0;}
    45%,80%{opacity:1;}
  }

  .journey-step strong{
    display:block;
    font-size:0.95rem;
    font-weight:700;
    color:var(--ink);
    margin-bottom:0.2rem;
  }
  .journey-step span{
    font-size:0.78rem;
    color:var(--ink-soft);
    font-weight:500;
  }

  .plane-path{
    position:relative;
    height:120px;
    margin:1.5rem 0 0.5rem;
  }
  .plane-svg{
    width:100%;
    height:100%;
    overflow:visible;
  }
  .plane-marker{
    offset-path:path('M 40 80 C 180 20, 320 20, 460 70 C 520 95, 580 40, 660 55');
    offset-rotate:auto;
    animation:fly 8s linear infinite;
  }
  @keyframes fly{
    0%{offset-distance:0%;}
    100%{offset-distance:100%;}
  }

  .cta-banner{
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius:36px;
    padding:3.5rem 2rem;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .cta-banner h2{color:#fff;margin-bottom:0.9rem;font-size:clamp(1.8rem, 3.5vw, 2.4rem);}
  .cta-banner p{color:#E6E3FB;max-width:44ch;margin:0 auto 2rem;}
  .cta-actions{display:flex;gap:0.9rem;flex-wrap:wrap;justify-content:center;}
  .cta-orb{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    pointer-events:none;
  }

  footer{
    background:var(--ink);
    color:#fff;
    padding:0;
    margin-top:0;
  }
  .footer-top{
    padding:4rem 0 3rem;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-brand{
    margin-bottom:1.5rem;
  }
  .footer-logo{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.45rem;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    text-decoration:none !important;
    margin-bottom:1rem;
  }
  .footer-logo:hover{color:#fff;}
  .footer-brand p{
    color:#fff;
    font-size:0.92rem;
    line-height:1.65;
    max-width:32ch;
    margin-bottom:1.4rem;
  }
  .footer-stats{
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
    margin-bottom:1.5rem;
  }
  .footer-stat strong{
    display:block;
    font-family:'Baloo 2', sans-serif;
    font-size:1.35rem;
    font-weight:800;
    color:var(--yellow);
    line-height:1.1;
  }
  .footer-stat span{
    font-size:0.72rem;
    font-weight:600;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .footer-social{
    display:flex;
    gap:0.55rem;
  }
  .footer-social a{
    width:38px;height:38px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none !important;
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .footer-social a:hover{
    background:rgba(28,22,51,0.35);
    border-color:rgba(91,79,232,0.5);
    transform:translateY(-2px);
    color:#fff;
  }
  .footer-col-title{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:0.95rem;
    color:#fff;
    margin-bottom:1.1rem;
    letter-spacing:0.01em;
  }
  .footer-links{
    list-style:none;
    padding:0;
    margin:0;
  }
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{
    color:#fff;
    text-decoration:none !important;
    font-size:0.88rem;
    font-weight:500;
    transition:opacity 0.2s ease;
  }
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{
    list-style:none;
    padding:0;
    margin:0;
  }
  .footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:0.65rem;
    margin-bottom:0.85rem;
    font-size:0.88rem;
    color:#fff;
  }
  .footer-contact svg{flex-shrink:0;margin-top:2px;opacity:0.85;}
  .footer-contact a{
    color:#fff;
    text-decoration:none !important;
  }
  .footer-contact a:hover{opacity:0.75;}
  .footer-trust{
    padding:1.6rem 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-trust-inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem 2.5rem;
  }
  .footer-trust-item{
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-size:0.82rem;
    font-weight:600;
    color:#fff;
  }
  .footer-trust-item svg{opacity:0.85;}
  .foot-bottom{
    padding:1.5rem 0 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.8rem;
    color:#fff;
  }
  .foot-legal{
    display:flex;
    flex-wrap:wrap;
    gap:0.35rem 1.2rem;
  }
  .foot-legal a{
    color:#fff;
    text-decoration:none !important;
    transition:opacity 0.2s ease;
  }
  .foot-legal a:hover{opacity:0.75;}

  @media (max-width: 767.98px){
    .coverage-card{padding:1.6rem;border-radius:28px;}
    .map-pin .pin-label{font-size:0.58rem;padding:0.15rem 0.4rem;}
    .map-pin .dot{width:8px;height:8px;}
    .journey-track{grid-template-columns:1fr 1fr;gap:1.2rem;}
    .plane-marker{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .cloud-drift,.cloud-drift-slow,.map-pin .dot::after,.anim-signal span,
    .anim-route-line::after,.anim-hop,.orbit-ring,.anim-globe,.anim-flag-float,
    .plane-marker,.j-globe,.j-card,.j-notif-card,.j-notif-qr i,.j-notif-line,.j-notif-ping,
    .j-qr-mini,.j-qr-mini i,.j-check,.j-connect span,.j-connected-dot,.j-connected-label{animation:none;}
    .j-card,.j-notif-card,.j-notif-qr i,.j-notif-line,.j-qr-mini,.j-qr-mini i,.j-check,.j-connected-label{opacity:1;transform:none;}
  }

/* ===== from compte.html ===== */
:root{
    --bg:#F6F5FC;
    --bg-hero-a:#EFE9FF;
    --bg-hero-b:#FFEDE3;
    --ink:#1C1633;
    --ink-soft:#5B5578;
    --primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;
    --primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;
    --yellow:#FFC93C;
    --teal:#2EC4B6;
    --card:#FFFFFF;
    --line:#E2DEF5;
    --line-soft:#EEEBFA;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}

  /* —— Site nav —— */
  .navbar{
    background:#fff;
    backdrop-filter:blur(10px);
    padding-top:0.95rem;
    padding-bottom:0.95rem;
    position:sticky;
    top:0;
    z-index:80;
  }
  .navbar .container-xl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
  }
  .navbar-brand{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.4rem;
    display:flex;
    align-items:center;
    gap:0.55rem;
    color:var(--ink) !important;
    text-decoration:none !important;
    min-width:0;
  }
  .navbar-brand span{white-space:nowrap;}
  .nav-desktop{
    display:none;
    align-items:center;
  }
  .nav-actions{
    display:flex;
    align-items:center;
    gap:0.45rem;
    flex-shrink:0;
  }
  .nav-link.custom{
    font-weight:600;
    font-size:0.95rem;
    color:var(--ink) !important;
    padding:0.5rem 1rem !important;
    text-decoration:none !important;
  }
  .burger{
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid var(--line);
    background:var(--card);
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
  }
  .burger span{
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform 0.2s ease, opacity 0.2s ease;
  }
  .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.is-open span:nth-child(2){opacity:0;}
  .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .btn-pill{
    font-weight:700;
    font-size:0.88rem;
    border-radius:100px;
    padding:0.62rem 1.15rem;
    background:var(--primary);
    color:#fff;
    border:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none !important;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{
    color:#fff;
    text-decoration:none !important;
  }
  .btn-pill:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(28,22,51,0.35);
  }
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill.sm{padding:0.5rem 1rem;font-size:0.82rem;}
  .btn-ghost{
    font-weight:700;
    font-size:0.92rem;
    border-radius:100px;
    padding:0.7rem 1.5rem;
    background:transparent;
    color:var(--ink);
    border:2px solid var(--line);
    transition:border-color 0.2s ease, transform 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    cursor:pointer;
  }
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}
  .btn-ghost.sm{padding:0.55rem 1.15rem;font-size:0.85rem;}

  @media (min-width:992px){
    .burger{display:none;}
    .nav-desktop{display:flex;}
    .nav-backdrop,
    .nav-backdrop.is-open,
    .nav-panel,
    .nav-panel.is-open{display:none !important;}
    .btn-pill{font-size:0.92rem;padding:0.7rem 1.5rem;}
    .navbar-brand{font-size:1.5rem;}
  }

  /* —— Dashboard shell —— */
  .dash{
    padding:1.35rem 0 3.5rem;
    min-height:70vh;
  }
  @media (min-width:992px){
    .dash{padding:2rem 0 4rem;}
  }
  .dash-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.15rem;
    align-items:start;
  }
  @media (min-width:992px){
    .dash-grid{
      grid-template-columns:240px 1fr;
      gap:1.5rem;
    }
  }

  .mobile-dashbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:0.75rem 0.85rem;
    margin-bottom:1.25rem;
  }
  .mobile-dashbar-user{
    display:flex;
    align-items:center;
    gap:0.7rem;
    min-width:0;
  }
  .mobile-dashbar-user strong{
    display:block;
    font-size:0.92rem;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-dashbar-user span{
    display:block;
    font-size:0.75rem;
    color:var(--ink-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:0.55rem 0.8rem;
    font-weight:700;
    font-size:0.82rem;
    color:var(--ink);
    cursor:pointer;
    flex-shrink:0;
  }
  .mobile-menu-btn svg{flex-shrink:0;}
  @media (min-width:992px){
    .mobile-dashbar{display:none;}
  }

  .sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(28,22,51,0.35);
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
  }
  .sidebar-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  .sidebar{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    padding:1.25rem 1rem;
    position:sticky;
    top:5.5rem;
  }
  @media (max-width:991px){
    .sidebar{
      position:fixed;
      top:0;
      left:0;
      bottom:0;
      width:min(300px, 88vw);
      border-radius:0 22px 22px 0;
      border:none;
      box-shadow:8px 0 40px rgba(28,22,51,0.16);
      z-index:100;
      padding:1.15rem 1rem 1.4rem;
      transform:translateX(-105%);
      transition:transform 0.25s ease;
      overflow-y:auto;
    }
    .sidebar.is-open{transform:translateX(0);}
  }
  .sidebar-close{
    display:none;
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin-left:auto;
    margin-bottom:0.75rem;
  }
  @media (max-width:991px){
    .sidebar-close{display:inline-flex;}
  }
  .sidebar-user{
    display:flex;
    align-items:center;
    gap:0.85rem;
    padding:0.35rem 0.55rem 1.15rem;
    border-bottom:1px solid var(--line-soft);
    margin-bottom:0.85rem;
  }
  .sidebar-avatar{
    width:44px;height:44px;
    border-radius:14px;
    background:linear-gradient(145deg, var(--violet), var(--violet-soft));
    color:#fff;
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.05rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .sidebar-user strong{
    display:block;
    font-size:0.95rem;
    font-weight:700;
    line-height:1.25;
  }
  .sidebar-user span{
    display:block;
    font-size:0.78rem;
    color:var(--ink-soft);
    word-break:break-all;
  }
  .side-nav{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
  }
  .side-link{
    display:flex;
    align-items:center;
    gap:0.7rem;
    padding:0.75rem 0.85rem;
    border-radius:14px;
    border:none;
    background:transparent;
    color:var(--ink-soft);
    font-weight:600;
    font-size:0.9rem;
    text-align:left;
    text-decoration:none !important;
    cursor:pointer;
    width:100%;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .side-link svg{flex-shrink:0;opacity:0.85;}
  .side-link:hover{background:var(--line-soft);color:var(--ink);}
  .side-link.active{
    background:rgba(91,79,232,0.1);
    color:var(--primary-dark);
  }
  .side-link.danger{color:#C2412B;}
  .side-link.danger:hover{background:rgba(255,107,74,0.1);}
  .side-sep{
    height:1px;
    background:var(--line-soft);
    margin:0.65rem 0.4rem;
  }

  .dash-main{min-width:0;}
  .view{display:none;}
  .view.active{display:block;}

  .view-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:0.85rem;
    flex-wrap:wrap;
    margin-bottom:1.15rem;
  }
  @media (min-width:768px){
    .view-head{
      align-items:flex-end;
      margin-bottom:1.35rem;
    }
  }
  .view-head > div{min-width:0;flex:1 1 220px;}
  .view-head .btn-pill{flex-shrink:0;}
  .view-head h1{
    font-size:clamp(1.45rem, 4.5vw, 2.1rem);
    margin:0 0 0.25rem;
    line-height:1.15;
  }
  .view-head p{
    margin:0;
    font-size:0.9rem;
    max-width:48ch;
  }

  .stat-row{
    display:grid;
    grid-template-columns:1fr;
    gap:0.75rem;
    margin-bottom:1.1rem;
  }
  @media (min-width:560px){
    .stat-row{grid-template-columns:repeat(3, 1fr);gap:0.9rem;margin-bottom:1.25rem;}
  }
  .stat{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    padding:1.05rem 1.1rem;
  }
  @media (min-width:560px){
    .stat{padding:1.15rem 1.2rem;}
  }
  .stat-label{
    font-size:0.78rem;
    font-weight:600;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:0.35rem;
  }
  .stat-value{
    font-family:'Baloo 2', sans-serif;
    font-size:1.7rem;
    font-weight:800;
    line-height:1;
    color:var(--ink);
  }
  @media (min-width:560px){.stat-value{font-size:1.85rem;}}
  .stat-hint{
    margin-top:0.4rem;
    font-size:0.82rem;
    color:var(--ink-soft);
  }

  .panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
  }
  @media (min-width:768px){.panel{border-radius:22px;}}
  .panel + .panel{margin-top:1rem;}
  .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    padding:0.95rem 1rem;
    border-bottom:1px solid var(--line-soft);
  }
  @media (min-width:768px){.panel-head{padding:1rem 1.25rem;}}
  .panel-head h2{
    font-family:'Inter', sans-serif;
    font-size:0.92rem;
    font-weight:700;
    margin:0;
  }
  .panel-head .muted{
    font-size:0.8rem;
    font-weight:600;
    color:var(--ink-soft);
  }

  .esim-item{
    display:grid;
    grid-template-columns:1fr;
    gap:0.85rem;
    padding:1.05rem 1rem;
    border-bottom:1px solid var(--line-soft);
  }
  @media (min-width:720px){
    .esim-item{
      grid-template-columns:1fr auto;
      gap:1rem 1.5rem;
      padding:1.15rem 1.25rem;
    }
  }
  .esim-item:last-child{border-bottom:none;}
  .esim-top{
    display:flex;
    align-items:center;
    gap:0.55rem;
    flex-wrap:wrap;
    margin-bottom:0.25rem;
  }
  .esim-country{
    font-family:'Baloo 2', sans-serif;
    font-size:1.08rem;
    font-weight:700;
  }
  .badge{
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    font-size:0.72rem;
    font-weight:700;
    border-radius:100px;
    padding:0.25rem 0.65rem;
  }
  .badge::before{
    content:'';
    width:6px;height:6px;
    border-radius:50%;
    background:currentColor;
  }
  .badge-active{background:rgba(46,196,182,0.15);color:#1A8F84;}
  .badge-ready{background:rgba(28,22,51,0.12);color:var(--primary-dark);}
  .badge-expired{background:rgba(28,22,51,0.07);color:var(--ink-soft);}
  .esim-plan{font-size:0.88rem;color:var(--ink-soft);margin-bottom:0.8rem;}
  .usage{max-width:100%;}
  @media (min-width:720px){.usage{max-width:300px;}}
  .usage-track{
    height:7px;
    border-radius:100px;
    background:var(--line-soft);
    overflow:hidden;
  }
  .usage-track > i{
    display:block;
    height:100%;
    border-radius:100px;
    background:var(--primary);
  }
  .usage-label{
    margin-top:0.4rem;
    font-size:0.78rem;
    color:var(--ink-soft);
    font-weight:600;
  }
  .esim-meta{
    text-align:left;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.3rem;
  }
  @media (min-width:720px){
    .esim-meta{align-items:flex-end;text-align:right;}
  }
  .esim-date{font-size:0.82rem;color:var(--ink-soft);font-weight:500;}
  .esim-iccid{
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:0.7rem;
    color:#8B86A0;
    word-break:break-all;
  }

  .esim-delivery{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
    margin-top:0.85rem;
    padding-top:0.85rem;
    border-top:1px dashed var(--line-soft);
  }
  @media (min-width:640px){
    .esim-delivery{
      grid-template-columns:auto 1fr;
      gap:1.25rem;
      align-items:start;
    }
  }
  .esim-delivery-qr{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.55rem;
  }
  .esim-delivery-qr img{
    width:140px;
    height:140px;
    object-fit:contain;
    border-radius:12px;
    background:#fff;
    padding:6px;
    border:1px solid var(--line-soft);
  }
  .esim-delivery-hint{
    margin:0 0 0.65rem;
    font-size:0.86rem;
    color:var(--ink-soft);
    line-height:1.45;
  }
  .esim-delivery-actions{
    display:flex;
    flex-wrap:wrap;
    gap:0.45rem;
    margin-bottom:0.75rem;
  }
  .esim-code-block,
  .esim-manual{
    margin-bottom:0.75rem;
  }
  .esim-code-label{
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:0.35rem;
  }
  .esim-code,
  .esim-manual-row code{
    display:block;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:0.78rem;
    line-height:1.4;
    word-break:break-all;
    background:rgba(0,0,0,0.04);
    border:1px solid var(--line-soft);
    border-radius:10px;
    padding:0.65rem 0.75rem;
    margin-bottom:0.45rem;
    color:var(--ink);
  }
  .esim-manual-row{
    margin-bottom:0.55rem;
  }
  .esim-manual-row > span{
    display:block;
    font-size:0.78rem;
    font-weight:600;
    margin-bottom:0.25rem;
    color:var(--ink-soft);
  }

  .bill-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:0.35rem 0.85rem;
    align-items:center;
    padding:0.95rem 1rem;
    border-bottom:1px solid var(--line-soft);
  }
  .bill-row:last-child{border-bottom:none;}
  .bill-date{
    grid-column:1 / -1;
    font-size:0.78rem;
    color:var(--ink-soft);
    font-weight:500;
  }
  .bill-label{
    font-weight:600;
    font-size:0.9rem;
    color:var(--ink);
    min-width:0;
  }
  .bill-amount{
    font-weight:800;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    justify-self:end;
  }
  .bill-status{
    grid-column:1 / -1;
    justify-self:start;
    font-size:0.72rem;
    font-weight:700;
    border-radius:100px;
    padding:0.25rem 0.65rem;
    white-space:nowrap;
  }
  @media (min-width:768px){
    .bill-row{
      grid-template-columns:7.5rem 1fr auto auto;
      gap:1rem;
      padding:0.95rem 1.25rem;
    }
    .bill-date{grid-column:auto;font-size:0.82rem;}
    .bill-status{grid-column:auto;justify-self:auto;}
  }
  .bill-paid{background:rgba(46,196,182,0.15);color:#1A8F84;}
  .bill-pending{background:rgba(255,201,60,0.25);color:#9A6B00;}

  .empty{
    padding:2rem 1rem;
    text-align:center;
  }
  .empty p{
    margin:0 auto 1.1rem;
    max-width:34ch;
    font-size:0.92rem;
  }

  .profile-grid{display:grid;gap:0;}
  .profile-row{
    display:grid;
    grid-template-columns:1fr;
    gap:0.25rem;
    padding:1rem;
    border-bottom:1px solid var(--line-soft);
  }
  .profile-row:last-child{border-bottom:none;}
  @media (min-width:560px){
    .profile-row{
      grid-template-columns:160px 1fr;
      gap:1rem;
      padding:1.05rem 1.25rem;
    }
  }
  .profile-row span{
    font-size:0.78rem;
    font-weight:600;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .profile-row strong{
    font-size:0.98rem;
    font-weight:700;
    color:var(--ink);
    word-break:break-word;
  }

  body.menu-open{overflow:hidden;}

  /* —— Site footer —— */
  footer{
    background:var(--ink);
    color:#fff;
    padding:0;
    margin-top:0;
  }
  .footer-top{
    padding:4rem 0 3rem;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-brand{margin-bottom:1.5rem;}
  .footer-logo{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.45rem;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    text-decoration:none !important;
    margin-bottom:1rem;
  }
  .footer-logo:hover{color:#fff;}
  .footer-brand p{
    color:#fff;
    font-size:0.92rem;
    line-height:1.65;
    max-width:32ch;
    margin-bottom:1.4rem;
  }
  .footer-stats{
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
    margin-bottom:1.5rem;
  }
  .footer-stat strong{
    display:block;
    font-family:'Baloo 2', sans-serif;
    font-size:1.35rem;
    font-weight:800;
    color:var(--yellow);
    line-height:1.1;
  }
  .footer-stat span{
    font-size:0.72rem;
    font-weight:600;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .footer-social{display:flex;gap:0.55rem;}
  .footer-social a{
    width:38px;height:38px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none !important;
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .footer-social a:hover{
    background:rgba(28,22,51,0.35);
    border-color:rgba(91,79,232,0.5);
    transform:translateY(-2px);
    color:#fff;
  }
  .footer-col-title{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:0.95rem;
    color:#fff;
    margin-bottom:1.1rem;
  }
  .footer-links{list-style:none;padding:0;margin:0;}
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{
    color:#fff;
    text-decoration:none !important;
    font-size:0.88rem;
    font-weight:500;
    transition:opacity 0.2s ease;
  }
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{list-style:none;padding:0;margin:0;}
  .footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:0.65rem;
    margin-bottom:0.85rem;
    font-size:0.88rem;
    color:#fff;
  }
  .footer-contact svg{flex-shrink:0;margin-top:2px;opacity:0.85;}
  .footer-contact a{color:#fff;text-decoration:none !important;}
  .footer-contact a:hover{opacity:0.75;}
  .footer-trust{
    padding:1.6rem 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-trust-inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.5rem 2.5rem;
  }
  .footer-trust-item{
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-size:0.82rem;
    font-weight:600;
    color:#fff;
  }
  .foot-bottom{
    padding:1.5rem 0 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.8rem;
    color:#fff;
  }
  @media (max-width:575px){
    .foot-bottom{
      flex-direction:column;
      align-items:flex-start;
      gap:0.85rem;
    }
    .footer-trust-inner{
      gap:1rem 1.25rem;
      justify-content:flex-start;
    }
    .footer-top{padding:3rem 0 2.25rem;}
  }
  .foot-legal{display:flex;flex-wrap:wrap;gap:0.35rem 1.2rem;}
  .foot-legal a{color:#fff;text-decoration:none !important;}
  .foot-legal a:hover{opacity:0.75;}

/* ===== from connexion.html ===== */
:root{
    --bg:#F6F5FC;
    --bg-hero-a:#EFE9FF;
    --bg-hero-b:#FFEDE3;
    --ink:#1C1633;
    --ink-soft:#5B5578;
    --primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;
    --primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;
    --teal:#2EC4B6;
    --card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  body{
    min-height:100vh;
    background:linear-gradient(150deg, var(--bg-hero-a) 0%, var(--bg) 55%, var(--bg-hero-b) 100%);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:17px;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.display-font{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}

  .navbar{
    background:#fff;
    backdrop-filter:blur(10px);
    padding-top:1.1rem;
    padding-bottom:1.1rem;
    position:sticky;
    top:0;
    z-index:50;
  }
  .navbar-brand{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:1.5rem;
    display:flex;
    align-items:center;
    gap:0.55rem;
    color:var(--ink) !important;
    text-decoration:none !important;
  }
  .nav-link.custom{
    font-weight:600;
    font-size:0.95rem;
    color:var(--ink) !important;
    padding:0.5rem 1rem !important;
    text-decoration:none !important;
  }
  .btn-pill{
    font-weight:700;
    font-size:0.92rem;
    border-radius:100px;
    padding:0.7rem 1.5rem;
    background:var(--primary);
    color:#fff;
    border:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    cursor:pointer;
  }
  .btn-pill:hover,.btn-pill:focus{color:#fff;background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill:disabled{opacity:0.65;transform:none;box-shadow:none;cursor:not-allowed;}
  .btn-pill.full{width:100%;padding:0.95rem 1.5rem;font-size:1rem;}

  .auth-shell{
    position:relative;
    padding:3rem 0 5rem;
    overflow:hidden;
  }
  .cloud{
    position:absolute;
    background:#fff;
    border-radius:50%;
    opacity:0.7;
    filter:blur(0.5px);
    pointer-events:none;
  }
  .auth-layout{
    position:relative;
    z-index:2;
    max-width:440px;
    margin:0 auto;
  }
  .eyebrow-chip{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    margin-bottom:1rem;
    font-size:0.88rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .eyebrow-chip::before{
    content:'';
    width:6px;height:6px;
    border-radius:50%;
    background:var(--teal);
    flex-shrink:0;
  }
  .auth-layout h1{
    font-size:clamp(2rem, 4vw, 2.75rem);
    line-height:1.08;
    margin-bottom:0.65rem;
  }
  .auth-layout h1 .swoosh{color:var(--violet);}
  .auth-sub{margin-bottom:2rem;max-width:36ch;}

  .auth-form{display:flex;flex-direction:column;gap:1.05rem;}
  .field label{
    display:block;
    font-weight:600;
    font-size:0.9rem;
    margin-bottom:0.45rem;
    color:var(--ink);
  }
  .field input{
    width:100%;
    border-radius:100px;
    border:2px solid #E2DEF5;
    background:#fff;
    padding:0.85rem 1.25rem;
    font-size:1rem;
    color:var(--ink);
    outline:none;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .field input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(28,22,51,0.12);
  }
  .field input::placeholder{color:#9B96B5;}
  .form-error{
    display:none;
    background:rgba(255,107,74,0.12);
    color:#C2412B;
    border-radius:16px;
    padding:0.85rem 1.1rem;
    font-size:0.92rem;
    font-weight:600;
  }
  .form-error.show{display:block;}
  .auth-switch{
    margin-top:1.6rem;
    font-size:0.95rem;
    text-align:center;
  }
  .auth-switch a{
    color:var(--primary);
    font-weight:700;
    text-decoration:none;
  }
  .auth-switch a:hover{text-decoration:underline;}

  /* ===== Connexion gate ===== */
  body.auth-page{
    background:
      radial-gradient(1200px 500px at 100% -10%, rgba(255,237,227,0.9), transparent 55%),
      radial-gradient(900px 420px at 0% 0%, rgba(239,233,255,0.95), transparent 50%),
      var(--bg);
  }
  body.auth-page .navbar{
    background:#fff;
  }
  .auth-gate{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    min-height:calc(100vh - 84px);
  }
  .auth-gate-visual{
    position:relative;
    overflow:hidden;
    min-height:100%;
    color:#fff;
  }
  .auth-gate-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 40%;
    transform:scale(1.06);
    animation:auth-photo-drift 18s ease-in-out infinite alternate;
  }
  .auth-gate-visual-shade{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(28,22,51,0.18) 0%, rgba(28,22,51,0.55) 48%, rgba(28,22,51,0.82) 100%),
      linear-gradient(90deg, rgba(28,22,51,0.25) 0%, transparent 40%);
  }
  .auth-gate-visual-content{
    position:relative;
    z-index:2;
    height:100%;
    min-height:520px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:2.75rem 2.5rem 3rem;
    animation:auth-rise 0.8s ease both;
  }
  .auth-gate-brand{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:clamp(2.4rem, 4vw, 3.4rem);
    line-height:1;
    letter-spacing:-0.02em;
    margin:0 0 0.75rem;
    color:#fff;
    text-shadow:0 10px 30px rgba(28,22,51,0.35);
  }
  .auth-gate-tagline{
    max-width:28ch;
    margin:0 0 1.8rem;
    color:rgba(255,255,255,0.9);
    font-size:1.05rem;
    font-weight:500;
  }
  .auth-gate-quote{
    margin:0;
    max-width:420px;
    padding-top:1.25rem;
    border-top:1px solid rgba(255,255,255,0.22);
    animation:auth-rise 0.9s ease 0.15s both;
  }
  .auth-gate-quote blockquote{
    margin:0 0 1rem;
    font-size:1.02rem;
    line-height:1.45;
    font-weight:500;
    color:#fff;
  }
  .auth-gate-quote figcaption{
    display:flex;
    align-items:center;
    gap:0.75rem;
  }
  .auth-gate-quote figcaption img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,0.85);
  }
  .auth-gate-quote figcaption span{
    display:flex;
    flex-direction:column;
    gap:0.1rem;
    font-size:0.82rem;
    color:rgba(255,255,255,0.78);
  }
  .auth-gate-quote figcaption strong{
    font-size:0.92rem;
    color:#fff;
  }
  .auth-gate-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2.5rem 1.5rem 3rem;
    animation:auth-rise 0.75s ease 0.08s both;
  }
  .auth-gate-panel-inner{
    width:100%;
    max-width:420px;
  }
  .auth-gate-intro{
    margin-bottom:1.35rem;
  }
  .auth-gate-kicker{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    margin:0 0 0.7rem;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--coral);
  }
  .auth-gate-kicker::before{
    content:'';
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--teal);
  }
  .auth-gate-intro h1{
    font-size:clamp(1.9rem, 3.4vw, 2.55rem);
    line-height:1.08;
    margin:0 0 0.55rem;
  }
  .auth-gate-intro h1 .swoosh{color:var(--violet);}
  .auth-gate-sub{
    margin:0;
    max-width:38ch;
    font-size:0.98rem;
  }
  .auth-gate-people{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin:0 0 1.6rem;
    font-size:0.86rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .auth-gate-people .avatar-stack img{
    width:34px;
    height:34px;
  }
  .field-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
  }
  .field-password{
    position:relative;
  }
  .field-password input{
    padding-right:3.1rem;
  }
  .field-password-toggle{
    position:absolute;
    top:50%;
    right:0.55rem;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--ink-soft);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:color 0.2s ease, background 0.2s ease;
  }
  .field-password-toggle:hover,
  .field-password-toggle:focus-visible{
    color:var(--primary);
    background:rgba(91,79,232,0.08);
    outline:none;
  }
  .auth-gate-assurances{
    list-style:none;
    margin:1.5rem 0 0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:0.55rem 1rem;
  }
  .auth-gate-assurances li{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    font-size:0.82rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .auth-gate-assurances svg{color:var(--teal);flex-shrink:0;}
  @keyframes auth-photo-drift{
    from{transform:scale(1.06) translate3d(0,0,0);}
    to{transform:scale(1.12) translate3d(-1.5%, -1%, 0);}
  }
  @keyframes auth-rise{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
  }
  @media (max-width:991px){
    .auth-gate{
      grid-template-columns:1fr;
      min-height:auto;
    }
    .auth-gate-visual{
      min-height:280px;
      max-height:42vh;
    }
    .auth-gate-visual-content{
      min-height:280px;
      padding:1.6rem 1.35rem 1.5rem;
      justify-content:flex-end;
    }
    .auth-gate-brand{font-size:2.1rem;}
    .auth-gate-tagline{font-size:0.95rem;margin-bottom:1rem;max-width:34ch;}
    .auth-gate-quote blockquote{font-size:0.95rem;}
    .auth-gate-panel{padding:1.75rem 1.15rem 2.75rem;align-items:flex-start;}
  }
  @media (prefers-reduced-motion: reduce){
    .auth-gate-photo,
    .auth-gate-visual-content,
    .auth-gate-quote,
    .auth-gate-panel{
      animation:none !important;
    }
    .auth-gate-photo{transform:none;}
  }

/* ===== from aide.html ===== */
:root{
    --bg:#F6F5FC;--bg-hero-a:#EFE9FF;--bg-hero-b:#FFEDE3;
    --ink:#1C1633;--ink-soft:#5B5578;--primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;--primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;--yellow:#FFC93C;--teal:#2EC4B6;--card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-0.01em;}
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}
  a.inline{color:var(--primary);font-weight:600;text-decoration:none;}
  a.inline:hover{text-decoration:underline;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{background:#fff;backdrop-filter:none;padding-top:1.1rem;padding-bottom:1.1rem;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(28,22,51,0.06);}
  .navbar-brand{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:0.55rem;color:var(--ink)!important;text-decoration:none!important;}
  .nav-link.custom{font-weight:600;font-size:0.95rem;color:var(--ink)!important;padding:0.5rem 1rem!important;text-decoration:none!important;}
  .btn-pill{font-weight:700;font-size:0.92rem;line-height:1.15;border-radius:100px;padding:0.65rem 1.5rem;background:var(--primary);color:#fff;border:none;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;cursor:pointer;}
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{color:#fff;text-decoration:none!important;}
  .btn-pill:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{font-weight:700;font-size:0.92rem;border-radius:100px;padding:0.7rem 1.5rem;background:transparent;color:var(--ink);border:2px solid #E2DEF5;transition:border-color 0.2s ease,transform 0.2s ease;display:inline-block;text-decoration:none!important;}
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}
  .btn-ghost.light{color:#fff;border-color:rgba(255,255,255,0.35);}
  .btn-ghost.light:hover{color:#fff;border-color:#fff;}

  .page-hero{position:relative;padding:3.2rem 0 2.8rem;background:linear-gradient(150deg,var(--bg-hero-a) 0%,var(--bg) 55%,var(--bg-hero-b) 100%);border-radius:0 0 48px 48px;overflow:hidden;}
  .cloud{position:absolute;background:#fff;border-radius:50%;opacity:0.7;filter:blur(0.5px);}
  .breadcrumb-nav{display:flex;flex-wrap:wrap;gap:0.35rem 0.5rem;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.2rem;position:relative;z-index:2;}
  .breadcrumb-nav a{color:var(--ink-soft);text-decoration:none;}
  .breadcrumb-nav a:hover{color:var(--primary);}
  .breadcrumb-nav span[aria-hidden]{opacity:0.5;}
  .eyebrow-chip{display:inline-flex;align-items:center;gap:0.55rem;margin-bottom:1.1rem;font-size:0.88rem;font-weight:600;color:var(--ink-soft);position:relative;z-index:2;}
  .eyebrow-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;}
  .page-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.08;margin-bottom:0.9rem;position:relative;z-index:2;}
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{font-size:1.05rem;max-width:54ch;margin-bottom:1.6rem;position:relative;z-index:2;}
  .hero-ctas{display:flex;gap:0.9rem;flex-wrap:wrap;position:relative;z-index:2;}

  section{padding:3.5rem 0;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 2.5rem;}
  .kicker{color:var(--coral);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:block;}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:0.6rem;}

  .topic-card{background:var(--card);border-radius:24px;padding:1.6rem 1.5rem;height:100%;box-shadow:0 6px 24px rgba(28,22,51,0.05);transition:transform 0.25s ease,box-shadow 0.25s ease;text-decoration:none!important;display:block;color:inherit;}
  .topic-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(28,22,51,0.1);}
  .topic-anim{
    width:100%;height:100px;border-radius:18px;margin-bottom:1.1rem;
    position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  }
  .topic-anim.install{background:linear-gradient(160deg,#F0FBF9 0%,#EAF9F5 100%);}
  .topic-anim.compat{background:linear-gradient(160deg,#EDE9FF 0%,#F3F1FC 100%);}
  .topic-anim.refund{background:linear-gradient(160deg,#FFF5F2 0%,#FFEFE9 100%);}
  .topic-anim.status{background:linear-gradient(160deg,#FFFBF0 0%,#FFF7E0 100%);}
  .topic-anim.dest{background:linear-gradient(160deg,#FFF5F2 0%,#FFEFE9 100%);}
  .topic-anim.cover{background:linear-gradient(160deg,#F0FBF9 0%,#EAF9F5 100%);}

  /* install — phone + QR */
  .anim-phone{
    width:46px;height:76px;background:#fff;border-radius:10px;
    border:2px solid rgba(46,196,182,0.35);position:relative;
    box-shadow:0 8px 20px rgba(28,22,51,0.08);
  }
  .anim-phone-notch{width:16px;height:3px;background:#E8E4F5;border-radius:4px;margin:7px auto 0;}
  .anim-phone-screen{
    position:absolute;inset:15px 7px 8px;background:#F4FBFA;border-radius:5px;
    display:flex;align-items:center;justify-content:center;
  }
  .anim-qr-mini{
    width:24px;height:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
    opacity:0;animation:qr-appear 3s ease-in-out infinite;
  }
  .anim-qr-mini i{background:var(--teal);border-radius:1px;opacity:0;animation:qr-dot 3s ease-in-out infinite;}
  .anim-qr-mini i:nth-child(1){animation-delay:0.1s;}
  .anim-qr-mini i:nth-child(2){animation-delay:0.2s;}
  .anim-qr-mini i:nth-child(3){animation-delay:0.15s;}
  .anim-qr-mini i:nth-child(4){animation-delay:0.25s;}
  .anim-qr-mini i:nth-child(5){animation-delay:0.35s;}
  .anim-qr-mini i:nth-child(6){animation-delay:0.3s;}
  .anim-qr-mini i:nth-child(7){animation-delay:0.4s;}
  .anim-qr-mini i:nth-child(8){animation-delay:0.5s;}
  .anim-qr-mini i:nth-child(9){animation-delay:0.45s;}
  .anim-check{
    position:absolute;width:20px;height:20px;border-radius:50%;background:var(--teal);
    display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.5);
    animation:check-pop 3s ease-in-out infinite;
  }
  .anim-check::after{
    content:'';width:5px;height:8px;border:2px solid #fff;border-top:none;border-left:none;
    transform:rotate(45deg) translate(-1px,-1px);
  }
  @keyframes qr-appear{0%,15%,55%,100%{opacity:0;}25%,45%{opacity:1;}}
  @keyframes qr-dot{0%,15%,55%,100%{opacity:0;transform:scale(0.5);}25%,45%{opacity:1;transform:scale(1);}}
  @keyframes check-pop{0%,48%,100%{opacity:0;transform:scale(0.5);}58%,78%{opacity:1;transform:scale(1);}}

  /* compat — device + check badge */
  .anim-compat{
    position:relative;width:70px;height:70px;display:flex;align-items:center;justify-content:center;
  }
  .anim-compat-phone{
    width:40px;height:64px;background:#fff;border-radius:9px;
    border:2px solid rgba(91,79,232,0.3);box-shadow:0 6px 16px rgba(28,22,51,0.08);
  }
  .anim-compat-phone::before{
    content:'';display:block;width:14px;height:3px;background:#E8E4F5;border-radius:3px;margin:6px auto 0;
  }
  .anim-compat-badge{
    position:absolute;right:2px;bottom:8px;width:26px;height:26px;border-radius:50%;
    background:var(--primary);display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(28,22,51,0.35);
    animation:compat-pop 2.6s ease-in-out infinite;
  }
  .anim-compat-badge::after{
    content:'';width:6px;height:10px;border:2.5px solid #fff;border-top:none;border-left:none;
    transform:rotate(45deg) translate(-1px,-1px);
  }
  @keyframes compat-pop{
    0%,100%{transform:scale(0.85);opacity:0.7;}
    45%,65%{transform:scale(1);opacity:1;}
  }

  /* refund — coin bounce + return arrow */
  .anim-refund{
    position:relative;width:90px;height:54px;display:flex;align-items:center;justify-content:center;
  }
  .anim-coin{
    width:34px;height:34px;border-radius:50%;
    background:linear-gradient(145deg,#FFD56A,var(--yellow));
    border:2px solid #F0B820;position:relative;
    box-shadow:0 4px 12px rgba(255,201,60,0.4);
    animation:coin-bounce 2.4s ease-in-out infinite;
  }
  .anim-coin::after{
    content:'€';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:0.85rem;color:#9A6E00;
  }
  .anim-refund-arrow{
    position:absolute;left:8px;top:50%;width:28px;height:28px;margin-top:-14px;
    border-radius:50%;background:#fff;border:2px solid rgba(255,107,74,0.35);
    display:flex;align-items:center;justify-content:center;
    animation:arrow-nudge 2.4s ease-in-out infinite;
  }
  .anim-refund-arrow::before{
    content:'';width:10px;height:10px;border-left:2.5px solid var(--coral);border-bottom:2.5px solid var(--coral);
    transform:rotate(45deg);margin-left:2px;
  }
  @keyframes coin-bounce{
    0%,100%{transform:translateY(0) rotate(0deg);}
    40%{transform:translateY(-8px) rotate(-12deg);}
    70%{transform:translateY(2px) rotate(6deg);}
  }
  @keyframes arrow-nudge{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(-4px);}
  }

  /* status — signal bars */
  .anim-connect{display:flex;align-items:flex-end;gap:5px;height:40px;}
  .anim-connect span{
    width:7px;background:var(--yellow);border-radius:4px;transform-origin:bottom;
    animation:bar-rise 2.4s ease-in-out infinite;
  }
  .anim-connect span:nth-child(1){height:12px;animation-delay:0s;}
  .anim-connect span:nth-child(2){height:22px;animation-delay:0.15s;}
  .anim-connect span:nth-child(3){height:30px;animation-delay:0.3s;}
  .anim-connect span:nth-child(4){height:40px;animation-delay:0.45s;}
  .anim-connected{margin-left:0.7rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.3rem;}
  .anim-connected-dot{
    width:9px;height:9px;border-radius:50%;background:var(--teal);
    box-shadow:0 0 0 0 rgba(46,196,182,0.5);animation:connected-pulse 2.4s ease-out infinite;
  }
  .anim-connected-label{
    font-size:0.62rem;font-weight:700;color:var(--ink-soft);letter-spacing:0.04em;
    text-transform:uppercase;opacity:0;animation:label-fade 2.4s ease-in-out infinite;
  }
  @keyframes bar-rise{0%,100%{transform:scaleY(0.3);opacity:0.35;}40%,70%{transform:scaleY(1);opacity:1;}}
  @keyframes connected-pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,196,182,0.5);}50%{box-shadow:0 0 0 8px rgba(46,196,182,0);}}
  @keyframes label-fade{0%,35%{opacity:0;}50%,80%{opacity:1;}100%{opacity:0;}}

  /* destinations — globe + cards */
  .anim-dest-scene{position:relative;display:flex;align-items:center;width:160px;height:48px;}
  .anim-globe-wrap{position:relative;width:48px;height:48px;flex-shrink:0;}
  .anim-globe{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(145deg,var(--violet-soft),var(--violet));position:relative;
    animation:globe-spin 8s linear infinite;
  }
  .anim-globe::before,.anim-globe::after{
    content:'';position:absolute;border:1.5px solid rgba(255,255,255,0.35);border-radius:50%;
    left:50%;top:50%;transform:translate(-50%,-50%);
  }
  .anim-globe::before{width:70%;height:28%;}
  .anim-globe::after{width:70%;height:52%;}
  .anim-globe span{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);transform:scaleX(0.35);}
  .anim-cards{position:relative;width:100px;height:34px;margin-left:0.55rem;flex-shrink:0;}
  .anim-card{
    position:absolute;inset:0;display:flex;align-items:center;gap:0.4rem;background:#fff;
    border-radius:9px;padding:0.3rem 0.5rem;box-shadow:0 4px 14px rgba(28,22,51,0.08);
    opacity:0;transform:translateX(12px) scale(0.92);animation:card-cycle 6s ease-in-out infinite;
  }
  .anim-card:nth-child(2){animation-delay:2s;}
  .anim-card:nth-child(3){animation-delay:4s;}
  .anim-card img{width:20px;height:14px;border-radius:2px;object-fit:cover;}
  .anim-card b{font-size:0.68rem;color:var(--ink);font-weight:700;}
  @keyframes globe-spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
  @keyframes card-cycle{
    0%,28%,100%{opacity:0;transform:translateX(12px) scale(0.92);}
    5%,22%{opacity:1;transform:translateX(0) scale(1);}
  }

  /* coverage — orbit */
  .anim-orbit{position:relative;width:78px;height:78px;}
  .anim-orbit .anim-globe{
    width:44px;height:44px;position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);animation:globe-hue 8s linear infinite;
  }
  .orbit-ring{
    position:absolute;inset:0;border:2px dashed rgba(46,196,182,0.35);border-radius:50%;
    animation:orbit-spin 6s linear infinite;
  }
  .orbit-dot{
    position:absolute;width:10px;height:10px;background:var(--coral);border-radius:50%;
    top:-5px;left:50%;margin-left:-5px;box-shadow:0 0 0 3px rgba(255,107,74,0.25);
  }
  @keyframes globe-hue{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(20deg);}}
  @keyframes orbit-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

  .topic-card h3{font-size:1.15rem;margin-bottom:0.4rem;color:var(--ink);}
  .topic-card p{font-size:0.9rem;margin-bottom:0.8rem;}
  .topic-card .more{font-size:0.82rem;font-weight:700;color:var(--primary);}

  .content-card{background:var(--card);border-radius:28px;padding:2rem 1.8rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);height:100%;}
  .content-card h3{font-size:1.2rem;margin-bottom:0.7rem;}
  .content-card ul{padding-left:1.1rem;margin:0;color:var(--ink-soft);}
  .content-card li{margin-bottom:0.45rem;}
  .content-card li strong{color:var(--ink);}

  .step-list{counter-reset:step;list-style:none;padding:0;margin:0;}
  .step-list li{counter-increment:step;position:relative;padding:1.2rem 1.2rem 1.2rem 4.2rem;background:var(--card);border-radius:20px;margin-bottom:0.85rem;box-shadow:0 4px 16px rgba(28,22,51,0.05);}
  .step-list li::before{content:counter(step);position:absolute;left:1.1rem;top:1.15rem;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;}
  .step-list h3{font-size:1.05rem;margin-bottom:0.3rem;}
  .step-list p{margin:0;font-size:0.92rem;}

  .device-grid{display:flex;flex-wrap:wrap;gap:0.45rem;}
  .device-chip{background:var(--bg);border-radius:100px;padding:0.35rem 0.8rem;font-size:0.8rem;font-weight:600;color:var(--ink);}

  .callout{border-radius:24px;padding:1.5rem 1.6rem;margin:1.2rem 0;}
  .callout.warn{background:linear-gradient(135deg,#FFF5F2,#FFEFE9);}
  .callout.info{background:linear-gradient(135deg,#EDE9FF,#F6F5FC);}
  .callout.ok{background:linear-gradient(135deg,#E6F9F6,#F2FCFB);}
  .callout h3{font-size:1.05rem;margin-bottom:0.4rem;}
  .callout p{margin:0;font-size:0.92rem;}

  .banner{border-radius:32px;padding:2.4rem 2rem;position:relative;overflow:hidden;}
  .banner h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:0.6rem;}
  .banner p{margin-bottom:1.3rem;max-width:46ch;}
  .banner-coral{background:linear-gradient(135deg,#FFE8E1 0%,#FFF5F2 100%);}
  .banner-teal{background:linear-gradient(135deg,#E6F9F6 0%,#F2FCFB 100%);}
  .banner-purple{background:linear-gradient(135deg,#EDE9FF 0%,#F6F5FC 100%);}

  .cta-banner{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:36px;padding:3rem 2rem;text-align:center;color:#fff;position:relative;overflow:hidden;}
  .cta-banner h2{color:#fff;margin-bottom:0.8rem;font-size:clamp(1.6rem,3.2vw,2.2rem);}
  .cta-banner p{color:#E6E3FB;max-width:44ch;margin:0 auto 1.8rem;}
  .cta-actions{display:flex;gap:0.9rem;flex-wrap:wrap;justify-content:center;}
  .cta-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,0.06);pointer-events:none;}

  .status-pill{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(46,196,182,0.15);color:#0F7A70;font-weight:700;font-size:0.85rem;padding:0.45rem 0.95rem;border-radius:100px;margin-bottom:1rem;}
  .status-pill::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(46,196,182,0.25);animation:status-pulse 2s ease-out infinite;}
  @keyframes status-pulse{0%{box-shadow:0 0 0 0 rgba(46,196,182,0.45);}100%{box-shadow:0 0 0 10px rgba(46,196,182,0);}}
  .status-card{background:var(--card);border-radius:20px;padding:1.3rem 1.4rem;box-shadow:0 4px 16px rgba(28,22,51,0.05);height:100%;}
  .status-card h3{font-size:1.05rem;margin-bottom:0.35rem;}
  .status-ok{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.78rem;font-weight:700;color:#0F7A70;text-transform:uppercase;letter-spacing:0.04em;}
  .status-ok::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal);}

  .policy-grid .content-card h3{display:flex;align-items:center;gap:0.5rem;}

  .accordion-item{border:none;background:var(--card);border-radius:18px!important;margin-bottom:0.75rem;overflow:hidden;box-shadow:0 4px 14px rgba(28,22,51,0.04);}
  .accordion-button{font-weight:700;font-size:0.95rem;color:var(--ink);background:var(--card);box-shadow:none!important;padding:1.15rem 1.3rem;}
  .accordion-button:not(.collapsed){background:var(--card);color:var(--violet);}
  .accordion-button::after{filter:none;}
  .accordion-body{color:var(--ink-soft);font-size:0.92rem;padding:0 1.3rem 1.2rem;line-height:1.65;}

  .contact-strip{background:var(--ink);border-radius:28px;padding:2rem;color:#fff;}
  .contact-strip h2{color:#fff;font-size:1.5rem;margin-bottom:0.5rem;}
  .contact-strip p{color:#C8C3E0;margin-bottom:1.2rem;}
  .contact-strip a.mail{color:var(--yellow);font-weight:700;text-decoration:none;}

  footer{background:var(--ink);color:#fff;padding:0;margin-top:0;}
  .footer-top{padding:4rem 0 3rem;border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-brand{margin-bottom:1.5rem;}
  .footer-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.45rem;color:#fff;display:inline-flex;align-items:center;gap:0.55rem;text-decoration:none!important;margin-bottom:1rem;}
  .footer-logo:hover{color:#fff;}
  .footer-brand p{color:#fff;font-size:0.92rem;line-height:1.65;max-width:32ch;margin-bottom:1.4rem;}
  .footer-stats{display:flex;flex-wrap:wrap;gap:1.2rem;margin-bottom:1.5rem;}
  .footer-stat strong{display:block;font-family:'Baloo 2',sans-serif;font-size:1.35rem;font-weight:800;color:var(--yellow);line-height:1.1;}
  .footer-stat span{font-size:0.72rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:0.05em;}
  .footer-social{display:flex;gap:0.55rem;}
  .footer-social a{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none!important;transition:background 0.2s ease,border-color 0.2s ease,transform 0.2s ease;}
  .footer-social a:hover{background:rgba(28,22,51,0.35);border-color:rgba(91,79,232,0.5);transform:translateY(-2px);color:#fff;}
  .footer-col-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:0.95rem;color:#fff;margin-bottom:1.1rem;}
  .footer-links{list-style:none;padding:0;margin:0;}
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{color:#fff;text-decoration:none!important;font-size:0.88rem;font-weight:500;transition:opacity 0.2s ease;}
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{list-style:none;padding:0;margin:0;}
  .footer-contact li{display:flex;align-items:flex-start;gap:0.65rem;margin-bottom:0.85rem;font-size:0.88rem;color:#fff;}
  .footer-contact svg{flex-shrink:0;margin-top:2px;opacity:0.85;}
  .footer-contact a{color:#fff;text-decoration:none!important;}
  .footer-trust{padding:1.6rem 0;border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.5rem;}
  .footer-trust-item{display:flex;align-items:center;gap:0.55rem;font-size:0.82rem;font-weight:600;color:#fff;}
  .foot-bottom{padding:1.5rem 0 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8rem;color:#fff;}
  .foot-legal{display:flex;flex-wrap:wrap;gap:0.35rem 1.2rem;}
  .foot-legal a{color:#fff;text-decoration:none!important;transition:opacity 0.2s ease;}
  .foot-legal a:hover{opacity:0.75;}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    .status-pill::before{animation:none;}
    .anim-globe,.anim-card,.anim-qr-mini,.anim-qr-mini i,.anim-check,
    .anim-connect span,.anim-connected-dot,.anim-connected-label,
    .anim-compat-badge,.anim-coin,.anim-refund-arrow,.orbit-ring{animation:none;}
    .anim-card:first-child{opacity:1;transform:none;}
    .anim-qr-mini,.anim-qr-mini i{opacity:1;transform:none;}
    .anim-check{opacity:1;transform:none;}
    .anim-connect span{transform:scaleY(1);opacity:1;}
    .anim-connected-label{opacity:1;}
    .anim-compat-badge,.anim-coin,.anim-refund-arrow{opacity:1;transform:none;}
  }

/* ===== from compatibilite.html ===== */
:root{
    --bg:#F6F5FC;--bg-hero-a:#EFE9FF;--bg-hero-b:#FFEDE3;
    --ink:#1C1633;--ink-soft:#5B5578;--primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;--primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;--yellow:#FFC93C;--teal:#2EC4B6;--card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-0.01em;}
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}
  a.inline{color:var(--primary);font-weight:600;text-decoration:none;}
  a.inline:hover{text-decoration:underline;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease, transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{background:#fff;backdrop-filter:none;padding-top:1.1rem;padding-bottom:1.1rem;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(28,22,51,0.06);}
  .navbar-brand{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:0.55rem;color:var(--ink)!important;text-decoration:none!important;}
  .nav-link.custom{font-weight:600;font-size:0.95rem;color:var(--ink)!important;padding:0.5rem 1rem!important;text-decoration:none!important;}
  .btn-pill{font-weight:700;font-size:0.92rem;line-height:1.15;border-radius:100px;padding:0.65rem 1.5rem;background:var(--primary);color:#fff;border:none;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;cursor:pointer;}
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{color:#fff;text-decoration:none!important;}
  .btn-pill:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{font-weight:700;font-size:0.92rem;border-radius:100px;padding:0.7rem 1.5rem;background:transparent;color:var(--ink);border:2px solid #E2DEF5;transition:border-color 0.2s ease,transform 0.2s ease;display:inline-block;text-decoration:none!important;}
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}
  .btn-ghost.light{color:#fff;border-color:rgba(255,255,255,0.35);}
  .btn-ghost.light:hover{color:#fff;border-color:#fff;}

  .page-hero{position:relative;padding:3.2rem 0 2.8rem;background:linear-gradient(150deg,var(--bg-hero-a) 0%,var(--bg) 55%,var(--bg-hero-b) 100%);border-radius:0 0 48px 48px;overflow:hidden;}
  .cloud{position:absolute;background:#fff;border-radius:50%;opacity:0.7;filter:blur(0.5px);}
  .breadcrumb-nav{display:flex;flex-wrap:wrap;gap:0.35rem 0.5rem;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.2rem;position:relative;z-index:2;}
  .breadcrumb-nav a{color:var(--ink-soft);text-decoration:none;}
  .breadcrumb-nav a:hover{color:var(--primary);}
  .breadcrumb-nav span[aria-hidden]{opacity:0.5;}
  .eyebrow-chip{display:inline-flex;align-items:center;gap:0.55rem;margin-bottom:1.1rem;font-size:0.88rem;font-weight:600;color:var(--ink-soft);position:relative;z-index:2;}
  .eyebrow-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;}
  .page-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.08;margin-bottom:0.9rem;position:relative;z-index:2;}
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{font-size:1.05rem;max-width:54ch;margin-bottom:1.6rem;position:relative;z-index:2;}
  .hero-ctas{display:flex;gap:0.9rem;flex-wrap:wrap;position:relative;z-index:2;}

  section{padding:3.5rem 0;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 2.5rem;}
  .kicker{color:var(--coral);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:block;}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:0.6rem;}

  .topic-card{background:var(--card);border-radius:24px;padding:1.6rem 1.5rem;height:100%;box-shadow:0 6px 24px rgba(28,22,51,0.05);transition:transform 0.25s ease,box-shadow 0.25s ease;text-decoration:none!important;display:block;color:inherit;}
  .topic-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(28,22,51,0.1);}
  .topic-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.25rem;}
  .topic-icon.coral{background:rgba(255,107,74,0.14);}
  .topic-icon.teal{background:rgba(46,196,182,0.14);}
  .topic-icon.purple{background:rgba(28,22,51,0.12);}
  .topic-icon.yellow{background:rgba(255,201,60,0.22);}
  .topic-card h3{font-size:1.15rem;margin-bottom:0.4rem;color:var(--ink);}
  .topic-card p{font-size:0.9rem;margin-bottom:0.8rem;}
  .topic-card .more{font-size:0.82rem;font-weight:700;color:var(--primary);}

  .content-card{background:var(--card);border-radius:28px;padding:2rem 1.8rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);height:100%;}
  .content-card h3{font-size:1.2rem;margin-bottom:0.7rem;}
  .content-card ul{padding-left:1.1rem;margin:0;color:var(--ink-soft);}
  .content-card li{margin-bottom:0.45rem;}
  .content-card li strong{color:var(--ink);}

  .step-list{counter-reset:step;list-style:none;padding:0;margin:0;}
  .step-list li{counter-increment:step;position:relative;padding:1.2rem 1.2rem 1.2rem 4.2rem;background:var(--card);border-radius:20px;margin-bottom:0.85rem;box-shadow:0 4px 16px rgba(28,22,51,0.05);}
  .step-list li::before{content:counter(step);position:absolute;left:1.1rem;top:1.15rem;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;}
  .step-list h3{font-size:1.05rem;margin-bottom:0.3rem;}
  .step-list p{margin:0;font-size:0.92rem;}

  .device-grid{display:flex;flex-wrap:wrap;gap:0.45rem;}
  .device-chip{background:var(--bg);border-radius:100px;padding:0.35rem 0.8rem;font-size:0.8rem;font-weight:600;color:var(--ink);}

  .callout{border-radius:24px;padding:1.5rem 1.6rem;margin:1.2rem 0;}
  .callout.warn{background:linear-gradient(135deg,#FFF5F2,#FFEFE9);}
  .callout.info{background:linear-gradient(135deg,#EDE9FF,#F6F5FC);}
  .callout.ok{background:linear-gradient(135deg,#E6F9F6,#F2FCFB);}
  .callout h3{font-size:1.05rem;margin-bottom:0.4rem;}
  .callout p{margin:0;font-size:0.92rem;}

  .banner{border-radius:32px;padding:2.4rem 2rem;position:relative;overflow:hidden;}
  .banner h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:0.6rem;}
  .banner p{margin-bottom:1.3rem;max-width:46ch;}
  .banner-coral{background:linear-gradient(135deg,#FFE8E1 0%,#FFF5F2 100%);}
  .banner-teal{background:linear-gradient(135deg,#E6F9F6 0%,#F2FCFB 100%);}
  .banner-purple{background:linear-gradient(135deg,#EDE9FF 0%,#F6F5FC 100%);}

  .cta-banner{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);border-radius:36px;padding:3rem 2rem;text-align:center;color:#fff;position:relative;overflow:hidden;}
  .cta-banner h2{color:#fff;margin-bottom:0.8rem;font-size:clamp(1.6rem,3.2vw,2.2rem);}
  .cta-banner p{color:#E6E3FB;max-width:44ch;margin:0 auto 1.8rem;}
  .cta-actions{display:flex;gap:0.9rem;flex-wrap:wrap;justify-content:center;}
  .cta-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,0.06);pointer-events:none;}

  .status-pill{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(46,196,182,0.15);color:#0F7A70;font-weight:700;font-size:0.85rem;padding:0.45rem 0.95rem;border-radius:100px;margin-bottom:1rem;}
  .status-pill::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(46,196,182,0.25);animation:status-pulse 2s ease-out infinite;}
  @keyframes status-pulse{0%{box-shadow:0 0 0 0 rgba(46,196,182,0.45);}100%{box-shadow:0 0 0 10px rgba(46,196,182,0);}}
  .status-card{background:var(--card);border-radius:20px;padding:1.3rem 1.4rem;box-shadow:0 4px 16px rgba(28,22,51,0.05);height:100%;}
  .status-card h3{font-size:1.05rem;margin-bottom:0.35rem;}
  .status-ok{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.78rem;font-weight:700;color:#0F7A70;text-transform:uppercase;letter-spacing:0.04em;}
  .status-ok::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal);}

  .policy-grid .content-card h3{display:flex;align-items:center;gap:0.5rem;}

  .accordion-item{border:none;background:var(--card);border-radius:18px!important;margin-bottom:0.75rem;overflow:hidden;box-shadow:0 4px 14px rgba(28,22,51,0.04);}
  .accordion-button{font-weight:700;font-size:0.95rem;color:var(--ink);background:var(--card);box-shadow:none!important;padding:1.15rem 1.3rem;}
  .accordion-button:not(.collapsed){background:var(--card);color:var(--violet);}
  .accordion-button::after{filter:none;}
  .accordion-body{color:var(--ink-soft);font-size:0.92rem;padding:0 1.3rem 1.2rem;line-height:1.65;}

  .contact-strip{background:var(--ink);border-radius:28px;padding:2rem;color:#fff;}
  .contact-strip h2{color:#fff;font-size:1.5rem;margin-bottom:0.5rem;}
  .contact-strip p{color:#C8C3E0;margin-bottom:1.2rem;}
  .contact-strip a.mail{color:var(--yellow);font-weight:700;text-decoration:none;}

  footer{background:var(--ink);color:#fff;padding:0;margin-top:0;}
  .footer-top{padding:4rem 0 3rem;border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-brand{margin-bottom:1.5rem;}
  .footer-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.45rem;color:#fff;display:inline-flex;align-items:center;gap:0.55rem;text-decoration:none!important;margin-bottom:1rem;}
  .footer-logo:hover{color:#fff;}
  .footer-brand p{color:#fff;font-size:0.92rem;line-height:1.65;max-width:32ch;margin-bottom:1.4rem;}
  .footer-stats{display:flex;flex-wrap:wrap;gap:1.2rem;margin-bottom:1.5rem;}
  .footer-stat strong{display:block;font-family:'Baloo 2',sans-serif;font-size:1.35rem;font-weight:800;color:var(--yellow);line-height:1.1;}
  .footer-stat span{font-size:0.72rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:0.05em;}
  .footer-social{display:flex;gap:0.55rem;}
  .footer-social a{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none!important;transition:background 0.2s ease,border-color 0.2s ease,transform 0.2s ease;}
  .footer-social a:hover{background:rgba(28,22,51,0.35);border-color:rgba(91,79,232,0.5);transform:translateY(-2px);color:#fff;}
  .footer-col-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:0.95rem;color:#fff;margin-bottom:1.1rem;}
  .footer-links{list-style:none;padding:0;margin:0;}
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{color:#fff;text-decoration:none!important;font-size:0.88rem;font-weight:500;transition:opacity 0.2s ease;}
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{list-style:none;padding:0;margin:0;}
  .footer-contact li{display:flex;align-items:flex-start;gap:0.65rem;margin-bottom:0.85rem;font-size:0.88rem;color:#fff;}
  .footer-contact svg{flex-shrink:0;margin-top:2px;opacity:0.85;}
  .footer-contact a{color:#fff;text-decoration:none!important;}
  .footer-trust{padding:1.6rem 0;border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.5rem;}
  .footer-trust-item{display:flex;align-items:center;gap:0.55rem;font-size:0.82rem;font-weight:600;color:#fff;}
  .foot-bottom{padding:1.5rem 0 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.8rem;color:#fff;}
  .foot-legal{display:flex;flex-wrap:wrap;gap:0.35rem 1.2rem;}
  .foot-legal a{color:#fff;text-decoration:none!important;transition:opacity 0.2s ease;}
  .foot-legal a:hover{opacity:0.75;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.status-pill::before{animation:none;}}

/* ===== from esim-japon.html ===== */
:root{
    --bg:#F6F5FC;--bg-hero-a:#EFE9FF;--bg-hero-b:#FFEDE3;
    --ink:#1C1633;--ink-soft:#5B5578;--primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;--primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;--yellow:#FFC93C;--teal:#2EC4B6;--card:#FFFFFF;
    --jp-red:#E23D3D;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-0.01em;}
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}
  a.inline{color:var(--primary);font-weight:600;text-decoration:none;}
  a.inline:hover{text-decoration:underline;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{background:#fff;backdrop-filter:none;padding-top:1.1rem;padding-bottom:1.1rem;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(28,22,51,0.06);}
  .navbar-brand{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:0.55rem;color:var(--ink)!important;text-decoration:none!important;}
  .nav-link.custom{font-weight:600;font-size:0.95rem;color:var(--ink)!important;padding:0.5rem 1rem!important;text-decoration:none!important;}
  .btn-pill{font-weight:700;font-size:0.92rem;line-height:1.15;border-radius:100px;padding:0.65rem 1.5rem;background:var(--primary);color:#fff;border:none;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;cursor:pointer;}
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{color:#fff;text-decoration:none!important;}
  .btn-pill:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{font-weight:700;font-size:0.92rem;border-radius:100px;padding:0.7rem 1.5rem;background:transparent;color:var(--ink);border:2px solid #E2DEF5;transition:border-color 0.2s ease,transform 0.2s ease;display:inline-block;text-decoration:none!important;}
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}

  .page-hero{
    position:relative;padding:3.2rem 0 0;
    background:
      radial-gradient(ellipse 70% 55% at 85% 20%, rgba(255,183,197,0.35) 0%, transparent 55%),
      radial-gradient(ellipse 50% 45% at 10% 80%, rgba(28,22,51,0.12) 0%, transparent 50%),
      linear-gradient(155deg,var(--bg-hero-a) 0%,var(--bg) 50%,var(--bg-hero-b) 100%);
    border-radius:0 0 48px 48px;overflow:hidden;
  }
  .cloud{position:absolute;background:#fff;border-radius:50%;opacity:0.55;filter:blur(0.5px);pointer-events:none;}
  .breadcrumb-nav{display:flex;flex-wrap:wrap;gap:0.35rem 0.5rem;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.1rem;position:relative;z-index:2;}
  .breadcrumb-nav a{color:var(--ink-soft);text-decoration:none;}
  .breadcrumb-nav a:hover{color:var(--primary);}
  .breadcrumb-nav span[aria-hidden]{opacity:0.5;}
  .eyebrow-chip{display:inline-flex;align-items:center;gap:0.55rem;margin-bottom:1rem;font-size:0.88rem;font-weight:600;color:var(--ink-soft);position:relative;z-index:2;}
  .eyebrow-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--jp-red);flex-shrink:0;}
  .page-hero h1{font-size:clamp(2.15rem,5vw,3.55rem);line-height:1.05;margin-bottom:0.85rem;position:relative;z-index:2;}
  .page-hero h1 .brand{display:block;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;color:var(--primary);letter-spacing:0.02em;margin-bottom:0.35rem;}
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{font-size:1.08rem;max-width:48ch;margin-bottom:1.5rem;position:relative;z-index:2;}
  .hero-ctas{display:flex;gap:0.9rem;flex-wrap:wrap;position:relative;z-index:2;margin-bottom:1.6rem;}
  .hero-trust{display:flex;flex-wrap:wrap;gap:0.7rem 1.2rem;position:relative;z-index:2;font-size:0.86rem;font-weight:600;color:var(--ink-soft);}
  .hero-trust span{display:inline-flex;align-items:center;gap:0.4rem;}
  .hero-trust svg{flex-shrink:0;}
  .hero-visual{position:relative;z-index:2;margin-top:0.5rem;}
  .hero-visual img{
    width:100%;height:auto;display:block;
    animation:hero-float 6s ease-in-out infinite;
  }
  @keyframes hero-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  .sakura-petal{
    position:absolute;width:10px;height:10px;border-radius:70% 10% 70% 10%;
    background:rgba(255,150,170,0.55);pointer-events:none;z-index:1;
    animation:petal-fall linear infinite;
  }
  .sakura-petal:nth-child(1){left:12%;top:-5%;animation-duration:11s;}
  .sakura-petal:nth-child(2){left:28%;top:-8%;animation-duration:14s;animation-delay:-3s;width:8px;height:8px;}
  .sakura-petal:nth-child(3){left:55%;top:-6%;animation-duration:12s;animation-delay:-6s;}
  .sakura-petal:nth-child(4){left:72%;top:-10%;animation-duration:15s;animation-delay:-2s;width:7px;height:7px;}
  .sakura-petal:nth-child(5){left:88%;top:-4%;animation-duration:13s;animation-delay:-8s;}
  @keyframes petal-fall{
    0%{transform:translateY(0) rotate(0deg);opacity:0;}
    10%{opacity:0.8;}
    90%{opacity:0.55;}
    100%{transform:translateY(105vh) rotate(360deg);opacity:0;}
  }

  section{padding:3.8rem 0;}
  .section-head{text-align:center;max-width:680px;margin:0 auto 2.5rem;}
  .kicker{color:var(--coral);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:block;}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem);margin-bottom:0.6rem;}
  .section-head p{margin-bottom:0;}

  .plan-tabs{display:flex;justify-content:center;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}
  .plan-tab{
    font-weight:700;font-size:0.88rem;border-radius:100px;padding:0.55rem 1.2rem;
    border:2px solid #E2DEF5;background:transparent;color:var(--ink-soft);cursor:pointer;
    transition:all 0.2s ease;
  }
  .plan-tab.active,.plan-tab:hover{border-color:var(--primary);color:var(--primary);background:#fff;}
  .plans-grid{display:none;}
  .plans-grid.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;}
  .plan-loading,.plans-grid .empty{
    grid-column:1/-1;
    text-align:center;
    padding:1.4rem;
    color:var(--ink-soft);
    font-weight:600;
  }
  .plan-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:0.55rem;
    margin-bottom:0.35rem;
  }
  .plan-card-top .plan-data{margin-bottom:0;}
  .plan-card-days{
    display:flex;
    justify-content:center;
    margin:0.35rem 0 0.7rem;
  }
  .plan-net{
    display:inline-flex;
    align-items:center;
    gap:0.28rem;
    flex-shrink:0;
    padding:0.22rem 0.5rem;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:800;
    letter-spacing:0.02em;
    line-height:1;
    background:rgba(91,79,232,0.1);
    color:var(--primary);
  }
  .plan-net-5g{
    background:rgba(34,197,94,0.12);
    color:#15803d;
  }
  .plan-net-4g{
    background:rgba(91,79,232,0.1);
    color:var(--violet);
  }
  .plan-net-3g{
    background:rgba(28,22,51,0.08);
    color:var(--ink-soft);
  }
  .plan-net-icon{display:block;}
  .plan-meta .plan-net{vertical-align:middle;}
  .plan-item .plan-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;}
  .plan-card{
    background:var(--card);border-radius:22px;padding:1.45rem 1.35rem;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);position:relative;
    transition:transform 0.25s ease,box-shadow 0.25s ease;
    display:flex;flex-direction:column;
  }
  .plan-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(28,22,51,0.1);}
  .plan-card.featured{border:2px solid var(--primary);box-shadow:0 10px 32px rgba(28,22,51,0.15);}
  .plan-badge{
    position:absolute;top:-11px;right:1.1rem;background:var(--primary);color:#fff;
    font-size:0.7rem;font-weight:700;padding:0.25rem 0.7rem;border-radius:100px;letter-spacing:0.03em;
  }
  .plan-data{font-family:'Baloo 2',sans-serif;font-size:1.65rem;font-weight:800;line-height:1.1;margin-bottom:0.65rem;}
  .plan-days{
    display:inline-flex;align-items:baseline;gap:0.35rem;
    font-family:'Baloo 2',sans-serif;font-size:1.05rem;font-weight:800;color:var(--primary);
    background:linear-gradient(135deg,#EDE9FF 0%,#F3F0FF 100%);
    border:1.5px solid rgba(91,79,232,0.22);
    border-radius:12px;padding:0.4rem 0.75rem;margin-bottom:1rem;line-height:1.1;
    width:fit-content;
  }
  .plan-days .days-num{
    font-size:1.45rem;font-weight:800;color:var(--primary-dark);letter-spacing:-0.02em;
  }
  .plan-days .days-label{font-size:0.92rem;font-weight:700;color:var(--primary);}
  .plan-card.featured .plan-days{
    background:linear-gradient(135deg,var(--violet) 0%,var(--violet-soft) 100%);
    border-color:transparent;color:#fff;
  }
  .plan-card.featured .plan-days .days-num,
  .plan-card.featured .plan-days .days-label{color:#fff;}
  .plan-price{font-size:1.55rem;font-weight:800;color:var(--ink);margin-bottom:0.15rem;}
  .plan-price span{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}
  .plan-meta{font-size:0.8rem;color:var(--ink-soft);margin-bottom:1.15rem;flex-grow:1;}
  .plan-card .btn-pill{width:100%;text-align:center;padding:0.65rem 1rem;}

  .network-strip{
    background:linear-gradient(135deg,#1C1633 0%,#2A2250 100%);
    border-radius:28px;padding:2rem 1.8rem;color:#fff;margin-top:2.5rem;
  }
  .network-strip h3{color:#fff;font-size:1.25rem;margin-bottom:0.4rem;}
  .network-strip p{color:rgba(255,255,255,0.72);margin-bottom:1.2rem;font-size:0.95rem;}
  .network-pills{display:flex;flex-wrap:wrap;gap:0.55rem;}
  .network-pill{
    background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);
    border-radius:100px;padding:0.45rem 0.95rem;font-size:0.82rem;font-weight:600;color:#fff;
  }
  .network-pill strong{color:var(--yellow);font-weight:700;}

  .why-item{padding:0.3rem 0 0.3rem 0;}
  .why-item h3{font-size:1.2rem;margin-bottom:0.4rem;}
  .why-item p{margin-bottom:0;font-size:0.95rem;}
  .why-num{
    width:42px;height:42px;border-radius:14px;background:#EDE9FF;color:var(--primary);
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.1rem;
    display:inline-flex;align-items:center;justify-content:center;margin-bottom:0.85rem;
  }

  .compare-wrap{overflow-x:auto;border-radius:22px;box-shadow:0 6px 24px rgba(28,22,51,0.05);background:#fff;}
  .compare-table{width:100%;border-collapse:collapse;min-width:640px;margin:0;}
  .compare-table th,.compare-table td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid #F0EDF8;font-size:0.92rem;}
  .compare-table th{background:#F8F7FD;font-weight:700;color:var(--ink);font-size:0.85rem;}
  .compare-table th.highlight{background:var(--primary);color:#fff;}
  .compare-table td.highlight{background:rgba(91,79,232,0.04);font-weight:600;}
  .compare-table tr:last-child td{border-bottom:none;}
  .yes{color:var(--teal);font-weight:700;}
  .no{color:#C4BED8;font-weight:600;}

  .data-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
  .data-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .data-card h3{font-size:1.05rem;margin-bottom:0.35rem;}
  .data-card .rec{display:inline-block;margin-top:0.7rem;font-size:0.82rem;font-weight:700;color:var(--primary);background:#EDE9FF;padding:0.3rem 0.7rem;border-radius:100px;}

  .city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
  .city-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .city-card h3{font-size:1.1rem;margin-bottom:0.4rem;display:flex;align-items:center;gap:0.5rem;}
  .city-card h3 img{border-radius:3px;}
  .city-card p{margin:0;font-size:0.92rem;}

  .steps{counter-reset:step;}
  .step-item{display:flex;gap:1.2rem;margin-bottom:1.6rem;align-items:flex-start;}
  .step-item:last-child{margin-bottom:0;}
  .step-num{
    width:48px;height:48px;border-radius:16px;background:var(--primary);color:#fff;
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.2rem;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .step-body h3{font-size:1.15rem;margin-bottom:0.3rem;}
  .step-body p{margin:0;font-size:0.95rem;}

  .faq-section .accordion-item{background:#fff;border:none;border-radius:18px!important;margin-bottom:0.7rem;box-shadow:0 4px 18px rgba(28,22,51,0.04);overflow:hidden;}
  .faq-section .accordion-button{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);background:#fff;box-shadow:none!important;padding:1.15rem 1.3rem;}
  .faq-section .accordion-button:not(.collapsed){color:var(--primary);background:#fff;}
  .faq-section .accordion-button::after{background-size:1rem;}
  .faq-section .accordion-body{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:0.95rem;}

  .cta-band{
    background:linear-gradient(135deg,var(--primary) 0%,var(--violet) 50%,var(--coral) 160%);
    border-radius:32px;padding:2.8rem 2rem;text-align:center;color:#fff;
  }
  .cta-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:0.6rem;}
  .cta-band p{color:rgba(255,255,255,0.88);max-width:48ch;margin:0 auto 1.5rem;}
  .cta-band .btn-pill{background:#fff;color:var(--primary);}
  .cta-band .btn-pill:hover{background:#F4F2FF;color:var(--primary-dark);box-shadow:0 10px 24px rgba(0,0,0,0.15);}
  .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.4);}
  .cta-band .btn-ghost:hover{border-color:#fff;color:#fff;}
  .cta-actions{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;}

  .seo-copy{max-width:760px;margin:0 auto;}
  .seo-copy h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:0.8rem;}
  .seo-copy h3{font-size:1.2rem;margin:1.6rem 0 0.5rem;}
  .seo-copy p{margin-bottom:1rem;}
  .seo-copy ul{color:var(--ink-soft);padding-left:1.2rem;margin-bottom:1rem;}
  .seo-copy li{margin-bottom:0.4rem;}

  footer{background:#1C1633;color:#fff;margin-top:2rem;padding-top:0;}
  .footer-top{padding:4rem 0 3rem;}
  .footer-brand p{color:rgba(255,255,255,0.65);font-size:0.92rem;max-width:32ch;margin:0.9rem 0 1.4rem;}
  .footer-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.4rem;color:#fff!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:0.5rem;}
  .footer-stats{display:flex;gap:1.4rem;margin-bottom:1.4rem;}
  .footer-stat{display:flex;flex-direction:column;}
  .footer-stat strong{font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800;}
  .footer-stat span{font-size:0.75rem;color:rgba(255,255,255,0.55);font-weight:500;}
  .footer-social{display:flex;gap:0.6rem;}
  .footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background 0.2s;}
  .footer-social a:hover{background:rgba(255,255,255,0.16);}
  .footer-col-title{font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem;color:rgba(255,255,255,0.45);}
  .footer-links{list-style:none;padding:0;margin:0;}
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{color:#fff;text-decoration:none!important;font-size:0.88rem;font-weight:500;transition:opacity 0.2s ease;}
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{list-style:none;padding:0;margin:0;}
  .footer-contact li{display:flex;align-items:flex-start;gap:0.55rem;margin-bottom:0.75rem;font-size:0.88rem;color:rgba(255,255,255,0.75);}
  .footer-contact a{color:#fff;text-decoration:none;}
  .footer-trust{border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);padding:1.1rem 0;}
  .footer-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.5rem;}
  .footer-trust-item{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.7);}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.4rem 0;font-size:0.8rem;color:rgba(255,255,255,0.45);}
  .foot-legal{display:flex;flex-wrap:wrap;gap:1.2rem;}
  .foot-legal a{color:rgba(255,255,255,0.45);text-decoration:none;}
  .foot-legal a:hover{color:#fff;}

  @media (max-width:991px){
    .page-hero{padding-bottom:1.5rem;}
    .hero-visual{margin-top:1.5rem;}
  }
  @media (max-width:575px){
    section{padding:2.8rem 0;}
    .network-strip{padding:1.5rem 1.2rem;}
    .cta-band{padding:2.2rem 1.3rem;border-radius:24px;}
  }

/* ===== from esim-bali.html ===== */
:root{
    --bg:#F6F5FC;--bg-hero-a:#EFE9FF;--bg-hero-b:#FFEDE3;
    --ink:#1C1633;--ink-soft:#5B5578;--primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;--primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;--yellow:#FFC93C;--teal:#2EC4B6;--card:#FFFFFF;
    --th-blue:#0052B4;--th-red:#A51931;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-0.01em;}
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}
  a.inline{color:var(--primary);font-weight:600;text-decoration:none;}
  a.inline:hover{text-decoration:underline;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{background:#fff;backdrop-filter:none;padding-top:1.1rem;padding-bottom:1.1rem;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(28,22,51,0.06);}
  .navbar-brand{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:0.55rem;color:var(--ink)!important;text-decoration:none!important;}
  .nav-link.custom{font-weight:600;font-size:0.95rem;color:var(--ink)!important;padding:0.5rem 1rem!important;text-decoration:none!important;}
  .btn-pill{font-weight:700;font-size:0.92rem;line-height:1.15;border-radius:100px;padding:0.65rem 1.5rem;background:var(--primary);color:#fff;border:none;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;cursor:pointer;}
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{color:#fff;text-decoration:none!important;}
  .btn-pill:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{font-weight:700;font-size:0.92rem;border-radius:100px;padding:0.7rem 1.5rem;background:transparent;color:var(--ink);border:2px solid #E2DEF5;transition:border-color 0.2s ease,transform 0.2s ease;display:inline-block;text-decoration:none!important;}
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}

  .page-hero{
    position:relative;padding:3.2rem 0 0;
    background:
      radial-gradient(ellipse 70% 55% at 85% 20%, rgba(218,37,29,0.12) 0%, transparent 55%),
      radial-gradient(ellipse 40% 40% at 70% 30%, rgba(255,205,0,0.18) 0%, transparent 50%),
      radial-gradient(ellipse 50% 45% at 10% 80%, rgba(28,22,51,0.12) 0%, transparent 50%),
      linear-gradient(155deg,var(--bg-hero-a) 0%,var(--bg) 50%,var(--bg-hero-b) 100%);
    border-radius:0 0 48px 48px;overflow:hidden;
  }
  .cloud{position:absolute;background:#fff;border-radius:50%;opacity:0.55;filter:blur(0.5px);pointer-events:none;}
  .breadcrumb-nav{display:flex;flex-wrap:wrap;gap:0.35rem 0.5rem;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.1rem;position:relative;z-index:2;}
  .breadcrumb-nav a{color:var(--ink-soft);text-decoration:none;}
  .breadcrumb-nav a:hover{color:var(--primary);}
  .breadcrumb-nav span[aria-hidden]{opacity:0.5;}
  .eyebrow-chip{display:inline-flex;align-items:center;gap:0.55rem;margin-bottom:1rem;font-size:0.88rem;font-weight:600;color:var(--ink-soft);position:relative;z-index:2;}
  .eyebrow-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0;}
  .page-hero h1{font-size:clamp(2.15rem,5vw,3.55rem);line-height:1.05;margin-bottom:0.85rem;position:relative;z-index:2;}
  .page-hero h1 .brand{display:block;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;color:var(--primary);letter-spacing:0.02em;margin-bottom:0.35rem;}
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{font-size:1.08rem;max-width:48ch;margin-bottom:1.5rem;position:relative;z-index:2;}
  .hero-ctas{display:flex;gap:0.9rem;flex-wrap:wrap;position:relative;z-index:2;margin-bottom:1.6rem;}
  .hero-trust{display:flex;flex-wrap:wrap;gap:0.7rem 1.2rem;position:relative;z-index:2;font-size:0.86rem;font-weight:600;color:var(--ink-soft);}
  .hero-trust span{display:inline-flex;align-items:center;gap:0.4rem;}
  .hero-trust svg{flex-shrink:0;}
  .hero-visual{position:relative;z-index:2;margin-top:0.5rem;}
  .hero-visual img{
    width:100%;height:auto;display:block;
    animation:hero-float 6s ease-in-out infinite;
  }
  @keyframes hero-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  .lantern-dot{
    position:absolute;width:10px;height:10px;border-radius:70% 10% 70% 10%;
    background:rgba(218,37,29,0.35);pointer-events:none;z-index:1;
    border-radius:50%;
    animation:petal-fall linear infinite;
  }
  .lantern-dot:nth-child(1){left:12%;top:-5%;animation-duration:11s;}
  .lantern-dot:nth-child(2){left:28%;top:-8%;animation-duration:14s;animation-delay:-3s;width:8px;height:8px;}
  .lantern-dot:nth-child(3){left:55%;top:-6%;animation-duration:12s;animation-delay:-6s;}
  .lantern-dot:nth-child(4){left:72%;top:-10%;animation-duration:15s;animation-delay:-2s;width:7px;height:7px;}
  .lantern-dot:nth-child(5){left:88%;top:-4%;animation-duration:13s;animation-delay:-8s;}
  @keyframes petal-fall{
    0%{transform:translateY(0) rotate(0deg);opacity:0;}
    10%{opacity:0.8;}
    90%{opacity:0.55;}
    100%{transform:translateY(105vh) rotate(360deg);opacity:0;}
  }

  section{padding:3.8rem 0;}
  .section-head{text-align:center;max-width:680px;margin:0 auto 2.5rem;}
  .kicker{color:var(--coral);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:block;}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem);margin-bottom:0.6rem;}
  .section-head p{margin-bottom:0;}

  .plan-tabs{display:flex;justify-content:center;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}
  .plan-tab{
    font-weight:700;font-size:0.88rem;border-radius:100px;padding:0.55rem 1.2rem;
    border:2px solid #E2DEF5;background:transparent;color:var(--ink-soft);cursor:pointer;
    transition:all 0.2s ease;
  }
  .plan-tab.active,.plan-tab:hover{border-color:var(--primary);color:var(--primary);background:#fff;}
  .plans-grid{display:none;}
  .plans-grid.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;}
  .plan-loading,.plans-grid .empty{
    grid-column:1/-1;
    text-align:center;
    padding:1.4rem;
    color:var(--ink-soft);
    font-weight:600;
  }
  .plan-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:0.55rem;
    margin-bottom:0.35rem;
  }
  .plan-card-top .plan-data{margin-bottom:0;}
  .plan-card-days{
    display:flex;
    justify-content:center;
    margin:0.35rem 0 0.7rem;
  }
  .plan-net{
    display:inline-flex;
    align-items:center;
    gap:0.28rem;
    flex-shrink:0;
    padding:0.22rem 0.5rem;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:800;
    letter-spacing:0.02em;
    line-height:1;
    background:rgba(91,79,232,0.1);
    color:var(--primary);
  }
  .plan-net-5g{
    background:rgba(34,197,94,0.12);
    color:#15803d;
  }
  .plan-net-4g{
    background:rgba(91,79,232,0.1);
    color:var(--violet);
  }
  .plan-net-3g{
    background:rgba(28,22,51,0.08);
    color:var(--ink-soft);
  }
  .plan-net-icon{display:block;}
  .plan-meta .plan-net{vertical-align:middle;}
  .plan-item .plan-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;}
  .plan-card{
    background:var(--card);border-radius:22px;padding:1.45rem 1.35rem;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);position:relative;
    transition:transform 0.25s ease,box-shadow 0.25s ease;
    display:flex;flex-direction:column;
  }
  .plan-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(28,22,51,0.1);}
  .plan-card.featured{border:2px solid var(--primary);box-shadow:0 10px 32px rgba(28,22,51,0.15);}
  .plan-badge{
    position:absolute;top:-11px;right:1.1rem;background:var(--primary);color:#fff;
    font-size:0.7rem;font-weight:700;padding:0.25rem 0.7rem;border-radius:100px;letter-spacing:0.03em;
  }
  .plan-data{font-family:'Baloo 2',sans-serif;font-size:1.65rem;font-weight:800;line-height:1.1;margin-bottom:0.65rem;}
  .plan-days{
    display:inline-flex;align-items:baseline;gap:0.35rem;
    font-family:'Baloo 2',sans-serif;font-size:1.05rem;font-weight:800;color:var(--primary);
    background:linear-gradient(135deg,#EDE9FF 0%,#F3F0FF 100%);
    border:1.5px solid rgba(91,79,232,0.22);
    border-radius:12px;padding:0.4rem 0.75rem;margin-bottom:1rem;line-height:1.1;
    width:fit-content;
  }
  .plan-days .days-num{
    font-size:1.45rem;font-weight:800;color:var(--primary-dark);letter-spacing:-0.02em;
  }
  .plan-days .days-label{font-size:0.92rem;font-weight:700;color:var(--primary);}
  .plan-card.featured .plan-days{
    background:linear-gradient(135deg,var(--violet) 0%,var(--violet-soft) 100%);
    border-color:transparent;color:#fff;
  }
  .plan-card.featured .plan-days .days-num,
  .plan-card.featured .plan-days .days-label{color:#fff;}
  .plan-price{font-size:1.55rem;font-weight:800;color:var(--ink);margin-bottom:0.15rem;}
  .plan-price span{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}
  .plan-meta{font-size:0.8rem;color:var(--ink-soft);margin-bottom:1.15rem;flex-grow:1;}
  .plan-card .btn-pill{width:100%;text-align:center;padding:0.65rem 1rem;}

  .network-strip{
    background:linear-gradient(135deg,#1C1633 0%,#2A2250 100%);
    border-radius:28px;padding:2rem 1.8rem;color:#fff;margin-top:2.5rem;
  }
  .network-strip h3{color:#fff;font-size:1.25rem;margin-bottom:0.4rem;}
  .network-strip p{color:rgba(255,255,255,0.72);margin-bottom:1.2rem;font-size:0.95rem;}
  .network-pills{display:flex;flex-wrap:wrap;gap:0.55rem;}
  .network-pill{
    background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);
    border-radius:100px;padding:0.45rem 0.95rem;font-size:0.82rem;font-weight:600;color:#fff;
  }
  .network-pill strong{color:var(--yellow);font-weight:700;}

  .why-item{padding:0.3rem 0 0.3rem 0;}
  .why-item h3{font-size:1.2rem;margin-bottom:0.4rem;}
  .why-item p{margin-bottom:0;font-size:0.95rem;}
  .why-num{
    width:42px;height:42px;border-radius:14px;background:#EDE9FF;color:var(--primary);
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.1rem;
    display:inline-flex;align-items:center;justify-content:center;margin-bottom:0.85rem;
  }

  .compare-wrap{overflow-x:auto;border-radius:22px;box-shadow:0 6px 24px rgba(28,22,51,0.05);background:#fff;}
  .compare-table{width:100%;border-collapse:collapse;min-width:640px;margin:0;}
  .compare-table th,.compare-table td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid #F0EDF8;font-size:0.92rem;}
  .compare-table th{background:#F8F7FD;font-weight:700;color:var(--ink);font-size:0.85rem;}
  .compare-table th.highlight{background:var(--primary);color:#fff;}
  .compare-table td.highlight{background:rgba(91,79,232,0.04);font-weight:600;}
  .compare-table tr:last-child td{border-bottom:none;}
  .yes{color:var(--teal);font-weight:700;}
  .no{color:#C4BED8;font-weight:600;}

  .data-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
  .data-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .data-card h3{font-size:1.05rem;margin-bottom:0.35rem;}
  .data-card .rec{display:inline-block;margin-top:0.7rem;font-size:0.82rem;font-weight:700;color:var(--primary);background:#EDE9FF;padding:0.3rem 0.7rem;border-radius:100px;}

  .city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
  .city-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .city-card h3{font-size:1.1rem;margin-bottom:0.4rem;display:flex;align-items:center;gap:0.5rem;}
  .city-card h3 img{border-radius:3px;}
  .city-card p{margin:0;font-size:0.92rem;}

  .steps{counter-reset:step;}
  .step-item{display:flex;gap:1.2rem;margin-bottom:1.6rem;align-items:flex-start;}
  .step-item:last-child{margin-bottom:0;}
  .step-num{
    width:48px;height:48px;border-radius:16px;background:var(--primary);color:#fff;
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.2rem;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .step-body h3{font-size:1.15rem;margin-bottom:0.3rem;}
  .step-body p{margin:0;font-size:0.95rem;}

  .faq-section .accordion-item{background:#fff;border:none;border-radius:18px!important;margin-bottom:0.7rem;box-shadow:0 4px 18px rgba(28,22,51,0.04);overflow:hidden;}
  .faq-section .accordion-button{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);background:#fff;box-shadow:none!important;padding:1.15rem 1.3rem;}
  .faq-section .accordion-button:not(.collapsed){color:var(--primary);background:#fff;}
  .faq-section .accordion-button::after{background-size:1rem;}
  .faq-section .accordion-body{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:0.95rem;}

  .cta-band{
    background:linear-gradient(135deg,var(--primary) 0%,var(--violet) 50%,var(--coral) 160%);
    border-radius:32px;padding:2.8rem 2rem;text-align:center;color:#fff;
  }
  .cta-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:0.6rem;}
  .cta-band p{color:rgba(255,255,255,0.88);max-width:48ch;margin:0 auto 1.5rem;}
  .cta-band .btn-pill{background:#fff;color:var(--primary);}
  .cta-band .btn-pill:hover{background:#F4F2FF;color:var(--primary-dark);box-shadow:0 10px 24px rgba(0,0,0,0.15);}
  .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.4);}
  .cta-band .btn-ghost:hover{border-color:#fff;color:#fff;}
  .cta-actions{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;}

  .seo-copy{max-width:760px;margin:0 auto;}
  .seo-copy h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:0.8rem;}
  .seo-copy h3{font-size:1.2rem;margin:1.6rem 0 0.5rem;}
  .seo-copy p{margin-bottom:1rem;}
  .seo-copy ul{color:var(--ink-soft);padding-left:1.2rem;margin-bottom:1rem;}
  .seo-copy li{margin-bottom:0.4rem;}

  footer{background:#1C1633;color:#fff;margin-top:2rem;padding-top:0;}
  .footer-top{padding:4rem 0 3rem;}
  .footer-brand p{color:rgba(255,255,255,0.65);font-size:0.92rem;max-width:32ch;margin:0.9rem 0 1.4rem;}
  .footer-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.4rem;color:#fff!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:0.5rem;}
  .footer-stats{display:flex;gap:1.4rem;margin-bottom:1.4rem;}
  .footer-stat{display:flex;flex-direction:column;}
  .footer-stat strong{font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800;}
  .footer-stat span{font-size:0.75rem;color:rgba(255,255,255,0.55);font-weight:500;}
  .footer-social{display:flex;gap:0.6rem;}
  .footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background 0.2s;}
  .footer-social a:hover{background:rgba(255,255,255,0.16);}
  .footer-col-title{font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem;color:rgba(255,255,255,0.45);}
  .footer-links{list-style:none;padding:0;margin:0;}
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{color:#fff;text-decoration:none!important;font-size:0.88rem;font-weight:500;transition:opacity 0.2s ease;}
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{list-style:none;padding:0;margin:0;}
  .footer-contact li{display:flex;align-items:flex-start;gap:0.55rem;margin-bottom:0.75rem;font-size:0.88rem;color:rgba(255,255,255,0.75);}
  .footer-contact a{color:#fff;text-decoration:none;}
  .footer-trust{border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);padding:1.1rem 0;}
  .footer-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.5rem;}
  .footer-trust-item{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.7);}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.4rem 0;font-size:0.8rem;color:rgba(255,255,255,0.45);}
  .foot-legal{display:flex;flex-wrap:wrap;gap:1.2rem;}
  .foot-legal a{color:rgba(255,255,255,0.45);text-decoration:none;}
  .foot-legal a:hover{color:#fff;}

  @media (max-width:991px){
    .page-hero{padding-bottom:1.5rem;}
    .hero-visual{margin-top:1.5rem;}
  }
  @media (max-width:575px){
    section{padding:2.8rem 0;}
    .network-strip{padding:1.5rem 1.2rem;}
    .cta-band{padding:2.2rem 1.3rem;border-radius:24px;}
  }

  .vn-hero-art{
    position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;
    animation:hero-float 6s ease-in-out infinite;
  }
  .vn-glow{
    position:absolute;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,205,0,0.35) 0%,rgba(218,37,29,0.12) 45%,transparent 70%);
    z-index:0;
  }
  .vn-phone{
    position:relative;z-index:2;width:190px;height:360px;border-radius:32px;
    background:linear-gradient(160deg,#1C1633 0%,#2A2250 100%);
    box-shadow:0 30px 60px rgba(28,22,51,0.28), inset 0 0 0 2px rgba(255,255,255,0.08);
    padding:12px;
  }
  .vn-phone-notch{width:70px;height:8px;background:#0f0a1a;border-radius:8px;margin:6px auto 10px;}
  .vn-phone-screen{
    height:calc(100% - 24px);border-radius:24px;background:linear-gradient(180deg,#FFF8F0 0%,#FFEDE3 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.7rem;padding:1rem;
  }
  .vn-signal{font-size:0.78rem;font-weight:800;color:var(--primary);letter-spacing:0.04em;}
  .vn-qr{
    width:88px;height:88px;border-radius:12px;
    background:
      linear-gradient(#1C1633 0 0) 0 0/28% 28%,
      linear-gradient(#1C1633 0 0) 100% 0/28% 28%,
      linear-gradient(#1C1633 0 0) 0 100%/28% 28%,
      linear-gradient(#1C1633 0 0) 36% 36%/12% 12%,
      linear-gradient(#1C1633 0 0) 56% 48%/8% 8%,
      linear-gradient(#1C1633 0 0) 44% 64%/10% 10%,
      #fff;
    background-repeat:no-repeat;border:2px solid #E2DEF5;
    box-shadow:0 8px 20px rgba(28,22,51,0.1);
  }
  .vn-ok{
    font-size:0.78rem;font-weight:800;color:#fff;background:var(--teal);
    padding:0.35rem 0.75rem;border-radius:100px;
  }
  .vn-float{
    position:absolute;z-index:3;background:#fff;border-radius:14px;padding:0.55rem 0.85rem;
    font-size:0.82rem;font-weight:700;color:var(--ink);
    box-shadow:0 10px 28px rgba(28,22,51,0.12);
    display:inline-flex;align-items:center;gap:0.4rem;
    animation:vn-bob 4.5s ease-in-out infinite;
  }
  .vn-float.f1{top:12%;left:4%;}
  .vn-float.f2{top:28%;right:2%;animation-delay:-1.5s;}
  .vn-float.f3{bottom:18%;left:8%;animation-delay:-2.8s;}
  @keyframes vn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @media (max-width:991px){
    .vn-hero-art{min-height:300px;margin-top:1rem;}
    .vn-phone{width:160px;height:300px;}
  }

/* ===== from esim-vietnam.html ===== */
:root{
    --bg:#F6F5FC;--bg-hero-a:#EFE9FF;--bg-hero-b:#FFEDE3;
    --ink:#1C1633;--ink-soft:#5B5578;--primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;--primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;--yellow:#FFC93C;--teal:#2EC4B6;--card:#FFFFFF;
    --vn-red:#DA251D;--vn-gold:#FFCD00;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-0.01em;}
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}
  a.inline{color:var(--primary);font-weight:600;text-decoration:none;}
  a.inline:hover{text-decoration:underline;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{background:#fff;backdrop-filter:none;padding-top:1.1rem;padding-bottom:1.1rem;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(28,22,51,0.06);}
  .navbar-brand{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:0.55rem;color:var(--ink)!important;text-decoration:none!important;}
  .nav-link.custom{font-weight:600;font-size:0.95rem;color:var(--ink)!important;padding:0.5rem 1rem!important;text-decoration:none!important;}
  .btn-pill{font-weight:700;font-size:0.92rem;line-height:1.15;border-radius:100px;padding:0.65rem 1.5rem;background:var(--primary);color:#fff;border:none;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;cursor:pointer;}
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{color:#fff;text-decoration:none!important;}
  .btn-pill:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{font-weight:700;font-size:0.92rem;border-radius:100px;padding:0.7rem 1.5rem;background:transparent;color:var(--ink);border:2px solid #E2DEF5;transition:border-color 0.2s ease,transform 0.2s ease;display:inline-block;text-decoration:none!important;}
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}

  .page-hero{
    position:relative;padding:3.2rem 0 0;
    background:
      radial-gradient(ellipse 70% 55% at 85% 20%, rgba(218,37,29,0.12) 0%, transparent 55%),
      radial-gradient(ellipse 40% 40% at 70% 30%, rgba(255,205,0,0.18) 0%, transparent 50%),
      radial-gradient(ellipse 50% 45% at 10% 80%, rgba(28,22,51,0.12) 0%, transparent 50%),
      linear-gradient(155deg,var(--bg-hero-a) 0%,var(--bg) 50%,var(--bg-hero-b) 100%);
    border-radius:0 0 48px 48px;overflow:hidden;
  }
  .cloud{position:absolute;background:#fff;border-radius:50%;opacity:0.55;filter:blur(0.5px);pointer-events:none;}
  .breadcrumb-nav{display:flex;flex-wrap:wrap;gap:0.35rem 0.5rem;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.1rem;position:relative;z-index:2;}
  .breadcrumb-nav a{color:var(--ink-soft);text-decoration:none;}
  .breadcrumb-nav a:hover{color:var(--primary);}
  .breadcrumb-nav span[aria-hidden]{opacity:0.5;}
  .eyebrow-chip{display:inline-flex;align-items:center;gap:0.55rem;margin-bottom:1rem;font-size:0.88rem;font-weight:600;color:var(--ink-soft);position:relative;z-index:2;}
  .eyebrow-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--vn-red);flex-shrink:0;}
  .page-hero h1{font-size:clamp(2.15rem,5vw,3.55rem);line-height:1.05;margin-bottom:0.85rem;position:relative;z-index:2;}
  .page-hero h1 .brand{display:block;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;color:var(--primary);letter-spacing:0.02em;margin-bottom:0.35rem;}
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{font-size:1.08rem;max-width:48ch;margin-bottom:1.5rem;position:relative;z-index:2;}
  .hero-ctas{display:flex;gap:0.9rem;flex-wrap:wrap;position:relative;z-index:2;margin-bottom:1.6rem;}
  .hero-trust{display:flex;flex-wrap:wrap;gap:0.7rem 1.2rem;position:relative;z-index:2;font-size:0.86rem;font-weight:600;color:var(--ink-soft);}
  .hero-trust span{display:inline-flex;align-items:center;gap:0.4rem;}
  .hero-trust svg{flex-shrink:0;}
  .hero-visual{position:relative;z-index:2;margin-top:0.5rem;}
  .hero-visual img{
    width:100%;height:auto;display:block;
    animation:hero-float 6s ease-in-out infinite;
  }
  @keyframes hero-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  .lantern-dot{
    position:absolute;width:10px;height:10px;border-radius:70% 10% 70% 10%;
    background:rgba(218,37,29,0.35);pointer-events:none;z-index:1;
    border-radius:50%;
    animation:petal-fall linear infinite;
  }
  .lantern-dot:nth-child(1){left:12%;top:-5%;animation-duration:11s;}
  .lantern-dot:nth-child(2){left:28%;top:-8%;animation-duration:14s;animation-delay:-3s;width:8px;height:8px;}
  .lantern-dot:nth-child(3){left:55%;top:-6%;animation-duration:12s;animation-delay:-6s;}
  .lantern-dot:nth-child(4){left:72%;top:-10%;animation-duration:15s;animation-delay:-2s;width:7px;height:7px;}
  .lantern-dot:nth-child(5){left:88%;top:-4%;animation-duration:13s;animation-delay:-8s;}
  @keyframes petal-fall{
    0%{transform:translateY(0) rotate(0deg);opacity:0;}
    10%{opacity:0.8;}
    90%{opacity:0.55;}
    100%{transform:translateY(105vh) rotate(360deg);opacity:0;}
  }

  section{padding:3.8rem 0;}
  .section-head{text-align:center;max-width:680px;margin:0 auto 2.5rem;}
  .kicker{color:var(--coral);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:block;}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem);margin-bottom:0.6rem;}
  .section-head p{margin-bottom:0;}

  .plan-tabs{display:flex;justify-content:center;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}
  .plan-tab{
    font-weight:700;font-size:0.88rem;border-radius:100px;padding:0.55rem 1.2rem;
    border:2px solid #E2DEF5;background:transparent;color:var(--ink-soft);cursor:pointer;
    transition:all 0.2s ease;
  }
  .plan-tab.active,.plan-tab:hover{border-color:var(--primary);color:var(--primary);background:#fff;}
  .plans-grid{display:none;}
  .plans-grid.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;}
  .plan-loading,.plans-grid .empty{
    grid-column:1/-1;
    text-align:center;
    padding:1.4rem;
    color:var(--ink-soft);
    font-weight:600;
  }
  .plan-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:0.55rem;
    margin-bottom:0.35rem;
  }
  .plan-card-top .plan-data{margin-bottom:0;}
  .plan-card-days{
    display:flex;
    justify-content:center;
    margin:0.35rem 0 0.7rem;
  }
  .plan-net{
    display:inline-flex;
    align-items:center;
    gap:0.28rem;
    flex-shrink:0;
    padding:0.22rem 0.5rem;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:800;
    letter-spacing:0.02em;
    line-height:1;
    background:rgba(91,79,232,0.1);
    color:var(--primary);
  }
  .plan-net-5g{
    background:rgba(34,197,94,0.12);
    color:#15803d;
  }
  .plan-net-4g{
    background:rgba(91,79,232,0.1);
    color:var(--violet);
  }
  .plan-net-3g{
    background:rgba(28,22,51,0.08);
    color:var(--ink-soft);
  }
  .plan-net-icon{display:block;}
  .plan-meta .plan-net{vertical-align:middle;}
  .plan-item .plan-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;}
  .plan-card{
    background:var(--card);border-radius:22px;padding:1.45rem 1.35rem;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);position:relative;
    transition:transform 0.25s ease,box-shadow 0.25s ease;
    display:flex;flex-direction:column;
  }
  .plan-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(28,22,51,0.1);}
  .plan-card.featured{border:2px solid var(--primary);box-shadow:0 10px 32px rgba(28,22,51,0.15);}
  .plan-badge{
    position:absolute;top:-11px;right:1.1rem;background:var(--primary);color:#fff;
    font-size:0.7rem;font-weight:700;padding:0.25rem 0.7rem;border-radius:100px;letter-spacing:0.03em;
  }
  .plan-data{font-family:'Baloo 2',sans-serif;font-size:1.65rem;font-weight:800;line-height:1.1;margin-bottom:0.65rem;}
  .plan-days{
    display:inline-flex;align-items:baseline;gap:0.35rem;
    font-family:'Baloo 2',sans-serif;font-size:1.05rem;font-weight:800;color:var(--primary);
    background:linear-gradient(135deg,#EDE9FF 0%,#F3F0FF 100%);
    border:1.5px solid rgba(91,79,232,0.22);
    border-radius:12px;padding:0.4rem 0.75rem;margin-bottom:1rem;line-height:1.1;
    width:fit-content;
  }
  .plan-days .days-num{
    font-size:1.45rem;font-weight:800;color:var(--primary-dark);letter-spacing:-0.02em;
  }
  .plan-days .days-label{font-size:0.92rem;font-weight:700;color:var(--primary);}
  .plan-card.featured .plan-days{
    background:linear-gradient(135deg,var(--violet) 0%,var(--violet-soft) 100%);
    border-color:transparent;color:#fff;
  }
  .plan-card.featured .plan-days .days-num,
  .plan-card.featured .plan-days .days-label{color:#fff;}
  .plan-price{font-size:1.55rem;font-weight:800;color:var(--ink);margin-bottom:0.15rem;}
  .plan-price span{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}
  .plan-meta{font-size:0.8rem;color:var(--ink-soft);margin-bottom:1.15rem;flex-grow:1;}
  .plan-card .btn-pill{width:100%;text-align:center;padding:0.65rem 1rem;}

  .network-strip{
    background:linear-gradient(135deg,#1C1633 0%,#2A2250 100%);
    border-radius:28px;padding:2rem 1.8rem;color:#fff;margin-top:2.5rem;
  }
  .network-strip h3{color:#fff;font-size:1.25rem;margin-bottom:0.4rem;}
  .network-strip p{color:rgba(255,255,255,0.72);margin-bottom:1.2rem;font-size:0.95rem;}
  .network-pills{display:flex;flex-wrap:wrap;gap:0.55rem;}
  .network-pill{
    background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);
    border-radius:100px;padding:0.45rem 0.95rem;font-size:0.82rem;font-weight:600;color:#fff;
  }
  .network-pill strong{color:var(--yellow);font-weight:700;}

  .why-item{padding:0.3rem 0 0.3rem 0;}
  .why-item h3{font-size:1.2rem;margin-bottom:0.4rem;}
  .why-item p{margin-bottom:0;font-size:0.95rem;}
  .why-num{
    width:42px;height:42px;border-radius:14px;background:#EDE9FF;color:var(--primary);
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.1rem;
    display:inline-flex;align-items:center;justify-content:center;margin-bottom:0.85rem;
  }

  .compare-wrap{overflow-x:auto;border-radius:22px;box-shadow:0 6px 24px rgba(28,22,51,0.05);background:#fff;}
  .compare-table{width:100%;border-collapse:collapse;min-width:640px;margin:0;}
  .compare-table th,.compare-table td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid #F0EDF8;font-size:0.92rem;}
  .compare-table th{background:#F8F7FD;font-weight:700;color:var(--ink);font-size:0.85rem;}
  .compare-table th.highlight{background:var(--primary);color:#fff;}
  .compare-table td.highlight{background:rgba(91,79,232,0.04);font-weight:600;}
  .compare-table tr:last-child td{border-bottom:none;}
  .yes{color:var(--teal);font-weight:700;}
  .no{color:#C4BED8;font-weight:600;}

  .data-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
  .data-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .data-card h3{font-size:1.05rem;margin-bottom:0.35rem;}
  .data-card .rec{display:inline-block;margin-top:0.7rem;font-size:0.82rem;font-weight:700;color:var(--primary);background:#EDE9FF;padding:0.3rem 0.7rem;border-radius:100px;}

  .city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
  .city-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .city-card h3{font-size:1.1rem;margin-bottom:0.4rem;display:flex;align-items:center;gap:0.5rem;}
  .city-card h3 img{border-radius:3px;}
  .city-card p{margin:0;font-size:0.92rem;}

  .steps{counter-reset:step;}
  .step-item{display:flex;gap:1.2rem;margin-bottom:1.6rem;align-items:flex-start;}
  .step-item:last-child{margin-bottom:0;}
  .step-num{
    width:48px;height:48px;border-radius:16px;background:var(--primary);color:#fff;
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.2rem;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .step-body h3{font-size:1.15rem;margin-bottom:0.3rem;}
  .step-body p{margin:0;font-size:0.95rem;}

  .faq-section .accordion-item{background:#fff;border:none;border-radius:18px!important;margin-bottom:0.7rem;box-shadow:0 4px 18px rgba(28,22,51,0.04);overflow:hidden;}
  .faq-section .accordion-button{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);background:#fff;box-shadow:none!important;padding:1.15rem 1.3rem;}
  .faq-section .accordion-button:not(.collapsed){color:var(--primary);background:#fff;}
  .faq-section .accordion-button::after{background-size:1rem;}
  .faq-section .accordion-body{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:0.95rem;}

  .cta-band{
    background:linear-gradient(135deg,var(--primary) 0%,var(--violet) 50%,var(--coral) 160%);
    border-radius:32px;padding:2.8rem 2rem;text-align:center;color:#fff;
  }
  .cta-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:0.6rem;}
  .cta-band p{color:rgba(255,255,255,0.88);max-width:48ch;margin:0 auto 1.5rem;}
  .cta-band .btn-pill{background:#fff;color:var(--primary);}
  .cta-band .btn-pill:hover{background:#F4F2FF;color:var(--primary-dark);box-shadow:0 10px 24px rgba(0,0,0,0.15);}
  .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.4);}
  .cta-band .btn-ghost:hover{border-color:#fff;color:#fff;}
  .cta-actions{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;}

  .seo-copy{max-width:760px;margin:0 auto;}
  .seo-copy h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:0.8rem;}
  .seo-copy h3{font-size:1.2rem;margin:1.6rem 0 0.5rem;}
  .seo-copy p{margin-bottom:1rem;}
  .seo-copy ul{color:var(--ink-soft);padding-left:1.2rem;margin-bottom:1rem;}
  .seo-copy li{margin-bottom:0.4rem;}

  footer{background:#1C1633;color:#fff;margin-top:2rem;padding-top:0;}
  .footer-top{padding:4rem 0 3rem;}
  .footer-brand p{color:rgba(255,255,255,0.65);font-size:0.92rem;max-width:32ch;margin:0.9rem 0 1.4rem;}
  .footer-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.4rem;color:#fff!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:0.5rem;}
  .footer-stats{display:flex;gap:1.4rem;margin-bottom:1.4rem;}
  .footer-stat{display:flex;flex-direction:column;}
  .footer-stat strong{font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800;}
  .footer-stat span{font-size:0.75rem;color:rgba(255,255,255,0.55);font-weight:500;}
  .footer-social{display:flex;gap:0.6rem;}
  .footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background 0.2s;}
  .footer-social a:hover{background:rgba(255,255,255,0.16);}
  .footer-col-title{font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem;color:rgba(255,255,255,0.45);}
  .footer-links{list-style:none;padding:0;margin:0;}
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{color:#fff;text-decoration:none!important;font-size:0.88rem;font-weight:500;transition:opacity 0.2s ease;}
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{list-style:none;padding:0;margin:0;}
  .footer-contact li{display:flex;align-items:flex-start;gap:0.55rem;margin-bottom:0.75rem;font-size:0.88rem;color:rgba(255,255,255,0.75);}
  .footer-contact a{color:#fff;text-decoration:none;}
  .footer-trust{border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);padding:1.1rem 0;}
  .footer-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.5rem;}
  .footer-trust-item{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.7);}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.4rem 0;font-size:0.8rem;color:rgba(255,255,255,0.45);}
  .foot-legal{display:flex;flex-wrap:wrap;gap:1.2rem;}
  .foot-legal a{color:rgba(255,255,255,0.45);text-decoration:none;}
  .foot-legal a:hover{color:#fff;}

  @media (max-width:991px){
    .page-hero{padding-bottom:1.5rem;}
    .hero-visual{margin-top:1.5rem;}
  }
  @media (max-width:575px){
    section{padding:2.8rem 0;}
    .network-strip{padding:1.5rem 1.2rem;}
    .cta-band{padding:2.2rem 1.3rem;border-radius:24px;}
  }

  .vn-hero-art{
    position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;
    animation:hero-float 6s ease-in-out infinite;
  }
  .vn-glow{
    position:absolute;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,205,0,0.35) 0%,rgba(218,37,29,0.12) 45%,transparent 70%);
    z-index:0;
  }
  .vn-phone{
    position:relative;z-index:2;width:190px;height:360px;border-radius:32px;
    background:linear-gradient(160deg,#1C1633 0%,#2A2250 100%);
    box-shadow:0 30px 60px rgba(28,22,51,0.28), inset 0 0 0 2px rgba(255,255,255,0.08);
    padding:12px;
  }
  .vn-phone-notch{width:70px;height:8px;background:#0f0a1a;border-radius:8px;margin:6px auto 10px;}
  .vn-phone-screen{
    height:calc(100% - 24px);border-radius:24px;background:linear-gradient(180deg,#FFF8F0 0%,#FFEDE3 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.7rem;padding:1rem;
  }
  .vn-signal{font-size:0.78rem;font-weight:800;color:var(--vn-red);letter-spacing:0.04em;}
  .vn-qr{
    width:88px;height:88px;border-radius:12px;
    background:
      linear-gradient(#1C1633 0 0) 0 0/28% 28%,
      linear-gradient(#1C1633 0 0) 100% 0/28% 28%,
      linear-gradient(#1C1633 0 0) 0 100%/28% 28%,
      linear-gradient(#1C1633 0 0) 36% 36%/12% 12%,
      linear-gradient(#1C1633 0 0) 56% 48%/8% 8%,
      linear-gradient(#1C1633 0 0) 44% 64%/10% 10%,
      #fff;
    background-repeat:no-repeat;border:2px solid #E2DEF5;
    box-shadow:0 8px 20px rgba(28,22,51,0.1);
  }
  .vn-ok{
    font-size:0.78rem;font-weight:800;color:#fff;background:var(--teal);
    padding:0.35rem 0.75rem;border-radius:100px;
  }
  .vn-float{
    position:absolute;z-index:3;background:#fff;border-radius:14px;padding:0.55rem 0.85rem;
    font-size:0.82rem;font-weight:700;color:var(--ink);
    box-shadow:0 10px 28px rgba(28,22,51,0.12);
    display:inline-flex;align-items:center;gap:0.4rem;
    animation:vn-bob 4.5s ease-in-out infinite;
  }
  .vn-float.f1{top:12%;left:4%;}
  .vn-float.f2{top:28%;right:2%;animation-delay:-1.5s;}
  .vn-float.f3{bottom:18%;left:8%;animation-delay:-2.8s;}
  @keyframes vn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @media (max-width:991px){
    .vn-hero-art{min-height:300px;margin-top:1rem;}
    .vn-phone{width:160px;height:300px;}
  }

/* ===== from esim-turquie.html ===== */
:root{
    --bg:#F6F5FC;--bg-hero-a:#EFE9FF;--bg-hero-b:#FFEDE3;
    --ink:#1C1633;--ink-soft:#5B5578;--primary:#1C1633;--violet:#5B4FE8;--violet-soft:#8F85F5;--primary-dark:#0F0C1C;--violet-dark:#4238C4;
    --coral:#FF6B4A;--yellow:#FFC93C;--teal:#2EC4B6;--card:#FFFFFF;
    --tr-red:#E30A17;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-0.01em;}
  .container-xl{max-width:1180px;}
  p{color:var(--ink-soft);}
  a.inline{color:var(--primary);font-weight:600;text-decoration:none;}
  a.inline:hover{text-decoration:underline;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-delay-1.in-view{transition-delay:0.08s;}
  .reveal-delay-2.in-view{transition-delay:0.16s;}
  .reveal-delay-3.in-view{transition-delay:0.24s;}

  .navbar{background:#fff;backdrop-filter:none;padding-top:1.1rem;padding-bottom:1.1rem;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(28,22,51,0.06);}
  .navbar-brand{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;display:flex;align-items:center;gap:0.55rem;color:var(--ink)!important;text-decoration:none!important;}
  .nav-link.custom{font-weight:600;font-size:0.95rem;color:var(--ink)!important;padding:0.5rem 1rem!important;text-decoration:none!important;}
  .btn-pill{font-weight:700;font-size:0.92rem;line-height:1.15;border-radius:100px;padding:0.65rem 1.5rem;background:var(--primary);color:#fff;border:none;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;cursor:pointer;}
  .btn-pill:hover,.btn-pill:focus,.btn-pill:active,.btn-pill:visited{color:#fff;text-decoration:none!important;}
  .btn-pill:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-pill.coral{background:#1C1633;}
  .btn-pill.coral:hover{background:#0F0C1C;box-shadow:0 10px 24px rgba(28,22,51,0.35);}
  .btn-ghost{font-weight:700;font-size:0.92rem;border-radius:100px;padding:0.7rem 1.5rem;background:transparent;color:var(--ink);border:2px solid #E2DEF5;transition:border-color 0.2s ease,transform 0.2s ease;display:inline-block;text-decoration:none!important;}
  .btn-ghost:hover{border-color:var(--primary);transform:translateY(-2px);color:var(--ink);}

  .page-hero{
    position:relative;padding:3.2rem 0 0;
    background:
      radial-gradient(ellipse 70% 55% at 85% 20%, rgba(218,37,29,0.12) 0%, transparent 55%),
      radial-gradient(ellipse 40% 40% at 70% 30%, rgba(255,205,0,0.18) 0%, transparent 50%),
      radial-gradient(ellipse 50% 45% at 10% 80%, rgba(28,22,51,0.12) 0%, transparent 50%),
      linear-gradient(155deg,var(--bg-hero-a) 0%,var(--bg) 50%,var(--bg-hero-b) 100%);
    border-radius:0 0 48px 48px;overflow:hidden;
  }
  .cloud{position:absolute;background:#fff;border-radius:50%;opacity:0.55;filter:blur(0.5px);pointer-events:none;}
  .breadcrumb-nav{display:flex;flex-wrap:wrap;gap:0.35rem 0.5rem;font-size:0.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.1rem;position:relative;z-index:2;}
  .breadcrumb-nav a{color:var(--ink-soft);text-decoration:none;}
  .breadcrumb-nav a:hover{color:var(--primary);}
  .breadcrumb-nav span[aria-hidden]{opacity:0.5;}
  .eyebrow-chip{display:inline-flex;align-items:center;gap:0.55rem;margin-bottom:1rem;font-size:0.88rem;font-weight:600;color:var(--ink-soft);position:relative;z-index:2;}
  .eyebrow-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0;}
  .page-hero h1{font-size:clamp(2.15rem,5vw,3.55rem);line-height:1.05;margin-bottom:0.85rem;position:relative;z-index:2;}
  .page-hero h1 .brand{display:block;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;color:var(--primary);letter-spacing:0.02em;margin-bottom:0.35rem;}
  .page-hero h1 .swoosh{color:var(--violet);}
  .hero-sub{font-size:1.08rem;max-width:48ch;margin-bottom:1.5rem;position:relative;z-index:2;}
  .hero-ctas{display:flex;gap:0.9rem;flex-wrap:wrap;position:relative;z-index:2;margin-bottom:1.6rem;}
  .hero-trust{display:flex;flex-wrap:wrap;gap:0.7rem 1.2rem;position:relative;z-index:2;font-size:0.86rem;font-weight:600;color:var(--ink-soft);}
  .hero-trust span{display:inline-flex;align-items:center;gap:0.4rem;}
  .hero-trust svg{flex-shrink:0;}
  .hero-visual{position:relative;z-index:2;margin-top:0.5rem;}
  .hero-visual img{
    width:100%;height:auto;display:block;
    animation:hero-float 6s ease-in-out infinite;
  }
  @keyframes hero-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  .lantern-dot{
    position:absolute;width:10px;height:10px;border-radius:70% 10% 70% 10%;
    background:rgba(218,37,29,0.35);pointer-events:none;z-index:1;
    border-radius:50%;
    animation:petal-fall linear infinite;
  }
  .lantern-dot:nth-child(1){left:12%;top:-5%;animation-duration:11s;}
  .lantern-dot:nth-child(2){left:28%;top:-8%;animation-duration:14s;animation-delay:-3s;width:8px;height:8px;}
  .lantern-dot:nth-child(3){left:55%;top:-6%;animation-duration:12s;animation-delay:-6s;}
  .lantern-dot:nth-child(4){left:72%;top:-10%;animation-duration:15s;animation-delay:-2s;width:7px;height:7px;}
  .lantern-dot:nth-child(5){left:88%;top:-4%;animation-duration:13s;animation-delay:-8s;}
  @keyframes petal-fall{
    0%{transform:translateY(0) rotate(0deg);opacity:0;}
    10%{opacity:0.8;}
    90%{opacity:0.55;}
    100%{transform:translateY(105vh) rotate(360deg);opacity:0;}
  }

  section{padding:3.8rem 0;}
  .section-head{text-align:center;max-width:680px;margin:0 auto 2.5rem;}
  .kicker{color:var(--coral);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:block;}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.35rem);margin-bottom:0.6rem;}
  .section-head p{margin-bottom:0;}

  .plan-tabs{display:flex;justify-content:center;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}
  .plan-tab{
    font-weight:700;font-size:0.88rem;border-radius:100px;padding:0.55rem 1.2rem;
    border:2px solid #E2DEF5;background:transparent;color:var(--ink-soft);cursor:pointer;
    transition:all 0.2s ease;
  }
  .plan-tab.active,.plan-tab:hover{border-color:var(--primary);color:var(--primary);background:#fff;}
  .plans-grid{display:none;}
  .plans-grid.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;}
  .plan-loading,.plans-grid .empty{
    grid-column:1/-1;
    text-align:center;
    padding:1.4rem;
    color:var(--ink-soft);
    font-weight:600;
  }
  .plan-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:0.55rem;
    margin-bottom:0.35rem;
  }
  .plan-card-top .plan-data{margin-bottom:0;}
  .plan-card-days{
    display:flex;
    justify-content:center;
    margin:0.35rem 0 0.7rem;
  }
  .plan-net{
    display:inline-flex;
    align-items:center;
    gap:0.28rem;
    flex-shrink:0;
    padding:0.22rem 0.5rem;
    border-radius:999px;
    font-size:0.68rem;
    font-weight:800;
    letter-spacing:0.02em;
    line-height:1;
    background:rgba(91,79,232,0.1);
    color:var(--primary);
  }
  .plan-net-5g{
    background:rgba(34,197,94,0.12);
    color:#15803d;
  }
  .plan-net-4g{
    background:rgba(91,79,232,0.1);
    color:var(--violet);
  }
  .plan-net-3g{
    background:rgba(28,22,51,0.08);
    color:var(--ink-soft);
  }
  .plan-net-icon{display:block;}
  .plan-meta .plan-net{vertical-align:middle;}
  .plan-item .plan-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;}
  .plan-card{
    background:var(--card);border-radius:22px;padding:1.45rem 1.35rem;
    box-shadow:0 6px 24px rgba(28,22,51,0.05);position:relative;
    transition:transform 0.25s ease,box-shadow 0.25s ease;
    display:flex;flex-direction:column;
  }
  .plan-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(28,22,51,0.1);}
  .plan-card.featured{border:2px solid var(--primary);box-shadow:0 10px 32px rgba(28,22,51,0.15);}
  .plan-badge{
    position:absolute;top:-11px;right:1.1rem;background:var(--primary);color:#fff;
    font-size:0.7rem;font-weight:700;padding:0.25rem 0.7rem;border-radius:100px;letter-spacing:0.03em;
  }
  .plan-data{font-family:'Baloo 2',sans-serif;font-size:1.65rem;font-weight:800;line-height:1.1;margin-bottom:0.65rem;}
  .plan-days{
    display:inline-flex;align-items:baseline;gap:0.35rem;
    font-family:'Baloo 2',sans-serif;font-size:1.05rem;font-weight:800;color:var(--primary);
    background:linear-gradient(135deg,#EDE9FF 0%,#F3F0FF 100%);
    border:1.5px solid rgba(91,79,232,0.22);
    border-radius:12px;padding:0.4rem 0.75rem;margin-bottom:1rem;line-height:1.1;
    width:fit-content;
  }
  .plan-days .days-num{
    font-size:1.45rem;font-weight:800;color:var(--primary-dark);letter-spacing:-0.02em;
  }
  .plan-days .days-label{font-size:0.92rem;font-weight:700;color:var(--primary);}
  .plan-card.featured .plan-days{
    background:linear-gradient(135deg,var(--violet) 0%,var(--violet-soft) 100%);
    border-color:transparent;color:#fff;
  }
  .plan-card.featured .plan-days .days-num,
  .plan-card.featured .plan-days .days-label{color:#fff;}
  .plan-price{font-size:1.55rem;font-weight:800;color:var(--ink);margin-bottom:0.15rem;}
  .plan-price span{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}
  .plan-meta{font-size:0.8rem;color:var(--ink-soft);margin-bottom:1.15rem;flex-grow:1;}
  .plan-card .btn-pill{width:100%;text-align:center;padding:0.65rem 1rem;}

  .network-strip{
    background:linear-gradient(135deg,#1C1633 0%,#2A2250 100%);
    border-radius:28px;padding:2rem 1.8rem;color:#fff;margin-top:2.5rem;
  }
  .network-strip h3{color:#fff;font-size:1.25rem;margin-bottom:0.4rem;}
  .network-strip p{color:rgba(255,255,255,0.72);margin-bottom:1.2rem;font-size:0.95rem;}
  .network-pills{display:flex;flex-wrap:wrap;gap:0.55rem;}
  .network-pill{
    background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);
    border-radius:100px;padding:0.45rem 0.95rem;font-size:0.82rem;font-weight:600;color:#fff;
  }
  .network-pill strong{color:var(--yellow);font-weight:700;}

  .why-item{padding:0.3rem 0 0.3rem 0;}
  .why-item h3{font-size:1.2rem;margin-bottom:0.4rem;}
  .why-item p{margin-bottom:0;font-size:0.95rem;}
  .why-num{
    width:42px;height:42px;border-radius:14px;background:#EDE9FF;color:var(--primary);
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.1rem;
    display:inline-flex;align-items:center;justify-content:center;margin-bottom:0.85rem;
  }

  .compare-wrap{overflow-x:auto;border-radius:22px;box-shadow:0 6px 24px rgba(28,22,51,0.05);background:#fff;}
  .compare-table{width:100%;border-collapse:collapse;min-width:640px;margin:0;}
  .compare-table th,.compare-table td{padding:1rem 1.15rem;text-align:left;border-bottom:1px solid #F0EDF8;font-size:0.92rem;}
  .compare-table th{background:#F8F7FD;font-weight:700;color:var(--ink);font-size:0.85rem;}
  .compare-table th.highlight{background:var(--primary);color:#fff;}
  .compare-table td.highlight{background:rgba(91,79,232,0.04);font-weight:600;}
  .compare-table tr:last-child td{border-bottom:none;}
  .yes{color:var(--teal);font-weight:700;}
  .no{color:#C4BED8;font-weight:600;}

  .data-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
  .data-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .data-card h3{font-size:1.05rem;margin-bottom:0.35rem;}
  .data-card .rec{display:inline-block;margin-top:0.7rem;font-size:0.82rem;font-weight:700;color:var(--primary);background:#EDE9FF;padding:0.3rem 0.7rem;border-radius:100px;}

  .city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
  .city-card{background:#fff;border-radius:20px;padding:1.35rem 1.25rem;box-shadow:0 6px 24px rgba(28,22,51,0.05);}
  .city-card h3{font-size:1.1rem;margin-bottom:0.4rem;display:flex;align-items:center;gap:0.5rem;}
  .city-card h3 img{border-radius:3px;}
  .city-card p{margin:0;font-size:0.92rem;}

  .steps{counter-reset:step;}
  .step-item{display:flex;gap:1.2rem;margin-bottom:1.6rem;align-items:flex-start;}
  .step-item:last-child{margin-bottom:0;}
  .step-num{
    width:48px;height:48px;border-radius:16px;background:var(--primary);color:#fff;
    font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.2rem;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .step-body h3{font-size:1.15rem;margin-bottom:0.3rem;}
  .step-body p{margin:0;font-size:0.95rem;}

  .faq-section .accordion-item{background:#fff;border:none;border-radius:18px!important;margin-bottom:0.7rem;box-shadow:0 4px 18px rgba(28,22,51,0.04);overflow:hidden;}
  .faq-section .accordion-button{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);background:#fff;box-shadow:none!important;padding:1.15rem 1.3rem;}
  .faq-section .accordion-button:not(.collapsed){color:var(--primary);background:#fff;}
  .faq-section .accordion-button::after{background-size:1rem;}
  .faq-section .accordion-body{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:0.95rem;}

  .cta-band{
    background:linear-gradient(135deg,var(--primary) 0%,var(--violet) 50%,var(--coral) 160%);
    border-radius:32px;padding:2.8rem 2rem;text-align:center;color:#fff;
  }
  .cta-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:0.6rem;}
  .cta-band p{color:rgba(255,255,255,0.88);max-width:48ch;margin:0 auto 1.5rem;}
  .cta-band .btn-pill{background:#fff;color:var(--primary);}
  .cta-band .btn-pill:hover{background:#F4F2FF;color:var(--primary-dark);box-shadow:0 10px 24px rgba(0,0,0,0.15);}
  .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.4);}
  .cta-band .btn-ghost:hover{border-color:#fff;color:#fff;}
  .cta-actions{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;}

  .seo-copy{max-width:760px;margin:0 auto;}
  .seo-copy h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:0.8rem;}
  .seo-copy h3{font-size:1.2rem;margin:1.6rem 0 0.5rem;}
  .seo-copy p{margin-bottom:1rem;}
  .seo-copy ul{color:var(--ink-soft);padding-left:1.2rem;margin-bottom:1rem;}
  .seo-copy li{margin-bottom:0.4rem;}

  footer{background:#1C1633;color:#fff;margin-top:2rem;padding-top:0;}
  .footer-top{padding:4rem 0 3rem;}
  .footer-brand p{color:rgba(255,255,255,0.65);font-size:0.92rem;max-width:32ch;margin:0.9rem 0 1.4rem;}
  .footer-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.4rem;color:#fff!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:0.5rem;}
  .footer-stats{display:flex;gap:1.4rem;margin-bottom:1.4rem;}
  .footer-stat{display:flex;flex-direction:column;}
  .footer-stat strong{font-family:'Baloo 2',sans-serif;font-size:1.2rem;font-weight:800;}
  .footer-stat span{font-size:0.75rem;color:rgba(255,255,255,0.55);font-weight:500;}
  .footer-social{display:flex;gap:0.6rem;}
  .footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background 0.2s;}
  .footer-social a:hover{background:rgba(255,255,255,0.16);}
  .footer-col-title{font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem;color:rgba(255,255,255,0.45);}
  .footer-links{list-style:none;padding:0;margin:0;}
  .footer-links li{margin-bottom:0.55rem;}
  .footer-links a{color:#fff;text-decoration:none!important;font-size:0.88rem;font-weight:500;transition:opacity 0.2s ease;}
  .footer-links a:hover{opacity:0.75;}
  .footer-contact{list-style:none;padding:0;margin:0;}
  .footer-contact li{display:flex;align-items:flex-start;gap:0.55rem;margin-bottom:0.75rem;font-size:0.88rem;color:rgba(255,255,255,0.75);}
  .footer-contact a{color:#fff;text-decoration:none;}
  .footer-trust{border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);padding:1.1rem 0;}
  .footer-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2.5rem;}
  .footer-trust-item{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.7);}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.4rem 0;font-size:0.8rem;color:rgba(255,255,255,0.45);}
  .foot-legal{display:flex;flex-wrap:wrap;gap:1.2rem;}
  .foot-legal a{color:rgba(255,255,255,0.45);text-decoration:none;}
  .foot-legal a:hover{color:#fff;}

  @media (max-width:991px){
    .page-hero{padding-bottom:1.5rem;}
    .hero-visual{margin-top:1.5rem;}
  }
  @media (max-width:575px){
    section{padding:2.8rem 0;}
    .network-strip{padding:1.5rem 1.2rem;}
    .cta-band{padding:2.2rem 1.3rem;border-radius:24px;}
  }

  .vn-hero-art{
    position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;
    animation:hero-float 6s ease-in-out infinite;
  }
  .vn-glow{
    position:absolute;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,205,0,0.35) 0%,rgba(218,37,29,0.12) 45%,transparent 70%);
    z-index:0;
  }
  .vn-phone{
    position:relative;z-index:2;width:190px;height:360px;border-radius:32px;
    background:linear-gradient(160deg,#1C1633 0%,#2A2250 100%);
    box-shadow:0 30px 60px rgba(28,22,51,0.28), inset 0 0 0 2px rgba(255,255,255,0.08);
    padding:12px;
  }
  .vn-phone-notch{width:70px;height:8px;background:#0f0a1a;border-radius:8px;margin:6px auto 10px;}
  .vn-phone-screen{
    height:calc(100% - 24px);border-radius:24px;background:linear-gradient(180deg,#FFF8F0 0%,#FFEDE3 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.7rem;padding:1rem;
  }
  .vn-signal{font-size:0.78rem;font-weight:800;color:var(--primary);letter-spacing:0.04em;}
  .vn-qr{
    width:88px;height:88px;border-radius:12px;
    background:
      linear-gradient(#1C1633 0 0) 0 0/28% 28%,
      linear-gradient(#1C1633 0 0) 100% 0/28% 28%,
      linear-gradient(#1C1633 0 0) 0 100%/28% 28%,
      linear-gradient(#1C1633 0 0) 36% 36%/12% 12%,
      linear-gradient(#1C1633 0 0) 56% 48%/8% 8%,
      linear-gradient(#1C1633 0 0) 44% 64%/10% 10%,
      #fff;
    background-repeat:no-repeat;border:2px solid #E2DEF5;
    box-shadow:0 8px 20px rgba(28,22,51,0.1);
  }
  .vn-ok{
    font-size:0.78rem;font-weight:800;color:#fff;background:var(--teal);
    padding:0.35rem 0.75rem;border-radius:100px;
  }
  .vn-float{
    position:absolute;z-index:3;background:#fff;border-radius:14px;padding:0.55rem 0.85rem;
    font-size:0.82rem;font-weight:700;color:var(--ink);
    box-shadow:0 10px 28px rgba(28,22,51,0.12);
    display:inline-flex;align-items:center;gap:0.4rem;
    animation:vn-bob 4.5s ease-in-out infinite;
  }
  .vn-float.f1{top:12%;left:4%;}
  .vn-float.f2{top:28%;right:2%;animation-delay:-1.5s;}
  .vn-float.f3{bottom:18%;left:8%;animation-delay:-2.8s;}
  @keyframes vn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @media (max-width:991px){
    .vn-hero-art{min-height:300px;margin-top:1rem;}
    .vn-phone{width:160px;height:300px;}
  }


/* -- Balanced plan cards -- */
#forfaits .plan-tabs,
.plan-tabs{
  display:flex !important;
  justify-content:center;
  gap:0.45rem;
  margin:0 auto 2.2rem !important;
  padding:0;
  background:transparent;
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;
}
#forfaits .plan-tab,
.plan-tab{
  border:1.5px solid #E2DEF5 !important;
  background:transparent !important;
  color:var(--ink-soft) !important;
  border-radius:999px !important;
  padding:0.55rem 1.2rem !important;
  font-size:0.88rem !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
#forfaits .plan-tab.active,
#forfaits .plan-tab:hover,
.plan-tab.active,
.plan-tab:hover{
  border-color:var(--primary) !important;
  color:var(--primary) !important;
  background:#fff !important;
  box-shadow:none !important;
}
#forfaits .plans-grid.active,
.plans-grid.active{
  gap:1.1rem !important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
}
#forfaits .plan-card,
.plan-card{
  background:var(--card,#fff) !important;
  border:1px solid rgba(28,22,51,0.06) !important;
  border-radius:20px !important;
  padding:1.5rem 1.35rem !important;
  box-shadow:0 8px 28px rgba(28,22,51,0.06) !important;
  transform:none !important;
  transition:transform 0.2s ease, box-shadow 0.2s ease !important;
  position:relative;
}
#forfaits .plan-card:hover,
.plan-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 34px rgba(28,22,51,0.09) !important;
  border-color:rgba(28,22,51,0.08) !important;
}
#forfaits .plan-card.featured,
.plan-card.featured{
  border:2px solid rgba(28,22,51,0.35) !important;
  box-shadow:0 12px 32px rgba(28,22,51,0.12) !important;
  background:#fff !important;
}
#forfaits .plan-badge,
.plan-badge{
  display:inline-flex !important;
  position:absolute;
  top:-10px;
  right:1.1rem;
  background:var(--primary);
  color:#fff;
  font-size:0.68rem;
  font-weight:700;
  padding:0.28rem 0.7rem;
  border-radius:999px;
  letter-spacing:0.02em;
}
.plan-eyebrow{display:none !important;}
#forfaits .plan-card-top,
.plan-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.65rem;
  margin-bottom:0.7rem;
}
#forfaits .plan-data,
.plan-data{
  font-family:'Baloo 2',sans-serif !important;
  font-size:1.55rem !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
  line-height:1.15 !important;
  margin:0 !important;
  color:var(--ink);
}
#forfaits .plan-days,
.plan-days{
  display:inline-flex !important;
  align-items:baseline;
  gap:0.3rem;
  width:fit-content;
  margin:0 0 1rem !important;
  padding:0 !important;
  border-radius:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--ink-soft) !important;
  font-family:inherit !important;
  font-size:0.88rem !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}
#forfaits .plan-days .days-num,
.plan-days .days-num{
  font-family:'Baloo 2',sans-serif !important;
  font-size:1rem !important;
  font-weight:800 !important;
  color:var(--ink) !important;
  letter-spacing:0 !important;
}
#forfaits .plan-days .days-label,
.plan-days .days-label{
  font-size:0.88rem !important;
  font-weight:600 !important;
  color:var(--ink-soft) !important;
}
#forfaits .plan-card.featured .plan-days,
.plan-card.featured .plan-days{
  background:transparent !important;
  border:0 !important;
  color:var(--ink-soft) !important;
}
#forfaits .plan-card.featured .plan-days .days-num,
.plan-card.featured .plan-days .days-num{
  color:var(--ink) !important;
}
#forfaits .plan-card.featured .plan-days .days-label,
.plan-card.featured .plan-days .days-label{
  color:var(--ink-soft) !important;
}
#forfaits .plan-price,
.plan-price{
  font-family:'Baloo 2',sans-serif !important;
  font-size:1.5rem !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
  color:var(--ink) !important;
  margin:0 0 0.25rem !important;
}
#forfaits .plan-price span,
.plan-price span{
  font-family:inherit !important;
  font-size:0.82rem !important;
  font-weight:600 !important;
  color:var(--ink-soft) !important;
}
#forfaits .plan-meta,
.plan-card .plan-meta{
  margin:0 0 1.2rem !important;
  font-size:0.84rem !important;
  color:var(--ink-soft) !important;
  flex-grow:1;
}
#forfaits .plan-card-days,
.plan-card-days{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  margin:0.25rem 0 1.15rem !important;
  width:100%;
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink-soft);
}
.plan-card-days select{
  border:1px solid rgba(28,22,51,0.18);
  border-radius:999px;
  background:#fff;
  padding:0.35rem 0.7rem;
  font:inherit;
  color:var(--ink);
  min-width:4.5rem;
}
.plan-card-days .plan-period-custom{
  width:4.75rem;
  border:1px solid rgba(28,22,51,0.18);
  border-radius:999px;
  background:#fff;
  padding:0.35rem 0.7rem;
  font:inherit;
  color:var(--ink);
}
.plan-card-days .plan-period-custom[hidden]{display:none !important;}
#forfaits .plan-net,
.plan-card .plan-net{
  display:inline-flex !important;
  align-items:center;
  gap:0.28rem;
  padding:0.28rem 0.55rem !important;
  border-radius:999px !important;
  background:#EEFBF4 !important;
  color:#15803d !important;
  font-size:0.72rem !important;
  font-weight:700 !important;
  letter-spacing:0.02em;
}
#forfaits .plan-net-5g,
.plan-card .plan-net-5g{
  background:#EEFBF4 !important;
  color:#15803d !important;
}
#forfaits .plan-net-4g,
.plan-card .plan-net-4g{
  background:#F5F3FF !important;
  color:var(--violet) !important;
}
#forfaits .plan-net-3g,
.plan-card .plan-net-3g{
  background:#F3F1F8 !important;
  color:var(--ink-soft) !important;
}
#forfaits .plan-card .btn-pill.plan-buy-btn,
.plan-card .btn-pill.plan-buy-btn{
  width:100%;
  text-align:center;
  margin-top:auto;
  padding:0.7rem 1rem;
}
.plan-validity{display:none !important;}
.plan-buy-btn.is-primary{ /* legacy no-op */ }

/* ===== Legal pages ===== */
.legal-doc{
  max-width:780px;
  margin:0 auto;
  background:var(--card);
  border-radius:28px;
  padding:clamp(1.6rem,3vw,2.6rem);
  box-shadow:0 6px 24px rgba(28,22,51,0.05);
}
.legal-doc .legal-lead{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--ink);
  margin-bottom:2rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid rgba(28,22,51,0.08);
}
.legal-doc h2{
  font-size:clamp(1.25rem,2.2vw,1.45rem);
  margin:2.2rem 0 0.85rem;
}
.legal-doc h3{
  font-size:1.05rem;
  margin:1.3rem 0 0.55rem;
}
.legal-doc p,
.legal-doc li{
  color:var(--ink-soft);
  font-size:0.95rem;
  line-height:1.7;
}
.legal-doc ul,
.legal-doc ol{
  margin:0 0 1rem;
  padding-left:1.2rem;
}
.legal-doc li{margin-bottom:0.4rem;}
.legal-doc a{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
}
.legal-doc a:hover{text-decoration:underline;}
.legal-doc code{
  font-size:0.85em;
  background:rgba(91,79,232,0.08);
  color:var(--primary);
  padding:0.12rem 0.4rem;
  border-radius:6px;
}
.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0 1.4rem;
  font-size:0.9rem;
}
.legal-table th,
.legal-table td{
  text-align:left;
  padding:0.75rem 0.85rem;
  border-bottom:1px solid rgba(28,22,51,0.08);
  vertical-align:top;
  color:var(--ink-soft);
}
.legal-table th{
  color:var(--ink);
  font-weight:700;
  background:rgba(91,79,232,0.05);
}
.legal-doc .callout{margin-top:2rem;}
.legal-doc .callout a{color:var(--primary);}
@media (max-width:576px){
  .legal-doc{border-radius:20px;padding:1.35rem 1.15rem;}
  .legal-table th,
  .legal-table td{padding:0.6rem 0.5rem;font-size:0.82rem;}
}

/* —— Admin login —— */
body.admin-login-page{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, var(--bg-hero-a, #EFE9FF) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 90%, var(--bg-hero-b, #FFEDE3) 0%, transparent 50%),
    var(--bg, #F6F5FC);
  color:var(--ink, #1C1633);
  font-family:Inter, system-ui, sans-serif;
}
.admin-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.admin-login-card{
  width:100%;
  max-width:420px;
  background:var(--card, #fff);
  border:1px solid var(--line, #E2DEF5);
  border-radius:24px;
  padding:2rem 1.75rem 1.85rem;
  box-shadow:0 18px 50px rgba(28,22,51,0.08);
}
.admin-login-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.45rem;
  margin-bottom:1.5rem;
}
.admin-login-brand img{
  height:32px;
  width:auto;
}
.admin-login-brand p{
  margin:0;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--violet, #5B4FE8);
}
.admin-login-card h1{
  margin:0 0 0.35rem;
  font-family:"Baloo 2", sans-serif;
  font-size:1.85rem;
  font-weight:700;
  line-height:1.15;
  color:var(--ink, #1C1633);
}
.admin-login-sub{
  margin:0 0 1.35rem;
  color:var(--ink-soft, #5B5578);
  font-size:0.95rem;
  line-height:1.45;
}
.admin-login-card .form-error{
  margin-bottom:1rem;
}
.admin-login-card .auth-form .field{
  margin-bottom:1rem;
}
.admin-login-card .btn-pill.full{
  margin-top:0.5rem;
}
@media (max-width:480px){
  .admin-login-card{padding:1.5rem 1.25rem 1.4rem;border-radius:20px;}
  .admin-login-card h1{font-size:1.6rem;}
}

/* —— Admin app shell —— */
body.admin-app{
  margin:0;
  min-height:100vh;
  background:var(--bg, #F6F5FC);
  color:var(--ink, #1C1633);
  font-family:Inter, system-ui, sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
}
body.admin-app h1,
body.admin-app h2,
body.admin-app h3,
body.admin-app strong,
body.admin-app b,
body.admin-app th,
body.admin-app .btn-pill,
body.admin-app .badge,
body.admin-app .stat-label,
body.admin-app .stat-value,
body.admin-app .admin-side-link,
body.admin-app .admin-logout-btn,
body.admin-app .admin-topbar-email,
body.admin-app .admin-brand span,
body.admin-app .panel-head h2,
body.admin-app .panel-head .muted{
  font-weight:600;
}
body.admin-app .view-head h1{
  font-family:Inter, system-ui, sans-serif;
  font-size:1.35rem;
  font-weight:600;
  line-height:1.25;
}
body.admin-app .view-head p{
  font-size:0.88rem;
  font-weight:400;
}
body.admin-app .stat-label{
  font-size:0.68rem;
  font-weight:600;
}
body.admin-app .stat-value{
  font-family:Inter, system-ui, sans-serif;
  font-size:1.35rem;
  font-weight:600;
}
@media (min-width:560px){
  body.admin-app .stat-value{font-size:1.45rem;}
}
body.admin-app .stat-hint{
  font-size:0.78rem;
  font-weight:400;
}
body.admin-app .panel-head h2{
  font-size:0.84rem;
  font-weight:600;
}
body.admin-app .panel-head .muted{
  font-size:0.75rem;
  font-weight:500;
}
body.admin-app .admin-table th{
  font-size:0.68rem;
  font-weight:600;
}
body.admin-app .admin-table td{
  font-size:0.84rem;
  font-weight:400;
}
body.admin-app .admin-table td strong{
  font-size:0.84rem;
  font-weight:600;
}
body.admin-app .admin-table td > span:not(.badge),
body.admin-app .admin-table td strong + span{
  font-size:0.75rem;
  font-weight:400;
}
body.admin-app .badge{
  font-size:0.68rem;
  font-weight:600;
}
body.admin-app .admin-side-link{
  font-size:0.84rem;
  font-weight:500;
}
body.admin-app .admin-side-link.active{
  font-weight:600;
}
body.admin-app .admin-topbar-email,
body.admin-app .admin-logout-btn{
  font-size:0.78rem;
  font-weight:500;
}
body.admin-app .admin-brand span{
  font-size:0.66rem;
  font-weight:600;
}
body.admin-app .admin-stat-date{
  font-size:1.15rem !important;
  font-weight:600;
}
body.admin-app .admin-client-title h1{
  font-size:1.35rem;
  font-weight:600;
}
body.admin-app .admin-esim-title strong{
  font-family:Inter, system-ui, sans-serif;
  font-size:0.95rem;
  font-weight:600;
}
body.admin-app .admin-info-item span,
body.admin-app .admin-esim-meta dt{
  font-weight:600;
}
body.admin-app .admin-info-item strong,
body.admin-app .admin-esim-meta dd,
body.admin-app .admin-esim-usage{
  font-weight:500;
}
.admin-topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line, #E2DEF5);
}
.admin-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:64px;
  padding:0.65rem 1.1rem;
  width:100%;
}
@media (min-width:992px){
  .admin-topbar-inner{padding:0.7rem 1.5rem;}
}
.admin-topbar-left,
.admin-topbar-right{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.admin-brand{
  display:inline-flex;
  align-items:center;
  gap:0.65rem;
  text-decoration:none;
  color:inherit;
}
.admin-brand img{height:28px;width:auto;}
.admin-brand span{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--violet, #5B4FE8);
  background:rgba(91,79,232,0.1);
  padding:0.28rem 0.55rem;
  border-radius:100px;
}
.admin-menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--line, #E2DEF5);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
}
@media (min-width:992px){.admin-menu-btn{display:none;}}
.admin-topbar-user{
  display:none;
  align-items:center;
  gap:0.55rem;
}
@media (min-width:640px){.admin-topbar-user{display:inline-flex;}}
.admin-topbar-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:0.85rem;
}
.admin-topbar-email{
  font-size:0.86rem;
  font-weight:600;
  color:var(--ink-soft, #5B5578);
}
.admin-logout-btn{
  border:1px solid var(--line, #E2DEF5);
  background:#fff;
  color:var(--ink);
  font-weight:600;
  font-size:0.82rem;
  padding:0.45rem 0.85rem;
  border-radius:100px;
  cursor:pointer;
}
.admin-logout-btn:hover{background:var(--line-soft, #EEEBFA);}

.admin-shell{
  display:grid;
  grid-template-columns:1fr;
  width:100%;
  min-height:calc(100vh - 64px);
}
@media (min-width:992px){
  .admin-shell{grid-template-columns:240px 1fr;gap:0;}
}

.admin-sidebar{
  background:#fff;
  border-right:1px solid var(--line, #E2DEF5);
  padding:1.1rem 0.85rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
@media (max-width:991.98px){
  .admin-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(300px, 88vw);
    z-index:50;
    transform:translateX(-105%);
    transition:transform 0.22s ease;
    box-shadow:12px 0 40px rgba(28,22,51,0.12);
  }
  .admin-sidebar.is-open{transform:translateX(0);}
}
.admin-sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(28,22,51,0.35);
  z-index:45;
  opacity:0;
  transition:opacity 0.2s ease;
}
.admin-sidebar-backdrop.is-open{opacity:1;}
.admin-sidebar-close{
  display:none;
  align-self:flex-end;
  width:36px;
  height:36px;
  border:none;
  background:var(--line-soft, #EEEBFA);
  border-radius:10px;
  cursor:pointer;
  margin-bottom:0.35rem;
}
@media (max-width:991.98px){.admin-sidebar-close{display:inline-flex;align-items:center;justify-content:center;}}
.admin-sidebar-label{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:0.35rem 0.75rem 0.55rem;
}
.admin-side-nav{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  flex:1;
}
.admin-side-link{
  display:flex;
  align-items:center;
  gap:0.65rem;
  width:100%;
  padding:0.7rem 0.75rem;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-weight:600;
  font-size:0.92rem;
  text-decoration:none;
  cursor:pointer;
  text-align:left;
}
.admin-side-link svg{flex-shrink:0;opacity:0.85;}
.admin-side-link:hover{background:var(--line-soft, #EEEBFA);color:var(--ink);}
.admin-side-link.active{
  background:rgba(91,79,232,0.12);
  color:var(--violet-dark, #4238C4);
}
.admin-side-link.is-soon{
  opacity:0.55;
  cursor:default;
}
.admin-side-link.is-soon:hover{background:transparent;color:var(--ink-soft);}
.admin-side-link em{
  margin-left:auto;
  font-style:normal;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--line-soft, #EEEBFA);
  padding:0.18rem 0.4rem;
  border-radius:100px;
}
.admin-side-link.danger{color:#C2412B;}
.admin-side-link.danger:hover{background:rgba(255,107,74,0.1);}
.admin-sidebar-footer{margin-top:auto;padding-top:0.75rem;}

.admin-main{min-width:0;}
.admin-main-inner{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:1.15rem 1.1rem 2.5rem;
}
@media (min-width:992px){
  .admin-main-inner{padding:1.5rem 1.75rem 3rem;}
}
.admin-app .view-head h1{
  font-family:Inter, system-ui, sans-serif;
  font-weight:600;
}

.admin-stat-row{
  display:grid;
  grid-template-columns:1fr;
  gap:0.75rem;
  margin-bottom:1.1rem;
}
@media (min-width:560px){
  .admin-stat-row{grid-template-columns:repeat(2, 1fr);}
}
@media (min-width:1100px){
  .admin-stat-row{grid-template-columns:repeat(4, 1fr);gap:0.9rem;margin-bottom:1.25rem;}
}

.admin-charts{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-bottom:1rem;
}
@media (min-width:992px){
  .admin-charts{grid-template-columns:1.6fr 1fr;}
}
.admin-chart-body{
  height:260px;
  padding:0.85rem 1rem 1.1rem;
}
.admin-chart-body--donut{
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-chart-body canvas{max-width:100%;}

.admin-badge-failed{
  background:#E5484D;
  color:#fff;
}
.admin-badge-canceled{
  background:#E5484D;
  color:#fff;
}
.admin-badge-pending{
  background:#F5A524;
  color:#fff;
}
.admin-table .badge{
  display:inline-flex;
  width:fit-content;
  max-width:max-content;
  white-space:nowrap;
  flex-shrink:0;
  color:#fff;
}
.admin-table .badge::before{
  background:#fff;
  opacity:0.9;
}
.admin-table .badge-active{
  background:#2EC4B6;
  color:#fff;
}
.admin-table .badge-ready{
  background:#5B4FE8;
  color:#fff;
}
.admin-table .badge-expired,
.admin-table .admin-badge-canceled,
.admin-table .admin-badge-failed{
  background:#E5484D;
  color:#fff;
}
.admin-table .admin-badge-pending{
  background:#F5A524;
  color:#fff;
}

.admin-table-wrap{overflow-x:auto;}
.admin-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}
.admin-table th,
.admin-table td{
  text-align:left;
  padding:0.9rem 1rem;
  border-bottom:1px solid var(--line-soft, #EEEBFA);
  vertical-align:top;
}
.admin-table th{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:rgba(91,79,232,0.04);
}
.admin-table tbody tr:last-child td{border-bottom:none;}
.admin-table td strong{
  display:block;
  font-size:0.92rem;
  color:var(--ink);
}
.admin-table td > span:not(.badge){
  display:block;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-top:0.15rem;
}
.admin-table td strong + span{
  display:block;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-top:0.15rem;
}
.admin-table td:nth-child(4){
  font-weight:700;
  white-space:nowrap;
}
.admin-table td:nth-child(5){
  width:1%;
  white-space:nowrap;
}
@media (max-width:720px){
  .admin-table{min-width:0;}
  .admin-table thead{display:none;}
  .admin-table tr{
    display:block;
    padding:0.95rem 1rem;
    border-bottom:1px solid var(--line-soft, #EEEBFA);
  }
  .admin-table td{
    display:flex;
    justify-content:space-between;
    gap:0.75rem;
    padding:0.25rem 0;
    border:none;
  }
  .admin-table td::before{
    content:attr(data-label);
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink-soft);
    flex-shrink:0;
  }
  .admin-table td strong,
  .admin-table td strong + span{text-align:right;}
}

/* —— Admin clients —— */
.admin-panel-head-tools{
  flex-wrap:wrap;
  gap:0.85rem;
}
.admin-search{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex:1 1 220px;
  max-width:360px;
  margin-left:auto;
}
.admin-search input{
  flex:1;
  min-width:0;
  border:1px solid var(--line, #E2DEF5);
  border-radius:100px;
  padding:0.55rem 0.95rem;
  font-size:0.88rem;
  background:#fff;
  color:var(--ink);
}
.admin-search input:focus{
  outline:none;
  border-color:var(--violet, #5B4FE8);
  box-shadow:0 0 0 3px rgba(91,79,232,0.15);
}
.admin-client-cell{
  display:flex;
  align-items:center;
  gap:0.7rem;
  text-align:left;
}
.admin-client-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  flex-shrink:0;
}
.admin-client-avatar.lg{
  width:52px;
  height:52px;
  font-size:1.15rem;
}
.admin-client-title{
  display:flex;
  align-items:center;
  gap:0.85rem;
}
.admin-client-title h1{margin:0 0 0.2rem;}
.admin-client-title p{margin:0;}
.admin-actions-cell{
  text-align:right;
  width:1%;
  white-space:nowrap;
}
.admin-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line, #E2DEF5);
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.admin-icon-btn:hover{
  background:rgba(91,79,232,0.1);
  border-color:rgba(91,79,232,0.35);
  color:var(--violet-dark, #4238C4);
}
.admin-pagination{
  padding:0.85rem 1rem 1rem;
  display:flex;
  justify-content:center;
}
.admin-pagination .pagination{margin:0;}
.admin-pagination .page-link{
  color:var(--ink);
  border-color:var(--line, #E2DEF5);
  font-weight:600;
  font-size:0.85rem;
}
.admin-pagination .page-item.active .page-link{
  background:var(--ink);
  border-color:var(--ink);
}
.admin-back-row{margin-bottom:0.85rem;}
.admin-back-link{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  color:var(--ink-soft);
  font-weight:600;
  font-size:0.88rem;
  text-decoration:none;
}
.admin-back-link:hover{color:var(--violet-dark, #4238C4);}
.admin-stat-date{font-size:1.15rem !important;font-weight:600;}
.admin-info-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media (min-width:720px){
  .admin-info-grid{grid-template-columns:repeat(2, 1fr);}
}
.admin-info-item{
  padding:0.95rem 1.1rem;
  border-bottom:1px solid var(--line-soft, #EEEBFA);
}
@media (min-width:720px){
  .admin-info-item:nth-last-child(-n+2){border-bottom:none;}
}
.admin-info-item span{
  display:block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:0.25rem;
}
.admin-info-item strong{
  font-size:0.95rem;
  color:var(--ink);
  font-weight:600;
  word-break:break-word;
}
.admin-info-item a{
  color:var(--violet-dark, #4238C4);
  text-decoration:none;
}
.admin-info-item a:hover{text-decoration:underline;}
.admin-esim-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.admin-esim-card{
  padding:1.05rem 1.1rem 1.15rem;
  border-bottom:1px solid var(--line-soft, #EEEBFA);
}
.admin-esim-card:last-child{border-bottom:none;}
.admin-esim-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.85rem;
  margin-bottom:0.85rem;
}
.admin-esim-title{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:0.2rem;
}
.admin-esim-title strong{
  font-family:"Baloo 2", sans-serif;
  font-size:1.1rem;
}
.admin-esim-card-top p{
  margin:0;
  color:var(--ink-soft);
  font-size:0.88rem;
}
.admin-esim-usage{
  font-weight:700;
  font-size:0.86rem;
  color:var(--ink);
  white-space:nowrap;
}
.admin-esim-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.65rem 1rem;
  margin:0;
}
@media (min-width:720px){
  .admin-esim-meta{grid-template-columns:repeat(4, minmax(0, 1fr));}
}
.admin-esim-meta dt{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 0.15rem;
}
.admin-esim-meta dd{
  margin:0;
  font-size:0.84rem;
  font-weight:600;
  color:var(--ink);
  word-break:break-word;
}
.admin-esim-meta-wide{grid-column:1 / -1;}
.admin-esim-meta a{
  color:var(--violet-dark, #4238C4);
  text-decoration:none;
  font-weight:700;
}
.admin-esim-meta a:hover{text-decoration:underline;}
.admin-esim-meta code{
  font-size:0.78rem;
  background:rgba(91,79,232,0.08);
  padding:0.2rem 0.45rem;
  border-radius:6px;
  word-break:break-all;
}
.admin-esim-card .badge,
.admin-app .admin-esim-card .badge{
  display:inline-flex;
  width:fit-content;
  color:#fff;
}
.admin-esim-card .badge::before{background:#fff;opacity:0.9;}
.admin-esim-card .badge-active{background:#2EC4B6;color:#fff;}
.admin-esim-card .badge-ready{background:#5B4FE8;color:#fff;}
.admin-esim-card .badge-expired{background:#6B6685;color:#fff;}
.admin-esim-card .admin-badge-failed{background:#E5484D;color:#fff;}
@media (max-width:720px){
  .admin-actions-cell{
    justify-content:flex-end;
  }
  .admin-actions-cell::before{align-self:center;}
  .admin-client-cell{width:100%;justify-content:flex-end;}
}

/* —— Admin accordion (client orders) —— */
.admin-collapse-trigger{
  width:100%;
  cursor:pointer;
  background:transparent;
  border:none;
  text-align:left;
}
.admin-collapse-trigger.panel-head{
  border-bottom:1px solid var(--line-soft, #EEEBFA);
}
.admin-collapse:not(.is-open) .admin-collapse-trigger.panel-head{
  border-bottom:none;
}
.admin-collapse-heading{
  display:inline-flex;
  align-items:center;
  gap:0.65rem;
  min-width:0;
}
.admin-collapse-chevron{
  color:var(--ink-soft);
  transition:transform 0.18s ease;
  flex-shrink:0;
}
.admin-collapse.is-open .admin-collapse-chevron{
  transform:rotate(180deg);
}
.admin-collapse-body[hidden]{display:none !important;}

.admin-accordion{
  display:flex;
  flex-direction:column;
}
.admin-accordion-item{
  border-bottom:1px solid var(--line-soft, #EEEBFA);
}
.admin-accordion-item:last-child{border-bottom:none;}
.admin-accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.85rem;
  padding:0.9rem 1.1rem;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
  color:inherit;
}
.admin-accordion-trigger:hover{
  background:rgba(91,79,232,0.04);
}
.admin-accordion-item.is-open .admin-accordion-trigger{
  background:rgba(91,79,232,0.06);
}
.admin-accordion-main{
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  min-width:0;
  flex:1;
}
.admin-accordion-title{
  font-size:0.88rem;
  font-weight:600;
  color:var(--ink);
}
.admin-accordion-meta{
  font-size:0.75rem;
  font-weight:400;
  color:var(--ink-soft);
}
.admin-accordion-side{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  flex-shrink:0;
}
.admin-accordion-chevron{
  transition:transform 0.18s ease;
  color:var(--ink-soft);
}
.admin-accordion-item.is-open .admin-accordion-chevron{
  transform:rotate(180deg);
}
.admin-accordion-panel[hidden]{display:none !important;}
.admin-accordion-body{
  padding:0 1.1rem 1.1rem;
  border-top:1px solid var(--line-soft, #EEEBFA);
}
.admin-accordion-body .admin-esim-meta{
  padding-top:0.9rem;
}
.admin-accordion-body .badge{
  display:inline-flex;
  width:fit-content;
  color:#fff;
  font-size:0.68rem;
  font-weight:600;
}
.admin-accordion-body .badge::before{background:#fff;opacity:0.9;}
.admin-order-esims{
  margin-top:1rem;
  padding-top:0.85rem;
  border-top:1px solid var(--line-soft, #EEEBFA);
}
.admin-order-esims h3{
  margin:0 0 0.65rem;
  font-size:0.78rem;
  font-weight:600;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.admin-order-esim-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  padding:0.55rem 0;
  border-bottom:1px solid var(--line-soft, #EEEBFA);
}
.admin-order-esim-row:last-child{border-bottom:none;}
.admin-order-esim-row strong{
  display:block;
  font-size:0.84rem;
  font-weight:600;
}
.admin-order-esim-row span:not(.badge){
  display:block;
  font-size:0.75rem;
  color:var(--ink-soft);
  margin-top:0.1rem;
}
@media (max-width:560px){
  .admin-accordion-trigger{
    align-items:flex-start;
    flex-direction:column;
  }
  .admin-accordion-side{width:100%;justify-content:space-between;}
}

/* —— Admin order filters —— */
.admin-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.45rem;
  margin-bottom:1rem;
}
.admin-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.4rem 0.7rem;
  border-radius:100px;
  border:1px solid var(--line, #E2DEF5);
  background:#fff;
  color:var(--ink-soft);
  font-size:0.78rem;
  font-weight:500;
  text-decoration:none;
}
.admin-filter-chip em{
  font-style:normal;
  font-size:0.7rem;
  font-weight:600;
  color:var(--ink);
  background:var(--line-soft, #EEEBFA);
  padding:0.1rem 0.4rem;
  border-radius:100px;
}
.admin-filter-chip:hover{
  border-color:rgba(91,79,232,0.35);
  color:var(--ink);
}
.admin-filter-chip.is-active{
  background:rgba(91,79,232,0.1);
  border-color:rgba(91,79,232,0.35);
  color:var(--violet-dark, #4238C4);
  font-weight:600;
}
.admin-filter-chip.is-active em{
  background:rgba(91,79,232,0.16);
  color:var(--violet-dark, #4238C4);
}
.admin-stat-status{
  display:flex;
  align-items:center;
  min-height:1.45rem;
}
.admin-stat-status .badge{
  font-size:0.78rem;
}
.view-head p .badge{
  display:inline-flex;
  vertical-align:middle;
  color:#fff;
}
.view-head p .badge::before{background:#fff;opacity:0.9;}
body.admin-app .view-head p .badge-active{background:#2EC4B6;color:#fff;}
body.admin-app .view-head p .badge-ready{background:#5B4FE8;color:#fff;}
body.admin-app .view-head p .admin-badge-pending{background:#F5A524;color:#fff;}
body.admin-app .view-head p .admin-badge-failed,
body.admin-app .view-head p .admin-badge-canceled{background:#E5484D;color:#fff;}
body.admin-app .admin-stat-status .badge-active{background:#2EC4B6;color:#fff;}
body.admin-app .admin-stat-status .badge-ready{background:#5B4FE8;color:#fff;}
body.admin-app .admin-stat-status .admin-badge-pending{background:#F5A524;color:#fff;}
body.admin-app .admin-stat-status .admin-badge-failed,
body.admin-app .admin-stat-status .admin-badge-canceled{background:#E5484D;color:#fff;}
body.admin-app .admin-stat-status .badge::before{background:#fff;opacity:0.9;}

.admin-alert{
  margin-bottom:1rem;
  padding:0.85rem 1rem;
  border-radius:14px;
  border:1px solid rgba(245,165,36,0.35);
  background:rgba(245,165,36,0.12);
  color:#8A5A00;
  font-size:0.84rem;
  font-weight:500;
  line-height:1.45;
}
.admin-alert-success{
  border-color:rgba(46,196,182,0.35);
  background:rgba(46,196,182,0.12);
  color:#0F766E;
}
.admin-alert-error{
  border-color:rgba(229,72,77,0.35);
  background:rgba(229,72,77,0.1);
  color:#B42318;
}
.admin-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  margin:0 0 1rem;
}
.admin-subnav-link{
  display:inline-flex;
  align-items:center;
  padding:0.45rem 0.9rem;
  border-radius:100px;
  border:1px solid var(--line, #E2DEF5);
  background:#fff;
  color:var(--ink-soft);
  font-size:0.8rem;
  font-weight:600;
  text-decoration:none;
}
.admin-subnav-link:hover{
  border-color:rgba(91,79,232,0.35);
  color:var(--violet-dark, #4238C4);
}
.admin-subnav-link.is-active{
  background:rgba(91,79,232,0.12);
  border-color:transparent;
  color:var(--violet-dark, #4238C4);
}
.admin-form{padding:1rem 1.1rem 1.15rem;}
.admin-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.85rem;
}
@media (min-width:720px){
  .admin-form-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
.admin-form-grid-narrow{max-width:360px;}
.admin-field label{
  display:block;
  font-size:0.78rem;
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:0.35rem;
}
.admin-field input[type="text"],
.admin-field input[type="number"],
.admin-details-form input[type="text"],
.admin-details-form input[type="number"]{
  width:100%;
  border:1px solid var(--line, #E2DEF5);
  border-radius:12px;
  padding:0.65rem 0.8rem;
  font-size:0.9rem;
  background:#fff;
  color:var(--ink);
}
.admin-field-hint{
  margin:0.45rem 0 0;
  font-size:0.78rem;
  color:var(--ink-soft);
  line-height:1.4;
}
.admin-field-checks{
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  justify-content:flex-end;
}
.admin-check{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.88rem;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
}
.admin-form-actions{
  display:flex;
  gap:0.6rem;
  margin-top:1rem;
}
.admin-inline-form{display:inline;}
.admin-flag{
  display:inline-block;
  vertical-align:-2px;
  margin-right:0.35rem;
  border-radius:2px;
}
.admin-flag.lg{
  border-radius:6px;
  box-shadow:0 0 0 1px var(--line-soft, #EEEBFA);
}
.admin-chip{
  display:inline-flex;
  align-items:center;
  margin-left:0.35rem;
  padding:0.1rem 0.4rem;
  border-radius:100px;
  background:rgba(91,79,232,0.12);
  color:var(--violet-dark, #4238C4);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  vertical-align:middle;
}
.admin-chip-featured{
  background:rgba(245,165,36,0.18);
  color:#8A5A00;
  font-size:0.78rem;
  text-transform:none;
  letter-spacing:0;
}
.admin-table tr.is-muted{opacity:0.55;}
.admin-table-catalog td:nth-child(4){font-weight:700;}
.admin-details{position:relative;display:inline-block;}
.admin-details > summary{
  list-style:none;
  cursor:pointer;
}
.admin-details > summary::-webkit-details-marker{display:none;}
.admin-details-form{
  position:absolute;
  right:0;
  top:calc(100% + 0.35rem);
  z-index:5;
  width:260px;
  padding:0.85rem;
  border-radius:14px;
  border:1px solid var(--line, #E2DEF5);
  background:#fff;
  box-shadow:0 12px 32px rgba(28,22,51,0.12);
  display:flex;
  flex-direction:column;
  gap:0.65rem;
}
.admin-details-form label{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  font-size:0.72rem;
  font-weight:700;
  color:var(--ink-soft);
}
.admin-details-form .admin-check{
  font-size:0.82rem;
  flex-direction:row;
  align-items:center;
}
.admin-api-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
}
.admin-page-btn{
  display:inline-flex;
  align-items:center;
  padding:0.4rem 0.85rem;
  border-radius:100px;
  border:1px solid var(--line, #E2DEF5);
  background:#fff;
  color:var(--ink);
  font-size:0.78rem;
  font-weight:600;
  text-decoration:none;
}
.admin-page-btn:hover{
  border-color:rgba(91,79,232,0.35);
  color:var(--violet-dark, #4238C4);
}
.admin-page-status{
  font-size:0.78rem;
  font-weight:500;
  color:var(--ink-soft);
}
.admin-table td span + span{
  margin-top:0.1rem;
}

.navbar{
  z-index:90;
  overflow:visible;
}
.nav-user-btn,
.nav-user-item{
  -webkit-appearance:none;
  appearance:none;
}
@media (prefers-reduced-motion: reduce){
  .nav-backdrop,
  .nav-panel{
    transition:none;
  }
}