/* Manrope — same UI typeface now used across the client panel (matched
     live off the Ecomdrive command-center reference), loaded here too so
     the marketing site and the logged-in app share one consistent brand
     voice instead of two different fonts. */
  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
  /* Poppins — used only for the HostyXo wordmark (logo), for a bolder,
     more distinct brand typeface than the body copy. */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;800;900&display=swap');
  :root{
    --primary:#3b5bfd;
    --primary-dark:#2540c9;
    --primary-light:#eef1ff;
    --accent:#00d4b5;
    --accent-dark:#00a892;
    /* Ink/muted/line/bg-soft tightened to the exact neutrals used in the
       client panel (themselves measured live off Ecomdrive) so the public
       site and the logged-in app read as one consistent design system. */
    --ink:#111827;
    --text:#3c4657;
    --muted:#64748b;
    --line:#eef1f6;
    --bg-soft:#f8f7fb;
    --white:#ffffff;
    --radius-lg:12px;
    --radius-md:10px;
    --radius-sm:8px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.04),0 1px 3px rgba(17,24,39,.06);
    --shadow-md:0 4px 16px rgba(17,24,39,.08),0 1px 4px rgba(17,24,39,.05);
    --shadow-lg:0 12px 32px rgba(17,24,39,.12),0 2px 8px rgba(17,24,39,.06);
    --container:1440px;
    --container-wide:1440px;
    --hero-dark:#070c1e;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    background:var(--white);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  img,svg{display:block;}
  ul{list-style:none;}
  .container{max-width:var(--container);margin:0 auto;padding:0 28px;}
  .container.wide{max-width:var(--container-wide);}
  /* International-brand pass: more generous section rhythm (was 104px) —
     premium sites give content more room to breathe. */
  section{padding:92px 0;}
  /* Offset in-page anchor targets so the sticky header never covers the
     top of a section when jumping to it (native hash jump or the JS
     smooth-scroll below). */
  section[id]{scroll-margin-top:110px;}
  h1,h2,h3,h4{color:var(--ink);font-weight:700;letter-spacing:-0.03em;}
  .h2{font-size:43px;line-height:1.15;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--primary);font-weight:600;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;
    background:var(--primary-light);padding:7px 14px;border-radius:30px;
  }
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .section-head{max-width:660px;margin:0 auto 56px;text-align:center;}
  .section-head p{color:var(--muted);font-size:17.5px;margin-top:14px;}
  .section-head.left{margin:0 0 48px;text-align:left;}

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:15px 28px;border-radius:12px;font-weight:600;font-size:15px;
    cursor:pointer;border:none;transition:all .25s ease;white-space:nowrap;
  }
  .btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(59,91,253,.25);}
  .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 18px rgba(59,91,253,.3);}
  .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
  .btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
  .btn-outline-brand{background:#fff;color:var(--primary);border:1.5px solid var(--primary);}
  .btn-outline-brand:hover{background:var(--primary-light);}
  .btn-white{background:#fff;color:var(--primary);}
  .btn-white:hover{background:#eef1ff;transform:translateY(-2px);}
  .btn-block{width:100%;}
  .btn-sm{padding:10px 18px;font-size:13.5px;border-radius:9px;}

  /* NAV — single-layer light header (the old dark utility bar with
     reviews/live-support/login has been removed entirely per client
     request). Logo, the 5 menu items, then currency + auth on the right. */
  header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--line);transition:.25s;}
  header.scrolled{box-shadow:var(--shadow-md);}

  nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--container-wide);margin:0 auto;}
  .logo{display:flex;align-items:center;gap:10px;font-size:22px;font-family:'Poppins',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
  .logo .mark{width:36px;height:36px;border-radius:10px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(59,91,253,.35);}
  .logo span{color:var(--primary);}
  .logo-xo{background:linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--primary);}
  .nav-links{display:flex;gap:30px;align-items:center;}
  .nav-links > li{position:relative;}
  .nav-links a.top{font-weight:600;font-size:14.5px;color:var(--text);display:flex;align-items:center;gap:5px;padding:8px 0;transition:.2s;}
  .nav-links a.top:hover{color:var(--primary);}
  .dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:10px;min-width:220px;opacity:0;visibility:hidden;transition:.2s;}
  .nav-links > li:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
  .dropdown a{display:block;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text);}
  .dropdown a:hover{background:var(--bg-soft);color:var(--primary);}
  .nav-cta{display:flex;gap:16px;align-items:center;}
  .nav-login{font-weight:600;font-size:13.5px;color:var(--text);transition:.2s;white-space:nowrap;}
  .nav-login:hover{color:var(--primary);}

  /* Logged-in header profile — replaces both "Log In" and "Sign Up Free"
     once /api/client/me confirms a session (see initNavProfile() in
     main.js). Hover-opens like the "Hosting" nav dropdown above, but
     right-aligned since it sits at the edge of the bar instead of under a
     centred nav item. */
  .nav-profile{position:relative;}
  .nav-profile-trigger{
    display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
    font-family:inherit;color:var(--ink);text-decoration:none;
  }
  .nav-profile-avatar{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;overflow:hidden;
    background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;
  }
  .nav-profile-avatar img{width:100%;height:100%;object-fit:cover;}
  .nav-profile-name{font-weight:600;font-size:13.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nav-profile-trigger .chev{flex-shrink:0;color:var(--muted);transition:.2s;}
  .nav-profile:hover .nav-profile-trigger .chev{transform:rotate(180deg);}
  .nav-profile-dropdown{
    left:auto;right:0;top:calc(100% + 10px);
    transform:translateY(8px);min-width:230px;padding:8px;
  }
  .nav-profile:hover .nav-profile-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-profile-dropdown a{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13.5px;}
  .nav-profile-dropdown .npd-icon{width:16px;height:16px;flex-shrink:0;color:var(--muted);}
  .nav-profile-dropdown a:hover .npd-icon{color:var(--primary);}
  .nav-profile-dropdown hr{border:none;border-top:1px solid var(--line);margin:6px 4px;}
  .nav-profile-dropdown #navLogoutBtn{color:#c0392b;}
  .nav-profile-dropdown #navLogoutBtn:hover{background:#fdecec;color:#c0392b;}
  .nav-profile-dropdown #navLogoutBtn .npd-icon{color:#c0392b;}

  /* Currency selector (public/js/currency.js) — light nav variant, sits in
     the slot that used to hold the "Talk to Sales" button. */
  .currency-toggle{position:relative;flex-shrink:0;}
  .currency-toggle-btn{display:flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px;color:var(--text);
    background:transparent;border:1.5px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;transition:.2s;}
  .currency-toggle-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);}
  .currency-flag{font-size:14px;line-height:1;}
  .currency-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:14px;
    box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:8px;min-width:260px;width:max-content;max-width:300px;max-height:460px;overflow-y:auto;z-index:210;}
  .currency-dropdown.open{display:block;}
  .currency-option{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
    border:none;background:none;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;transition:.15s;white-space:nowrap;}
  .currency-option:hover{background:var(--bg-soft);}
  .currency-option.active{background:var(--primary-light);color:var(--primary);}
  .currency-option-code{font-weight:700;min-width:34px;flex-shrink:0;}
  .currency-option-name{color:var(--muted);font-weight:500;white-space:nowrap;}
  .currency-option.active .currency-option-name{color:var(--primary);}
  .btn-outline-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);}
  .btn-outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.08);}
  .burger{display:none;}

  /* Domain search strip — light card floating on a soft tinted band right
     under the header (no dark background). Name field + TLD picker + a
     live price badge that updates as the extension changes, so price is
     visible before the customer even searches. Results drop into their
     own card below rather than floating over the hero, so this can never
     repeat the mid-card overlap bug from earlier. */
  .domain-strip{
    position:relative;z-index:150;padding:22px 0;
    background:var(--bg-soft);
    border-bottom:1px solid var(--line);
  }
  .domain-search-card{
    max-width:920px;margin:0 auto;
    background:#fff;border:1.5px solid var(--line);border-radius:20px;
    box-shadow:var(--shadow-md);padding:7px;transition:box-shadow .2s, border-color .2s;
  }
  .domain-search-card:focus-within{border-color:var(--primary);box-shadow:var(--shadow-lg);}
  .domain-search-form{display:flex;align-items:center;}
  .dsf-icon{color:var(--muted);flex-shrink:0;display:flex;padding-left:12px;}
  .dsf-icon svg{width:18px;height:18px;}
  .domain-search-form input{
    flex:1;min-width:0;border:none;outline:none;background:transparent;
    font-size:15px;font-weight:600;color:var(--ink);padding:13px 10px;
  }
  .domain-search-form input::placeholder{color:var(--muted);font-weight:500;}
  .dsf-divider{width:1px;height:24px;background:var(--line);flex-shrink:0;}
  .dsf-ext{position:relative;flex-shrink:0;display:flex;align-items:center;}
  .dsf-ext select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    border:none;background:transparent;font:inherit;
    font-size:14.5px;font-weight:700;color:var(--primary);
    padding:13px 24px 13px 14px;cursor:pointer;outline:none;
  }
  .dsf-ext svg{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;width:11px;height:11px;color:var(--muted);}
  .dsf-price{
    flex-shrink:0;font-size:13px;font-weight:700;color:var(--accent-dark);
    background:var(--primary-light);padding:8px 13px;border-radius:20px;
    white-space:nowrap;margin:0 6px;
  }
  .dsf-price small{font-weight:600;color:var(--muted);}
  .dsf-btn{border-radius:14px;padding:13px 24px;flex-shrink:0;}
  .dsf-btn:disabled{opacity:.7;cursor:default;transform:none;}
  .domain-strip-note{text-align:center;margin:14px 0 0;font-size:13.5px;color:var(--muted);font-weight:600;}
  .domain-strip-note b{color:var(--ink);}
  .domain-strip-note a{color:var(--primary);text-decoration:underline;font-weight:600;}
  .domain-strip-note a:hover{color:var(--primary-dark);}

  /* Domain Pricing page — same strip band as the search bar above, just
     with a short heading ahead of the search card instead of jumping
     straight into the form (this page opens on pricing, not a live
     search). */
  .domain-pricing-kicker{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.04em;
    margin-bottom:10px;
  }
  .domain-pricing-kicker svg{width:16px;height:16px;}
  .domain-pricing-title{text-align:center;font-size:34px;font-weight:700;color:var(--ink);line-height:1.2;margin:0 0 8px;}
  .domain-pricing-sub{text-align:center;font-size:15px;color:var(--muted);font-weight:500;margin:0 0 22px;}
  @media (max-width:640px){
    .domain-pricing-title{font-size:26px;}
  }

  /* Register-a-domain page — card-contained hero header, matching the
     client panel's own "Register New Domain" page: a bordered white card
     with an outlined eyebrow pill + left-aligned heading + a small solid
     icon badge floating top-right, sitting on a soft tinted page backdrop.
     Scoped to .domreg-page-* so the shared .domain-strip/.domain-pricing-
     kicker classes (still used by the homepage + /domain-search) are
     untouched. */
  #domregPage{background:var(--bg-soft);}
  .domreg-page-wrap{padding:36px 0 0;}
  .domreg-page-hero{
    max-width:920px;margin:0 auto 22px;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px 30px;
    display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
  }
  .domreg-page-kicker{
    display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--primary);
    text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--line);border-radius:20px;
    padding:6px 13px;margin-bottom:12px;
  }
  .domreg-page-kicker svg{width:14px;height:14px;}
  .domreg-page-hero h1{font-size:26px;font-weight:700;color:var(--ink);line-height:1.3;margin:0 0 6px;}
  .domreg-page-hero p{color:var(--muted);font-size:14px;font-weight:500;max-width:480px;margin:0;}
  .domreg-page-icon{
    width:44px;height:44px;border-radius:var(--radius-md);background:var(--primary);color:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(59,91,253,.25);
  }
  .domreg-page-icon svg{width:19px;height:19px;}
  .domreg-page-wrap .domain-search-card{max-width:920px;margin:0 auto;}
  .domreg-page-wrap .domain-strip-note{margin:16px 0 0;}
  .domreg-page-wrap .domain-results-section{padding:36px 0 100px;}
  @media(max-width:640px){
    .domreg-page-hero{padding:22px 20px;}
    .domreg-page-hero h1{font-size:22px;}
  }

  /* Domain Pricing page — footnote under the full TLD list. */
  .dsg-footnote{text-align:center;font-size:13px;color:var(--muted);font-weight:600;margin:20px 0 0;}
  .dsg-footnote a{color:var(--primary);text-decoration:underline;font-weight:600;}
  .dsg-footnote a:hover{color:var(--primary-dark);}

  /* Public /domain-search results page — single-domain result card plus an
     alternate-TLD suggestions grid, both driven by public/js/domain-search-page.js
     hitting the no-login /api/public/domain-search + /domain-suggestions. */
  .domain-results-section{padding:56px 0 100px;}
  /* Mirrors .domain-search-card's own box model exactly (max-width:920px,
     margin:0 auto, no extra side padding) so the results column's outer
     edges land flush with the search box above it instead of sitting
     inset by the .container's usual 28px gutter. */
  .domain-results-inner{max-width:920px;margin:0 auto;}
  .domain-result-card{
    background:#fff;border:1.5px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow-md);overflow:hidden;
    animation:drcIn .35s ease both;
  }
  @keyframes drcIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  /* Two-tone card: a flat, softly-tinted status zone on top (color signals
     available/taken at a glance) sitting on a plain white body below —
     tint, not a gradient, so it stays inside the site's flat-color rule. */
  .drc-top{display:flex;align-items:center;gap:16px;padding:26px 30px;background:var(--bg-soft);}
  .domain-result-card.is-available .drc-top{background:#f1fbf9;}
  .domain-result-card.is-taken .drc-top{background:#fdf3f2;}
  .domain-result-card.is-error .drc-top{background:#fff8ec;}
  .drc-icon{
    width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    background:#fff;animation:drcPop .4s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes drcPop{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
  .drc-icon svg{width:23px;height:23px;}
  .drc-icon.loading{color:var(--primary);box-shadow:0 0 0 5px rgba(59,91,253,.1);}
  .drc-icon.available{color:var(--accent-dark);box-shadow:0 0 0 5px rgba(0,168,146,.12);}
  .drc-icon.taken{color:#c0392b;box-shadow:0 0 0 5px rgba(192,57,43,.1);}
  .drc-icon.error{color:#b8860b;box-shadow:0 0 0 5px rgba(184,134,11,.1);}
  /* Checkmark/X "draw itself in" rather than just appearing — classic
     stroke-dasharray trick: hide the stroke by offsetting it its own full
     length, then animate the offset back to 0. Timed to start just after
     the circle's pop-in (.15s delay) so the two motions read as one
     sequence. Path lengths measured from each icon's own coordinates. */
  .drc-icon.available svg path{
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:26;stroke-dashoffset:26;
    animation:drcDraw .4s ease .15s forwards;
  }
  .drc-icon.taken svg line{
    stroke-linecap:round;
    stroke-dasharray:17;stroke-dashoffset:17;
    animation:drcDraw .3s ease forwards;
  }
  .drc-icon.taken svg line:last-child{animation-delay:.18s;}
  @keyframes drcDraw{to{stroke-dashoffset:0;}}
  @media (prefers-reduced-motion: reduce){
    .domain-result-card, .drc-icon, .drc-icon.available svg path, .drc-icon.taken svg line{animation:none;}
  }
  .drc-info{flex:1;min-width:0;}
  .drc-domain{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:700;color:var(--ink);word-break:break-word;}
  .drc-tld{color:var(--primary);}
  .drc-copy{
    width:26px;height:26px;border-radius:8px;border:none;background:transparent;
    color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;
  }
  .drc-copy svg{width:14px;height:14px;}
  .drc-copy:hover{background:#fff;color:var(--primary);}
  .drc-copy.copied{color:var(--accent-dark);}
  .drc-status-text{font-size:14px;color:var(--muted);font-weight:600;margin-top:3px;}
  .drc-status-text b{color:var(--ink);}
  .drc-badge{flex-shrink:0;font-size:12px;font-weight:700;padding:6px 14px;border-radius:var(--radius-sm);letter-spacing:.02em;background:#fff;}
  .drc-badge.available{color:var(--accent-dark);}
  .drc-badge.taken{color:#c0392b;}
  /* Badge stacked directly above the price on the right side of the status
     zone — "Available" reads first, the number right under it. */
  .drc-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
  .drc-price-tag{background:#fff;border-radius:14px;padding:9px 16px;display:flex;align-items:baseline;gap:4px;}
  .drc-price-amount{font-size:21px;font-weight:700;color:var(--ink);}
  .drc-price-period{font-size:12.5px;color:var(--muted);font-weight:600;}
  .drc-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 30px 26px;}
  .drc-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .drc-cta{display:inline-flex;align-items:center;gap:8px;}
  .drc-cta svg{width:15px;height:15px;transition:transform .2s;}
  .drc-cta:hover svg{transform:translateX(3px);}
  .drc-hint{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12.5px;color:var(--muted);font-weight:600;
    background:var(--bg-soft);padding:8px 14px;border-radius:20px;
  }

  /* Alternate-TLD suggestions — category filter tabs (reusing .tab-btn)
     above a simple bordered row list, not a card grid. */
  .domain-sugg-label{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 12px;}
  .domain-sugg-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .domain-sugg-tabs .tab-btn{padding:8px 16px;font-size:13px;border-radius:20px;}
  .domain-sugg-list{
    background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;
  }
  .dsg-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 18px;border-bottom:1px solid var(--line);
    font-weight:600;font-size:14.5px;color:var(--ink);
    transition:background .15s;flex-wrap:wrap;
  }
  .dsg-row:last-child{border-bottom:none;}
  .dsg-row:hover{background:var(--bg-soft);}
  .dsg-row.taken{color:var(--muted);}
  .dsg-left{
    display:flex;align-items:center;gap:11px;min-width:0;flex:1;
    color:inherit;text-decoration:none;padding:5px 0;
  }
  a.dsg-left:hover .dsg-domain{text-decoration:underline;}
  .dsg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .dsg-dot.avail{background:var(--accent-dark);}
  .dsg-dot.taken{background:var(--line);}
  .dsg-domain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dsg-ext{color:var(--primary);font-weight:700;}
  .dsg-row.taken .dsg-ext{color:var(--muted);}
  .dsg-meta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .dsg-price{font-size:13.5px;font-weight:600;color:var(--ink);}
  .dsg-row.taken .dsg-price{color:var(--muted);font-weight:600;}
  .dsg-tag{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg-soft);padding:3px 10px;border-radius:var(--radius-sm);}
  .dsg-buy{padding:7px 16px;font-size:12.5px;border-radius:9px;white-space:nowrap;}
  /* Placeholder rows shown the instant a search starts, while the real
     Other Extensions data is still loading — flat pulse (opacity fade),
     no gradient shimmer, matching the site's flat-color rule. */
  .dsg-skeleton{pointer-events:none;}
  .dsg-skel-bar{display:block;height:13px;border-radius:6px;background:var(--bg-soft);animation:dsgPulse 1.2s ease-in-out infinite;}
  .dsg-skel-name{width:150px;}
  .dsg-skel-price{width:56px;}
  @keyframes dsgPulse{0%,100%{opacity:1;}50%{opacity:.4;}}

  /* HERO — dark, bold "flagship brand" treatment (Hostinger/Bluehost/
     DreamHost all anchor their homepage on a dark, high-contrast hero for
     gravitas — HostyXo's was plain white, which read as a small/generic
     site next to those). Same two-column layout and content as before —
     checklist → price → CTA → guarantee → rating on the left, photo card
     on the right — just restyled for a near-black flat background. Still
     zero gradients: the dark fill is a single flat colour token. */
  .hero{
    position:relative;overflow:hidden;
    padding:56px 0 0;
    background:#fff;
  }
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .92fr;gap:70px;align-items:start;padding-bottom:76px;}
  .hero h1{font-size:58px;line-height:1.12;margin:16px 0 24px;color:var(--ink);letter-spacing:-.03em;}
  .hero h1 .grad{color:var(--primary);}

  /* Plain checklist — 2x2 grid, seal/badge outline icon, mostly-regular text
     with just the key phrase bolded (not the whole line). */
  .hero-checklist{list-style:none;display:grid;grid-template-columns:repeat(2,auto);column-gap:34px;row-gap:14px;margin-bottom:30px;}
  .hero-checklist li{
    display:flex;align-items:center;gap:9px;
    font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap;
  }
  .hero-checklist li b{color:var(--ink);font-weight:600;}
  .hc-ico{width:19px;height:19px;flex-shrink:0;display:flex;color:var(--accent-dark);}
  .hc-ico svg{width:100%;height:100%;}

  .hero-price-block{margin-bottom:28px;}
  .hpb-label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em;}
  .hpb-row{display:flex;align-items:baseline;gap:2px;}
  .hpb-currency{font-size:22px;font-weight:700;color:var(--ink);}
  .hpb-amount{font-size:48px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em;}
  .hpb-per{font-size:14px;color:var(--muted);font-weight:600;margin-left:2px;}
  .hpb-note{font-size:12.5px;color:var(--muted);font-weight:600;margin-left:10px;}

  .hero-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px;}

  .hero-guarantee{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);font-weight:600;margin-bottom:24px;}
  .hero-guarantee svg{width:17px;height:17px;color:var(--accent-dark);flex-shrink:0;}
  .hero-guarantee b{color:var(--ink);}

  .hero-rating{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);font-weight:600;}
  .hero-rating-avatars{display:flex;flex-shrink:0;}
  .hero-rating-avatars .ra{
    width:27px;height:27px;border-radius:50%;margin-left:-9px;border:2px solid #fff;
    background:var(--primary);color:#fff;font-size:10.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-rating-avatars .ra:first-child{margin-left:0;}
  .hero-stars{color:#f5a623;letter-spacing:1px;}
  .hero-rating b{color:var(--ink);}

  .hero-visual{position:relative;padding:24px;}

  /* Light photo card + rotating task list — same interaction pattern the
     client pointed at (siteground.com's hero): a stack of pills cycling
     through an "active" slot, scaling/fading by distance instead of
     literally scrolling. Own copy, own icons, own photo (licensed,
     Unsplash) — same mechanism, not the same asset. Dark glass pills over
     a real photo to match the dark hero. */
  .hv-photo-card{
    position:relative;border-radius:28px;box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;
    height:460px;
  }
  .hv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;}
  .hv-photo-overlay{
    position:absolute;inset:0;
    background:rgba(7,12,30,.4);
  }
  .hv-rotator{position:absolute;inset:0;z-index:1;}
  .hv-pill{
    position:absolute;top:50%;left:50%;
    display:flex;align-items:center;gap:12px;white-space:nowrap;
    background:rgba(7,12,30,.55);border:1px solid rgba(255,255,255,.14);
    border-radius:16px;padding:13px 20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    color:rgba(255,255,255,.65);font-weight:600;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.2);
    transition:transform 1.25s ease-in-out, opacity 1.25s ease-in-out, background-color .4s, border-color .4s;
  }
  .hv-pill-icon{width:18px;height:18px;flex-shrink:0;display:flex;}
  .hv-pill-icon svg{width:100%;height:100%;}
  .hv-pill-check{
    width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transform:scale(.5);
    transition:opacity .3s ease .3s, transform .3s ease .3s;
  }
  .hv-pill-check svg{width:12px;height:12px;}
  .hv-pill.active{
    background:rgba(7,12,30,.88);border-color:rgba(255,255,255,.28);
    color:#fff;font-size:16px;padding:16px 24px;box-shadow:0 16px 32px -12px rgba(0,0,0,.5);
  }
  .hv-pill.active .hv-pill-icon{color:var(--accent);}
  .hv-pill.active .hv-pill-check{opacity:1;transform:scale(1);}

  .float-badge{position:absolute;background:#fff;color:var(--ink);border-radius:14px;padding:12px 16px;box-shadow:0 16px 34px rgba(0,0,0,.35);border:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;z-index:2;}
  .float-badge svg{width:20px;height:20px;color:var(--accent-dark);flex-shrink:0;}
  .float-badge.b1{top:0;right:-6px;}
  .float-badge.b2{bottom:0;left:-6px;}

  /* TRUST STRIP — rating line + auto-scrolling logo marquee right under
     the hero. The mask-image edge fade is a functional scroll-affordance
     technique (opacity only, no color), not decorative — same spirit as
     .dc-bg's line-pattern background, still zero color gradients/blur. */
  .trust-strip{padding:52px 0 60px;background:#fff;overflow:hidden;}
  .trust-rating{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:38px;text-align:center;}
  .trust-rating-label{font-size:15.5px;color:var(--muted);}
  .trust-rating-label b{color:var(--ink);}
  .trust-stars{color:#f5a623;letter-spacing:2px;font-size:16px;}
  .trust-rating-sub{font-size:14px;color:var(--muted);}
  .trust-logos-scroller{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  }
  .trust-logos-track{display:flex;align-items:center;gap:64px;width:max-content;list-style:none;margin:0;padding:0 32px;animation:trustLogosScroll 34s linear infinite;}
  .trust-logos-scroller:hover .trust-logos-track{animation-play-state:paused;}
  .trust-logo{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink);opacity:.4;white-space:nowrap;transition:opacity .2s;}
  .trust-logo:hover{opacity:1;}
  .trust-logo svg{width:22px;height:22px;flex-shrink:0;}
  .trust-logo.serif{font-family:Georgia,'Times New Roman',serif;}
  .trust-logo.script{text-transform:lowercase;font-weight:600;}
  @keyframes trustLogosScroll{0%{transform:translateX(0);}100%{transform:translateX(calc(-50% - 32px));}}
  @media (prefers-reduced-motion: reduce){.trust-logos-track{animation:none;}}
  @media(max-width:600px){
    .trust-strip{padding:40px 0 48px;}
    .trust-rating{gap:8px 12px;margin-bottom:28px;}
    .trust-rating-label,.trust-rating-sub{font-size:13.5px;}
    .trust-logos-track{gap:40px;}
    .trust-logo{font-size:16px;}
    .trust-logo svg{width:18px;height:18px;}
  }

  /* STATEMENT — one big, confident line of type instead of another card
     grid, for visual rhythm (see DreamHost "Built Differently", Hostinger
     "From idea to online, quicker and slicker", Bluehost "Simple.
     Affordable. No surprises."). Flat brand colour on the accent phrase,
     no gradient, no card. */
  .statement-band{padding:60px 0 68px;text-align:center;}
  .statement-text{font-size:52px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.15;max-width:900px;margin:0 auto;}
  .statement-text span{color:var(--primary);}
  @media(max-width:980px){.statement-text{font-size:36px;}}
  @media(max-width:600px){.statement-text{font-size:28px;}}

  /* STATS — flat divided number strip (no card boxes/shadows) with thin
     vertical dividers between items, closer to Hostinger's plain stat bar
     than a grid of bordered tiles. */
  .stats{background:var(--bg-soft);padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .stats .container{display:flex;align-items:center;}
  .stat-box{position:relative;flex:1;text-align:center;background:transparent;border:none;box-shadow:none;padding:0 16px;transition:none;overflow:visible;}
  .stat-box::before{display:none;}
  .stat-box:not(:last-child)::after{content:"";position:absolute;top:8px;right:0;bottom:8px;width:1px;background:var(--line);}
  .stat-box:hover{transform:none;box-shadow:none;border-color:transparent;}
  .stat-box b{font-size:38px;font-weight:800;display:block;color:var(--ink);letter-spacing:-.03em;}
  .stat-box span{font-size:13px;color:var(--muted);font-weight:600;}

  /* PRICING */
  #pricing{background:var(--bg-soft);}
  .toggle-row{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:48px;flex-wrap:wrap;}
  .pill-toggle{display:flex;background:#fff;border-radius:30px;padding:6px;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
  .pill-toggle button{border:none;background:transparent;padding:10px 22px;border-radius:24px;font-weight:600;cursor:pointer;color:var(--muted);font-size:14.5px;transition:.2s;}
  .pill-toggle button.active{background:var(--primary);color:#fff;}
  .save-tag{background:#fff;color:var(--primary);font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);}

  .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;}
  .plan{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 26px;background:#fff;display:flex;flex-direction:column;transition:.25s;overflow:hidden;box-shadow:var(--shadow-sm);}
  .plan::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
  .plan:hover::before{transform:scaleX(1);}
  .plan:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
  .plan.popular::before{background:var(--accent);transform:scaleX(1);}
  .plan-badge{position:absolute;top:22px;right:22px;background:var(--primary-light);color:var(--primary);font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:20px;}
  /* Elevated "featured plan" device — scaled up and lifted above the row
     (not just a darker card) so it visually breaks out of the grid rather
     than sitting flush with its neighbours. */
  .plan.popular{background:var(--hero-dark);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px rgba(7,12,30,.35);padding-bottom:26px;transform:translateY(-18px);z-index:2;}
  .plan.popular:hover{transform:translateY(-22px);}
  .plan.popular .plan-badge{background:var(--primary);color:#fff;display:flex;align-items:center;gap:5px;}
  .plan.popular h3,.plan.popular .price,.plan.popular .per{color:#fff;}
  .plan.popular .desc{color:rgba(255,255,255,.62);}
  .plan.popular .old-price{color:rgba(255,255,255,.4);}
  .plan.popular .renew{color:rgba(255,255,255,.5);}
  .plan.popular hr{border-color:rgba(255,255,255,.1);}
  .plan.popular ul li{color:rgba(255,255,255,.85);}
  .plan.popular ul li.no{color:rgba(255,255,255,.32);}
  .plan-icon{width:44px;height:44px;border-radius:12px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .plan.popular .plan-icon{background:rgba(255,255,255,.1);color:var(--accent);}
  .plan-icon svg{width:22px;height:22px;}
  .plan h3{font-size:19px;margin-bottom:6px;}
  .plan .desc{color:var(--muted);font-size:13.5px;margin-bottom:22px;min-height:34px;}
  .plan .old-price{color:var(--muted);font-size:14px;text-decoration:line-through;margin-bottom:2px;}
  .plan .price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:18px;}
  .plan .price{font-size:34px;font-weight:600;color:var(--ink);}
  .plan .per{color:var(--muted);font-size:14px;font-weight:600;}
  .plan .renew{color:var(--muted);font-size:12px;margin:14px 0 18px;line-height:1.5;}
  .plan hr{border:none;border-top:1px solid var(--line);margin:0 0 18px;}
  .plan ul{margin:0 0 8px;flex:1;}
  .plan ul li{padding:7px 0;font-size:13.8px;display:flex;gap:10px;align-items:flex-start;color:var(--text);}
  .plan ul li svg{width:16px;height:16px;color:var(--accent-dark);flex:none;margin-top:2px;}
  .plan ul li.no{color:var(--muted);}
  .plan ul li.no .dash{width:16px;text-align:center;color:#c4cad6;font-weight:700;flex:none;}
  /* Feature lists run 20+ items on most plans — only the first 10 (see
     VISIBLE_FEATURE_COUNT in site-content.js) show by default so the
     cards stay a readable height; the rest collapse behind this toggle
     row and reveal per-card via the .expanded class (see
     initFeatureToggle in site-content.js). */
  .plan ul li.feat-extra{display:none;}
  .plan.expanded ul li.feat-extra{display:flex;}
  .plan ul li.feat-toggle{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:12px 0 2px;margin-top:4px;border-top:1px dashed var(--line);
    color:var(--primary);font-weight:600;font-size:13px;cursor:pointer;user-select:none;
  }
  .plan ul li.feat-toggle svg{width:14px;height:14px;color:inherit;margin-top:0;transition:transform .2s;}
  .plan ul li.feat-toggle .feat-toggle-less{display:none;}
  .plan.expanded ul li.feat-toggle .feat-toggle-more{display:none;}
  .plan.expanded ul li.feat-toggle .feat-toggle-less{display:inline;}
  .plan.expanded ul li.feat-toggle svg{transform:rotate(180deg);}
  .plan.popular ul li.feat-toggle{border-top-color:rgba(255,255,255,.15);color:var(--accent);}
  .why-plan{margin-top:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 18px;}
  .why-plan b{display:block;color:var(--accent);font-size:12.5px;margin-bottom:4px;}
  .why-plan p{color:rgba(255,255,255,.7);font-size:12.8px;}
  .pricing-note{text-align:center;color:var(--muted);font-size:12.5px;margin-top:36px;line-height:1.8;}
  .pricing-note a{color:var(--primary);font-weight:600;}

  /* PLAN COMPARISON TABLE — "Compare our web hosting plans", rebuilt to
     track the reference's actual computed styles line for line (measured
     directly off the live pixellyo page via devtools) instead of a rough
     approximation: the guarantee column is plain text with NO card/border
     (it's literally just thead th padding in the reference, not a boxed
     sidebar), checklist icons are plain inline glyphs with no circle
     backdrop, "Save X%" is plain bold text with no pill, and row/label
     type sizes match the measured 16px/500 label + 14px/400 value. Prices/
     CTA still share .yearly-price/.monthly-price/.yearly-term-note/
     .plan-cta with the cards above so main.js's setBilling() drives both
     in sync. Distinct .pc- prefix so nothing collides with the unrelated
     .compare-table (brand-vs-competitor) section further down. */
  /* Re-measured 2026-08-10 directly off https://localhost.pixellyo.com/html/reseller-hosting.html
     via devtools computed styles (getComputedStyle on the live nodes),
     since the earlier hand-eyeballed pass from a screenshot missed several
     exact values. Key corrections vs. the previous attempt:
     - It's ONE <table>: the guarantee block is the thead's first <th>
       (vertical-align:middle, 8px padding), not a separate flex sidebar
       next to the table — so it now lives inside #pcTable itself.
     - No outer "panel" background at all — the reference has no boxed
       wrapper around guarantee+table; rows are plain, sitting on the
       page background.
     - Zebra striping is a real measured hex (#F1EBFE) on ODD rows only
       (nth-child(odd)), even rows fully transparent — not the reverse,
       and NOT rounded pill rows (border-radius:0 on cells).
     - Row label is font-weight:500 (medium), not 700 (bold).
     - Bool icons are semantic green/red (#17C653 / #F8285A measured off
       icon-park-solid:check-one / mdi:cross-circle), not our teal accent.
     - Guarantee checkmark circle is dark grey (#495058), not navy.
     - Card has NO border/shadow — flat white, border-radius:8px, padding:24px.
     - Buy Now button: border-radius:4px, padding:4px 16px, font-weight:500
       (kept on our own var(--primary) instead of their blue, per brand). */
  .pc-table-wrap{overflow-x:auto;}
  .pc-table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px;}
  .pc-table thead th{padding:8px;vertical-align:middle;}
  .pc-guarantee-cell{text-align:left;width:32%;}
  .pc-guarantee-title{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:16px;}
  .pc-guarantee-cell ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
  .pc-guarantee-cell li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.5;}
  .pc-guarantee-cell li b{color:var(--ink);}
  .pc-check{flex-shrink:0;width:18px;height:18px;color:#495058;margin-top:1px;}

  /* Cards need their own visible fill since our page bg is plain white
     (unlike the reference site, whose whole page sits on a lavender bg —
     white-on-white cards here would be invisible). Flat brand tint, no
     gradient/border needed. */
  .pc-card{background:var(--primary-light);border-radius:8px;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;}
  .pc-card-name{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:16px;}
  .pc-card-price{font-size:36px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
  .pc-card-per{display:block;font-size:14px;color:var(--ink);margin-bottom:16px;}
  .pc-card-save{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px;}
  .pc-card-note{font-size:12px;color:var(--muted);line-height:1.4;margin-bottom:20px;}
  .pc-card-btn{width:auto;min-width:110px;padding:4px 16px;font-size:14px;font-weight:500;border-radius:4px;}

  .pc-row-label{text-align:left;font-weight:500;color:var(--ink);font-size:16px;white-space:nowrap;padding:12px 24px;}
  .pc-table tbody td{text-align:center;font-size:14px;font-weight:400;color:var(--ink);padding:12px 24px;}
  .pc-table tbody tr:nth-child(odd){background:#f1ebfe;}
  .pc-yes{color:#17c653;}
  .pc-no{color:#f8285a;}
  .pc-yes svg,.pc-no svg{width:18px;height:18px;}

  @media(max-width:980px){
    .pc-guarantee-cell{width:auto;}
  }
  @media(max-width:640px){
    .pc-card{padding:18px 12px;}
    .pc-card-price{font-size:26px;}
  }

  /* FEATURES — v2: "colorful soft cards". Scrapped the dark-bento take
     entirely per client feedback. Each card gets its own soft pastel
     tint + saturated icon color, cycling through a 6-color flat palette
     (same exact hex pairs already used for the client-dashboard stat
     cards — --sc-accent/--sc-bg — so this isn't a new color system, just
     reused elsewhere). Every color here is a flat solid fill; still zero
     linear-gradient/radial-gradient per [[feedback_no_gradients_flat_brand_color]].
     Playfulness comes from the color variety + a gentle hover tilt, not
     from gradients or blur. */
  .features-bg{background:#fff;}
  .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .feature-card{
    background:var(--fc-bg,var(--primary-light));border-radius:26px;padding:36px 30px;
    box-shadow:0 1px 2px rgba(17,24,39,.05);
    transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
  }
  .feature-card:hover{box-shadow:0 22px 44px -14px rgba(17,24,39,.22);}
  .feature-card:nth-child(odd):hover{transform:translateY(-8px) rotate(-1.1deg);}
  .feature-card:nth-child(even):hover{transform:translateY(-8px) rotate(1.1deg);}
  .feature-card .icon{
    width:60px;height:60px;border-radius:50%;background:var(--fc-fg,var(--primary));
    display:flex;align-items:center;justify-content:center;margin-bottom:22px;
    box-shadow:0 12px 22px -8px rgba(var(--fc-shadow,59,91,253),.55);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .feature-card:hover .icon{transform:scale(1.08) rotate(-6deg);}
  .feature-card .icon svg{width:26px;height:26px;color:#fff;}
  .feature-card h3{font-size:17.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:9px;}
  .feature-card p{color:var(--text);font-size:14px;line-height:1.65;opacity:.75;}

  /* 6-color flat palette, cycling every six cards. */
  .features-grid .feature-card:nth-child(6n+1){--fc-bg:#eef1ff;--fc-fg:#3b5bfd;--fc-shadow:59,91,253;}
  .features-grid .feature-card:nth-child(6n+2){--fc-bg:#fdeef6;--fc-fg:#ec4899;--fc-shadow:236,72,153;}
  .features-grid .feature-card:nth-child(6n+3){--fc-bg:#e6faf5;--fc-fg:#00b8a0;--fc-shadow:0,184,160;}
  .features-grid .feature-card:nth-child(6n+4){--fc-bg:#f3eefe;--fc-fg:#8b5cf6;--fc-shadow:139,92,246;}
  .features-grid .feature-card:nth-child(6n+5){--fc-bg:#fff4e0;--fc-fg:#f59e0b;--fc-shadow:245,158,11;}
  .features-grid .feature-card:nth-child(6n+6){--fc-bg:#fdecec;--fc-fg:#e5484d;--fc-shadow:229,72,77;}

  @media(max-width:900px){
    .features-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:600px){
    .features-grid{grid-template-columns:1fr;}
  }

  /* CONTROL PANEL TABS — pill-shaped segmented control instead of square
     tabs, and the dark preview card's rows now use small brand-coloured
     SVG icons (matching the icon language used everywhere else on the
     page) instead of emoji glyphs. Rev.2: soft-gray section backdrop
     (.panel-bg, same flat var(--bg-soft) used by .solutions-bg — no new
     color), a lead paragraph, colored icon chips on both the tabs and the
     checklist ticks, colored icon chips on the dashboard-mockup rows, and
     a live pulse ring on the "Secured" status — all reusing the exact
     6-color flat palette already defined for .feature-card, plus the
     .float-badge component from the hero. Flat colors only, no gradients,
     no blur — same rule as the rest of the site. */
  .panel-bg{background:var(--bg-soft);}
  .panel-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
  .panel-lead{color:var(--muted);font-size:16px;line-height:1.7;margin:14px 0 28px;max-width:460px;}
  .tabs{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap;}
  .tab-btn{display:inline-flex;align-items:center;gap:9px;padding:8px 20px 8px 8px;border-radius:30px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;transition:.2s;}
  .tab-btn.active{border-color:var(--primary);color:#fff;background:var(--primary);}
  .tab-btn-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .tab-btn-icon svg{width:13px;height:13px;}
  .tbi-1{background:#f59e0b;}
  .tbi-2{background:#3b5bfd;}
  .tbi-3{background:#8b5cf6;}
  .tbi-4{background:#00b8a0;}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;animation:fadein .3s ease;}
  @keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .tab-panel h3{font-size:22px;margin-bottom:12px;}
  .tab-panel p{color:var(--muted);margin-bottom:18px;font-size:15px;}
  .tab-panel ul li{display:flex;align-items:flex-start;gap:12px;padding:6px 0;font-size:14.5px;}
  .tp-check{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
  .tp-check svg{width:11px;height:11px;}
  #tab-cpanel .tp-check{background:#f59e0b;}
  #tab-da .tp-check{background:#3b5bfd;}
  #tab-plesk .tp-check{background:#8b5cf6;}
  #tab-vps .tp-check{background:#00b8a0;}
  .panel-visual-wrap{position:relative;padding:22px;}
  .panel-visual{background:#0f1734;border-radius:22px;padding:20px 26px 26px;box-shadow:var(--shadow-lg);}
  /* Browser-chrome header — traffic-light dots + a fake URL pill so the
     dark card reads as a dashboard screenshot rather than a floating list
     (inspired by GoDaddy's dashboard-mockup hero visual). */
  .pv-chrome{display:flex;align-items:center;gap:6px;margin:0 -2px 20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);}
  .pv-chrome i{width:9px;height:9px;border-radius:50%;display:block;flex:none;}
  .pv-chrome i:nth-child(1){background:#ff5f57;}
  .pv-chrome i:nth-child(2){background:#febc2e;}
  .pv-chrome i:nth-child(3){background:#28c840;}
  .pv-url{margin-left:10px;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);padding:5px 14px;border-radius:20px;flex:1;display:flex;align-items:center;overflow:hidden;}
  /* Typewriter URL bar — text is typed/erased in a loop once the mockup
     scrolls into view (initPanelUrlTyping() in main.js). The full string
     is already in the markup so it degrades gracefully with JS off /
     prefers-reduced-motion (see main.js — it just leaves it static). */
  .pv-url-text{white-space:nowrap;overflow:hidden;}
  .pv-url-cursor{display:inline-block;width:1.5px;height:11px;margin-left:2px;background:rgba(255,255,255,.55);flex-shrink:0;animation:pvCursorBlink .9s step-end infinite;}
  @keyframes pvCursorBlink{0%,100%{opacity:1;}50%{opacity:0;}}
  @media (prefers-reduced-motion: reduce){.pv-url-cursor{animation:none;opacity:0;}}
  .panel-visual .row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 10px 10px;border-radius:12px;background:rgba(255,255,255,.05);margin-bottom:10px;color:#fff;font-size:13.5px;transition:background .2s;}
  .panel-visual .row:hover{background:rgba(255,255,255,.09);}
  .panel-visual .row b{color:#fff;}
  .panel-visual .pv-label{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);}
  .pv-icon-chip{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pv-icon{width:16px;height:16px;flex-shrink:0;color:#fff;}
  .pvc-1{background:#3b5bfd;}
  .pvc-2{background:#ec4899;}
  .pvc-3{background:#00b8a0;}
  .pvc-4{background:#8b5cf6;}
  .pvc-5{background:#f59e0b;}
  .pvc-6{background:#e5484d;}
  .panel-visual .row .ok{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:700;font-size:12px;background:rgba(0,212,181,.12);padding:4px 10px 4px 8px;border-radius:var(--radius-sm);}
  .pv-live{position:relative;width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}
  .pv-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--accent);animation:pvLivePulse 2s ease-out infinite;}
  @keyframes pvLivePulse{0%{transform:scale(.4);opacity:.8;}100%{transform:scale(2.6);opacity:0;}}

  /* Rev.3 — "smart, stylish, animated" pass on the dashboard mockups.
     .pv-wrap is a SHARED hook (not tied to one section): both the control
     panel mockup and the Cloud Server mockup (.cs-visual) carry this class
     now, and initPanelVisual()/initPanelUrlTyping() in main.js iterate
     document.querySelectorAll('.pv-wrap') generically, so every current
     and future .panel-visual mockup on the page gets the same treatment
     automatically instead of needing its own copy-pasted JS/CSS:
     - rows fade/slide in with a stagger the moment the card scrolls into
       view (.pv-wrap.in-view, toggled per-instance by IntersectionObserver
       in main.js), instead of just appearing static.
     - Disk Usage / CPU Load get a real animated fill bar where the row
       actually represents a percentage (flat brand colors matching their
       icon chip — still no gradients); rows that are static specs (e.g.
       "Memory: 8 GB RAM") skip the bar since there's no % to show.
     - the green traffic-light dot gets the same pvLivePulse ring used on
       "Secured"/"Running", so the mockup reads as a live system, not a
       screenshot.
     - icon chips get a playful scale+rotate on row hover (same springy
       language as .solution-card's icon hover elsewhere on the page).
     - a subtle perspective tilt follows the cursor over the card
       (initPanelVisual() in main.js) — resets smoothly on mouse-leave, and
       is skipped entirely for prefers-reduced-motion / touch.
     - both floating badges get a slow, gentle bob so the whole visual
       feels alive at rest, not just on interaction. */
  .pv-wrap{perspective:1400px;}
  .panel-visual{transition:transform .35s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d;will-change:transform;}
  .panel-visual .row{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1),background .2s;}
  .pv-wrap.in-view .row{opacity:1;transform:translateY(0);}
  .panel-visual .row:nth-child(2){transition-delay:.05s;}
  .panel-visual .row:nth-child(3){transition-delay:.12s;}
  .panel-visual .row:nth-child(4){transition-delay:.19s;}
  .panel-visual .row:nth-child(5){transition-delay:.26s;}
  .panel-visual .row:nth-child(6){transition-delay:.33s;}
  .panel-visual .row:nth-child(7){transition-delay:.4s;}
  .pv-icon-chip{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
  .panel-visual .row:hover .pv-icon-chip{transform:scale(1.1) rotate(-6deg);}
  .row--bar{flex-wrap:wrap;row-gap:9px;padding-bottom:14px;}
  .pv-bar{flex:0 0 100%;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;}
  .pv-bar-fill{display:block;height:100%;width:0;border-radius:3px;transition:width 1.1s .5s cubic-bezier(.22,1,.36,1);}
  .pv-wrap.in-view .pv-bar-fill{width:var(--fill);}
  .pv-bar-2 .pv-bar-fill{background:#ec4899;}
  .pv-bar-5 .pv-bar-fill{background:#f59e0b;}
  .pv-dot-live{position:relative;}
  .pv-dot-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #28c840;animation:pvLivePulse 2s ease-out infinite;}
  .float-badge{animation:pvBadgeFloat 3.6s ease-in-out infinite;}
  .float-badge.b2{animation-delay:.7s;}
  @keyframes pvBadgeFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
  @media (prefers-reduced-motion: reduce){
    .pv-live::after,.pv-dot-live::after,.float-badge{animation:none;}
    .panel-visual{transition:none;transform:none !important;}
    .panel-visual .row{opacity:1;transform:none;transition:none;}
    .pv-bar-fill{transition:none;width:var(--fill);}
  }

  /* HOSTING SOLUTIONS — modelled on the pixellyo "We Provide Hosting
     Solution" section. Rev.2 (client feedback): rebuilt as two explicit
     3-card rows (not a single grid-column:span track) so the "1 big + 2
     small" pattern is guaranteed every row regardless of viewport — row 1
     is big/small/small (2fr 1fr 1fr), row 2 is small/small/big
     (1fr 1fr 2fr). Icons swapped for clearer per-card meaning, sized to
     match the sitewide icon-badge convention (cs-feature-icon/feature-card
     .icon: ~52-60px badge, ~24-26px glyph) and now animate — a continuous
     gentle float on the badge plus a scale+rotate on the glyph on card
     hover. Font sizes aligned to the sitewide card h3/p scale (17px/14.5px
     for feature-card, cs-feature, why-card) instead of one-off sizes.
     Featured cards get an original flat-vector illustration (own artwork,
     not the reference's isometric images — this site's rule, see
     hero-visual, is "clean illustration, no stock photo"). Flat
     var(--primary)/var(--primary-light) only, no gradients. */
  .solutions-bg{background:var(--bg-soft);}
  .solutions-grid{display:flex;flex-direction:column;gap:24px;}
  .solutions-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;align-items:stretch;}
  .solutions-row--trail{grid-template-columns:1fr 1fr 2fr;}
  .solutions-row--trail .solution-card.featured{order:3;}

  .solution-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
  .solution-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
  .solution-card h3{font-size:17px;margin-bottom:8px;}
  .solution-card p{color:var(--muted);font-size:14.5px;line-height:1.7;}

  .solution-card.featured{flex-direction:row;align-items:center;gap:26px;padding:36px;}
  .solution-card.featured .solution-card-body{flex:1;min-width:0;}
  .solution-card.featured h3{font-size:22px;margin-bottom:10px;}
  .solution-card.featured p{font-size:15px;}
  .solution-illustration{width:150px;height:150px;flex:none;}
  .solution-illustration svg{width:100%;height:100%;}
  /* Small (non-featured) cards get a lighter illustration too, pinned to
     the bottom of the card via margin-top:auto so it fills the space the
     row-stretch already gives these shorter cards instead of leaving them
     visually empty next to the big checklist cards. */
  .solution-illustration--sm{width:100%;max-width:172px;height:auto;margin-top:auto;padding-top:18px;margin-left:auto;margin-right:auto;}

  /* Icon animation, rev.2 (client feedback: make it nicer) — the badge now
     drifts AND gently rocks (translateY + rotate) on a slow spring-like
     easing instead of a flat linear float, so it reads as "alive" rather
     than a mechanical bounce. On card hover the badge itself inverts to a
     solid var(--primary) fill (icon turns white) with a soft brand-colour
     glow, the float pauses, and the glyph pops with a springy overshoot
     easing (cubic-bezier back-out) instead of a plain scale — still flat
     colour only, no gradients, just a bigger, more deliberate motion. */
  @keyframes solutionFloat{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-7px) rotate(-4deg);}
  }
  .solution-icon{
    width:52px;height:52px;border-radius:var(--radius-md);background:var(--primary-light);
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;
    animation:solutionFloat 3.6s cubic-bezier(.45,0,.55,1) infinite;
    transition:background .35s ease,box-shadow .35s ease;
  }
  .solution-card.featured .solution-icon{width:58px;height:58px;}
  .solutions-row > *:nth-child(1) .solution-icon{animation-delay:0s;}
  .solutions-row > *:nth-child(2) .solution-icon{animation-delay:.4s;}
  .solutions-row > *:nth-child(3) .solution-icon{animation-delay:.8s;}
  .solution-icon svg{width:24px;height:24px;color:var(--primary);transition:transform .4s cubic-bezier(.34,1.56,.64,1),color .3s ease;}
  .solution-card.featured .solution-icon svg{width:27px;height:27px;}
  .solution-card:hover .solution-icon{
    animation-play-state:paused;background:var(--primary);
    box-shadow:0 12px 24px -8px rgba(59,91,253,.5);
  }
  .solution-card:hover .solution-icon svg{transform:scale(1.2) rotate(-10deg);color:#fff;}

  .solution-check{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px;}
  .solution-check li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);font-weight:500;}
  .solution-check li svg{width:17px;height:17px;flex:none;color:var(--primary);}
  .solution-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:14px;font-weight:700;color:var(--primary);}
  .solution-link svg{width:14px;height:14px;transition:transform .2s;}
  .solution-link:hover{color:var(--primary-dark);}
  .solution-link:hover svg{transform:translateX(3px);}

  @media(max-width:980px){
    .solutions-row,.solutions-row--trail{grid-template-columns:1fr 1fr;}
    .solution-card.featured{grid-column:span 2;order:0;}
    .solution-illustration{width:120px;height:120px;}
  }
  @media(max-width:640px){
    .solutions-row,.solutions-row--trail{grid-template-columns:1fr;}
    .solution-card.featured{grid-column:span 1;flex-direction:column;text-align:center;}
    .solution-card.featured .solution-icon{margin-left:auto;margin-right:auto;}
  }

  /* WHY US — staggered card wall instead of a flat 3x2 grid: the middle
     column sits lower than the outer two (via the --sy custom property, so
     hover can subtract from it rather than fight a competing transform),
     giving the section a "wall" rhythm instead of six identical boxes in a
     row. Icons are solid alternating primary/accent chips with an
     asymmetric (squircle-ish) corner radius — a small deliberately
     "unique" shape instead of the plain rounded-square used elsewhere —
     and each card grows a short accent underline on hover as a tiny bit of
     motion/polish. Flat colours only, no gradients, per the site rule. */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:10px;}
  .why-card{
    --sy:0px;position:relative;padding:34px 28px 42px;border-radius:20px;
    background:#fff;border:1px solid var(--line);overflow:hidden;
    transform:translateY(var(--sy));
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
  }
  .why-card:nth-child(3n+2){--sy:30px;}
  .why-card:hover{transform:translateY(calc(var(--sy) - 8px));box-shadow:var(--shadow-md);border-color:transparent;}
  .why-card .idx{position:absolute;top:12px;right:20px;font-size:46px;font-weight:800;color:var(--bg-soft);letter-spacing:-.02em;line-height:1;z-index:0;}
  .why-card .icon{
    position:relative;z-index:1;width:52px;height:52px;border-radius:16px 6px 16px 6px;
    background:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:20px;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .why-card .icon svg{width:23px;height:23px;color:#fff;}
  .why-card:hover .icon{transform:rotate(-6deg) scale(1.07);}
  .why-card h3{position:relative;z-index:1;font-size:17px;margin-bottom:8px;}
  .why-card p{position:relative;z-index:1;color:var(--muted);font-size:14px;}
  .why-card::after{
    content:"";position:absolute;left:28px;bottom:24px;height:3px;width:22px;border-radius:2px;
    background:var(--primary);transition:width .35s ease;
  }
  .why-card:hover::after{width:54px;}
  .why-card:nth-child(even) .icon{background:var(--accent-dark);}
  .why-card:nth-child(even)::after{background:var(--accent-dark);}
  @media(max-width:980px){.why-card{--sy:0px !important;}}

  /* DATACENTER — flat world-map silhouette (own SVG, brand-colored land on
     a pale ocean) with animated drop-pin markers for each real location,
     matching the "server-location" map pattern from the reference site
     instead of the earlier 3D-globe treatment. */
  .dc-bg{
    padding:70px 0 96px;
    background:
      linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 32px,
      linear-gradient(var(--line) 1px,transparent 1px) 0 0/32px 32px,
      #fff;
  }
  .dc-map-wrap{position:relative;max-width:1180px;margin:0 auto;}
  .dc-map-svg{width:100%;height:auto;display:block;}
  .dc-map-svg path{fill:var(--primary-light);stroke:var(--primary);stroke-opacity:.3;stroke-width:.6;stroke-linejoin:round;}

  .dc-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;opacity:0;animation:dcPinDrop .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d,0s);z-index:2;}
  .dc-pin--below{transform:translate(-50%,6px);}
  @keyframes dcPinDrop{0%{opacity:0;transform:translate(-50%,-100%) translateY(-14px);}100%{opacity:1;transform:translate(-50%,-100%) translateY(0);}}
  .dc-pin--below{animation-name:dcPinDropBelow;}
  @keyframes dcPinDropBelow{0%{opacity:0;transform:translate(-50%,6px) translateY(-14px);}100%{opacity:1;transform:translate(-50%,6px) translateY(0);}}
  .dc-pin-badge{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:700;box-shadow:var(--shadow-md);white-space:nowrap;margin-bottom:4px;}
  .dc-pin--below .dc-pin-badge{order:2;margin-bottom:0;margin-top:4px;}
  .dc-pin-flag{display:inline-flex;width:16px;height:16px;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;font-size:11px;}
  .dc-pin-marker{position:relative;width:26px;height:26px;flex-shrink:0;}
  .dc-pin-marker svg{width:100%;height:100%;color:var(--primary);filter:drop-shadow(0 3px 6px rgba(59,91,253,.4));}
  .dc-pin-marker::after{content:"";position:absolute;left:50%;top:8px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--primary);transform:translateX(-50%) scale(.4);animation:dcPinPulse 2.2s ease-out infinite;animation-delay:var(--d,0s);}
  @keyframes dcPinPulse{0%{transform:translateX(-50%) scale(.4);opacity:.8;}100%{transform:translateX(-50%) scale(2.6);opacity:0;}}
  .dc-pin:hover .dc-pin-marker svg{animation:dcPinBounce .5s ease;}
  @keyframes dcPinBounce{0%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}}
  @media(max-width:640px){
    .dc-pin-badge{font-size:10.5px;padding:5px 9px;gap:5px;}
    .dc-pin-marker{width:20px;height:20px;}
  }
  @media(max-width:560px){
    .dc-pin-name{display:none;}
    .dc-pin-badge{padding:5px;}
  }
  @media (prefers-reduced-motion: reduce){
    .dc-pin,.dc-pin-marker::after{animation:none;opacity:1;}
  }

  /* MIGRATION — bordered step cards connected by an arrow icon (instead of
     circles floating on a dashed line), closer to the "process card" flow
     Bluehost/Hostinger use for onboarding steps. */
  .migrate-grid{display:flex;align-items:stretch;gap:0;}
  .migrate-step{flex:1;position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:var(--shadow-sm);}
  .migrate-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;}
  .migrate-step:not(:first-child){margin-left:26px;}
  .migrate-step:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-38px;transform:translateY(-50%);width:26px;height:26px;
    background:var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
    border-radius:50%;z-index:2;
  }
  .migrate-step .num{width:auto;height:auto;background:none;box-shadow:none;color:var(--primary);font-weight:800;font-size:36px;letter-spacing:-.02em;display:block;margin:0 0 18px;}
  .migrate-step h3{font-size:17px;margin-bottom:8px;}
  .migrate-step p{color:var(--muted);font-size:14px;max-width:none;margin:0;}

  /* COMPARISON v4 — bold, premium CARD layout (each provider is its own
     standalone card, not a shared table/grid). HostyXo's card is solid flat
     var(--primary), physically larger and lifted above its siblings via
     transform:scale+translateY plus a big soft brand-colour shadow, with its
     own CTA — the classic "recommended plan pops forward" treatment. The
     three competitor cards stay flat white/muted so the eye lands on
     HostyXo first. Every row is one clean tri-state glyph (check / dash /
     cross) + a short label — no repeated pills, no gradients/blur, flat
     6-colour palette only. */
  .cmp-wrap{margin-top:10px;padding-top:18px;}
  .cmp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;}

  .cmp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px 26px;transition:transform .25s,box-shadow .25s;position:relative;box-shadow:var(--shadow-sm);}
  .cmp-card:not(.cmp-card--hostyxo):hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}

  .cmp-card-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line);}
  .cmp-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#fff;flex:none;}
  .cmp-avatar--hostyxo{background:rgba(255,255,255,.2);width:50px;height:50px;}
  .cmp-avatar--hostyxo svg{width:22px;height:22px;color:#fff;}
  .cmp-avatar--c1{background:#8b5cf6;}
  .cmp-avatar--c2{background:#f59e0b;}
  .cmp-avatar--c3{background:#ec4899;}
  .cmp-card-name{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}

  .cmp-card-list{display:flex;flex-direction:column;gap:14px;}
  .cmp-card-list li{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3;}

  .cmp-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
  .cmp-icon svg{width:13px;height:13px;}
  .cmp-icon--yes{background:var(--primary-light);color:var(--accent-dark);}
  .cmp-icon--limited{background:var(--bg-soft);color:var(--muted);}
  .cmp-icon--no{background:#fdecec;color:#c0292e;}
  .cmp-icon-sm{width:20px;height:20px;}
  .cmp-icon-sm svg{width:11px;height:11px;}

  /* HostyXo — solid brand colour, scaled + lifted above the row, own CTA */
  .cmp-card--hostyxo{background:var(--primary);border:none;color:#fff;transform:translateY(-14px) scale(1.045);box-shadow:0 26px 50px -12px rgba(59,91,253,.4);z-index:2;padding-top:34px;}
  .cmp-card--hostyxo:hover{transform:translateY(-16px) scale(1.05);}
  .cmp-card--hostyxo .cmp-card-head{border-bottom-color:rgba(255,255,255,.2);}
  .cmp-card--hostyxo .cmp-card-name{color:#fff;font-size:19px;}
  .cmp-card--hostyxo .cmp-card-list li{color:#fff;font-weight:700;}
  .cmp-card--hostyxo .cmp-icon--yes{background:rgba(255,255,255,.22);color:#fff;}
  .cmp-card--hostyxo .cmp-card-cta{display:block;text-align:center;margin-top:22px;background:#fff;color:var(--primary);font-weight:700;font-size:14.5px;padding:13px;border-radius:12px;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 18px rgba(0,0,0,.12);}
  .cmp-card--hostyxo .cmp-card-cta:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.16);}

  .cmp-ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;background:var(--accent-dark);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:6px 15px;border-radius:20px;white-space:nowrap;box-shadow:0 8px 16px rgba(0,168,146,.35);}
  .cmp-ribbon svg{width:11px;height:11px;}

  .cmp-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);}
  .cmp-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);}
  .cmp-note{margin-top:12px;font-size:12px;color:var(--muted);text-align:center;}

  .cmp-wrap.in-view .cmp-card{animation:cmpCardIn .55s cubic-bezier(.2,.7,.3,1) both;}
  .cmp-cards>.cmp-card:nth-child(1){animation-delay:.05s;}
  .cmp-cards>.cmp-card:nth-child(2){animation-delay:.14s;}
  .cmp-cards>.cmp-card:nth-child(3){animation-delay:.2s;}
  .cmp-cards>.cmp-card:nth-child(4){animation-delay:.26s;}
  @keyframes cmpCardIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
  .cmp-wrap.in-view .cmp-card--hostyxo{animation:cmpCardInBrand .55s cubic-bezier(.2,.7,.3,1) both .05s;}
  @keyframes cmpCardInBrand{from{opacity:0;transform:translateY(6px) scale(1.045);}to{opacity:1;transform:translateY(-14px) scale(1.045);}}
  @media (prefers-reduced-motion: reduce){.cmp-wrap .cmp-card{animation:none !important;}}

  @media (max-width:980px){
    .cmp-cards{grid-template-columns:repeat(2,1fr);}
    .cmp-card--hostyxo{grid-column:1/-1;transform:none;order:-1;}
    .cmp-card--hostyxo:hover{transform:translateY(-4px);}
    .cmp-wrap.in-view .cmp-card--hostyxo{animation:cmpCardIn .55s cubic-bezier(.2,.7,.3,1) both .05s;}
  }
  @media (max-width:620px){
    .cmp-cards{grid-template-columns:1fr;}
  }

  /* TESTIMONIALS — large decorative quotation mark (pure CSS, no new
     markup) plus a bolder hover lift so the grid doesn't read as flat
     text blocks. */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .testi-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;transition:transform .25s,box-shadow .25s;overflow:hidden;box-shadow:var(--shadow-sm);}
  .testi-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
  .testi-card::before{content:"\201C";position:absolute;top:-6px;right:18px;font-size:70px;font-weight:700;color:var(--primary-light);line-height:1;font-family:Georgia,serif;}
  .stars{color:#f5a623;font-size:15px;margin-bottom:14px;letter-spacing:2px;position:relative;}
  .testi-card p{font-size:14.5px;color:var(--text);margin-bottom:22px;position:relative;}
  .testi-who{display:flex;align-items:center;gap:12px;position:relative;}
  .avatar{position:relative;width:46px;height:46px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;}
  /* Small verified-customer checkmark badge on the avatar — a light trust
     signal (Hostnin/ITNut lean on real customer faces + credibility marks
     for their testimonial walls). */
  .avatar::after{
    content:"";position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;border-radius:50%;
    background:var(--accent-dark);border:2px solid #fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size:9px 9px;background-repeat:no-repeat;background-position:center;
  }
  .testi-who b{display:block;font-size:14px;}
  .testi-who span{font-size:12.5px;color:var(--muted);}

  /* FAQ — accent left-border + soft hover tint on the question row (was
     plain white), plus the "+" toggle sits inside a filled circle instead
     of hanging bare. */
  .faq-wrap{max-width:820px;margin:0 auto;}
  .faq-item{border:1px solid var(--line);border-left:3px solid transparent;border-radius:14px;margin-bottom:14px;overflow:hidden;transition:border-color .2s;}
  .faq-item.open{border-left-color:var(--primary);}
  .faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:20px 24px;border:none;background:none;font-family:inherit;text-align:left;cursor:pointer;font-weight:600;font-size:15.5px;color:var(--ink);transition:background .2s;}
  .faq-q:hover{background:var(--bg-soft);}
  .faq-q .icon-plus{width:28px;height:28px;flex:none;position:relative;border-radius:50%;background:var(--primary-light);}
  .faq-q .icon-plus::before,.faq-q .icon-plus::after{content:"";position:absolute;background:var(--primary);border-radius:2px;transition:.25s;}
  .faq-q .icon-plus::before{width:14px;height:2.5px;top:50%;left:50%;transform:translate(-50%,-50%);}
  .faq-q .icon-plus::after{width:2.5px;height:14px;top:50%;left:50%;transform:translate(-50%,-50%);}
  .faq-item.open .icon-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .faq-a p{padding:0 24px 22px;color:var(--muted);font-size:14.5px;}

  /* CTA — two flat, softly-tinted decorative circles in the corners (no
     gradients — plain translucent white fills) instead of a bare block of
     colour, so the band feels a bit more designed. */
  .cta-band{background:var(--primary);border-radius:28px;padding:70px 40px;text-align:center;color:#fff;position:relative;overflow:hidden;}
  .cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06);}
  .cta-band::before{width:260px;height:260px;top:-130px;left:-80px;}
  .cta-band::after{width:200px;height:200px;bottom:-110px;right:-60px;}
  .cta-band h2{color:#fff;font-size:40px;margin-bottom:14px;position:relative;letter-spacing:-.03em;}
  .cta-band p{color:rgba(255,255,255,.85);margin-bottom:30px;font-size:16.5px;position:relative;}
  .cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;}

  /* FOOTER — diagonal top edge (Hostinger uses this exact device to break
     up the white→dark seam instead of a plain straight line) via clip-path
     on the footer itself; extra top padding compensates for the clipped
     triangle so the column content doesn't sit under it. */
  footer{background:#0a0f24;color:#9aa4bd;padding:126px 0 26px;clip-path:polygon(0 56px,100% 0,100% 100%,0 100%);}
  .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:50px;}
  .footer-top h4{color:#fff;font-size:14.5px;margin-bottom:18px;letter-spacing:.03em;}
  .footer-top li{margin-bottom:11px;font-size:14px;}
  .footer-top li a{transition:color .2s;}
  .footer-top li a:hover{color:var(--accent);}
  .footer-top p{font-size:14px;color:#7c86a3;max-width:280px;margin-bottom:20px;}
  .social-row{display:flex;gap:10px;}
  .social-row a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:background .2s;}
  .social-row a:hover{background:var(--primary);}
  .social-row a svg{width:16px;height:16px;color:#fff;}
  .newsletter{display:flex;gap:8px;margin-top:6px;}
  .newsletter input{flex:1;padding:12px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-size:13.5px;}
  .newsletter input::placeholder{color:#7c86a3;}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;}
  .pay-icons{display:flex;gap:10px;}
  .pay-icons span{background:rgba(255,255,255,.06);padding:6px 12px;border-radius:6px;font-size:11.5px;font-weight:600;color:#c7cee2;}

  .back-top{position:fixed;bottom:26px;right:26px;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);cursor:pointer;opacity:0;visibility:hidden;transition:.25s;z-index:150;}
  .back-top.show{opacity:1;visibility:visible;}
  .back-top svg{width:18px;height:18px;}

  @media(max-width:980px){
    .hero-grid,.panel-wrap,.footer-top{grid-template-columns:1fr;}
    .plans,.features-grid,.why-grid,.testi-grid{grid-template-columns:repeat(2,1fr);}
    .migrate-grid{flex-direction:column;}
    .migrate-step:not(:first-child){margin-left:0;margin-top:26px;}
    .migrate-step:not(:last-child)::after{top:auto;right:50%;bottom:-38px;transform:translate(50%,0) rotate(90deg);}
    .stats .container{flex-wrap:wrap;row-gap:28px;}
    .stat-box{flex:0 0 50%;padding:0 16px 20px;}
    .stat-box:nth-child(2)::after{display:none;}
    .nav-links{display:none;}
    .hero h1{font-size:40px;}
    .hero-visual{margin-top:20px;}
    .h2{font-size:31px;}
    .compare-table{font-size:12px;}
    .currency-toggle{display:none;}
  }
  @media(max-width:600px){
    section{padding:70px 0;}
    .plans,.features-grid,.why-grid,.testi-grid,.cs-features{grid-template-columns:1fr;}
    .stats .container{flex-direction:column;}
    .stat-box{flex:1 1 100%;padding:14px 0;}
    .stat-box::after{display:none;}
    .stat-box:not(:last-child){border-bottom:1px solid var(--line);}
    .cta-actions{flex-direction:column;}
    .cta-actions .btn{width:100%;}
    .hero-cta-row{flex-direction:column;width:100%;}
    .hero-cta-row .btn{width:100%;}
    .float-badge{display:none;}
    .hv-photo-card{height:360px;}
    .hv-pill{padding:11px 16px;font-size:12.5px;}
    .hv-pill.active{padding:14px 20px;font-size:14px;}
    .nav-login{display:none;}
    .hero-checklist{grid-template-columns:1fr;}
    .hero-checklist li{white-space:normal;}
    .domain-search-form{flex-wrap:wrap;}
    .domain-search-form input{width:100%;order:1;padding:9px 10px 9px 4px;}
    .dsf-icon{order:0;}
    .dsf-divider{display:none;}
    .dsf-ext{order:2;}
    .dsf-price{order:3;}
    .dsf-btn{order:4;flex:1;justify-content:center;margin-top:6px;margin-left:0;}
  }

  /* Loading placeholder for dynamically-fetched sections */
  .loading-note{color:var(--muted);font-size:14.5px;text-align:center;padding:40px 0;grid-column:1/-1;}

  /* CONTACT FORM */
  .contact-form-wrap{max-width:640px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:36px;}
  .contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  .contact-form-field{margin-bottom:16px;}
  .contact-form-row .contact-form-field{margin-bottom:0;}
  .contact-form-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px;}
  .contact-form-field input,.contact-form-field textarea{
    width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);
    font-size:14.5px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .2s;resize:vertical;
  }
  .contact-form-field input:focus,.contact-form-field textarea:focus{border-color:var(--primary);}
  .contact-form-msg{border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:16px;display:none;}
  .contact-form-msg.show{display:block;}
  .contact-form-msg.ok{background:#e6faf5;color:var(--accent-dark);}
  .contact-form-msg.err{background:#fdecec;color:#c0392b;}
  @media(max-width:600px){
    .contact-form-row{grid-template-columns:1fr;}
    .contact-form-wrap{padding:24px;}
  }

  /* ============ TECHNOLOGY PARTNERS ============ */
  /* Auto-scrolling logo marquee — cloned from the pixellyo vps-hosting.html
     "Our Technology Partners" reference section (computed styles read directly
     off the live page): light pill cards (bg #f8f9fa, 8px radius, tailwind
     shadow-lg 0 10px 15px -3px + 0 4px 6px -4px @ 10% black), 16px gap, 36px
     logo, 14px/600 label. TWO rows, scrolling in opposite directions (row 1
     left, row 2 right via animation-direction:reverse) — matches the
     reference's two-line marquee. Each <ul> holds the 13 partners twice
     (second half aria-hidden) so translateX(-50%) loops seamlessly with no
     jump-cut, paused on hover. Logos are inline SVG / colored initials
     badges (not hotlinked images) so every partner always renders. */
  .partners-band{padding-block-start:clamp(2rem,1rem + 3.25vw,3.75rem);padding-block-end:clamp(3.75rem,1rem + 6.5vw,7.5rem);overflow:hidden;}
  .partners-band .section-head{margin-bottom:clamp(2rem,1rem + 3.25vw,3.75rem);}
  .partners-scroller{overflow:hidden;padding-bottom:16px;}
  .partners-scroller--row2{margin-top:4px;}
  .partners-track{display:flex;gap:16px;width:max-content;flex-wrap:nowrap;list-style:none;margin:0;padding:0;animation:partnersScroll 60s linear infinite;}
  .partners-track--reverse{animation-direction:reverse;}
  .partners-scroller:hover .partners-track{animation-play-state:paused;}
  .partners-track li{flex-shrink:0;}
  .partner-pill{display:inline-flex;align-items:center;gap:16px;padding:12px 24px;background:#f8f9fa;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);border-radius:8px;}
  .partner-pill img,.partner-pill svg{width:36px;height:36px;object-fit:contain;flex-shrink:0;border-radius:6px;}
  .partner-badge{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;letter-spacing:.02em;flex-shrink:0;}
  .partner-pill span{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;}
  @keyframes partnersScroll{0%{transform:translateX(0);}100%{transform:translateX(calc(-50% - .5rem));}}
  @media(max-width:600px){
    .partner-pill{padding:10px 18px;gap:12px;}
    .partner-pill img,.partner-pill svg{width:30px;height:30px;}
    .partner-badge{width:30px;height:30px;font-size:9px;}
    .partner-pill span{font-size:13px;}
  }