/* ==========================================================================
   HostSun Design System — css/hostsun.css
   One stylesheet for every public page. RTL-first, no framework.
   Sections:
     01 Fonts            08 Header & navigation    15 Platforms switcher
     02 Tokens           09 Home hero              16 Prose / content
     03 Reset & base     10 Page hero (inner)      17 FAQ
     04 Layout           11 Domain search          18 CTA band & promo
     05 Typography       12 Service & feature cards 19 Tables (DataTables)
     06 Buttons          13 Pricing                20 Forms & auth
     07 Badges & chips   14 Dark / infra / stats   21 Footer
                                                    22 Utilities & motion
   ========================================================================== */

/* 01 — Fonts ------------------------------------------------------------- */
@font-face{font-family:"IRANSans";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/woff2/IRANSansWeb_Light.woff2") format("woff2"),url("/fonts/woff/IRANSansWeb_Light.woff") format("woff");}
@font-face{font-family:"IRANSans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/woff2/IRANSansWeb.woff2") format("woff2"),url("/fonts/woff/IRANSansWeb.woff") format("woff");}
@font-face{font-family:"IRANSans";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/woff2/IRANSansWeb_Medium.woff2") format("woff2"),url("/fonts/woff/IRANSansWeb_Medium.woff") format("woff");}
@font-face{font-family:"IRANSans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/woff2/IRANSansWeb_Bold.woff2") format("woff2"),url("/fonts/woff/IRANSansWeb_Bold.woff") format("woff");}

/* 02 — Tokens ------------------------------------------------------------ */
:root{
  /* Brand blue — from the cloud in the HostSun logo */
  --blue-50:#EEF6FF; --blue-100:#D9ECFF; --blue-200:#B6DBFF; --blue-300:#84C2FF;
  --blue-400:#4AA3FA; --blue-500:#1E88F0; --blue-600:#0B6FD6; --blue-700:#0A63C2;
  --blue-800:#0E4A8A; --blue-900:#0F3E70;
  /* Sun accent — from the sun arcs in the logo */
  --sun-100:#FFF4DB; --sun-300:#FFD36B; --sun-400:#FFB938; --sun-500:#F79A1E; --sun-600:#E07A0B; --sun-700:#B45309;
  /* Neutrals (cool slate) */
  --ink-950:#061226; --ink-900:#0A1628; --ink-800:#13233A; --ink-700:#24364F; --ink-600:#3B4C66;
  --ink-500:#5B6B82; --ink-400:#8592A6; --ink-300:#B7C1CF; --ink-200:#DCE3EC; --ink-100:#EDF1F6; --ink-50:#F6F8FB;
  /* Deep brand blue for hero, dark sections and footer (lighter than ink navy) */
  /* Blend of the original navy and the brand blue: navy base + vivid blue light */
  --deep-1:#1E6FD0; --deep-2:#0E3F80; --deep-3:#0B3165; --deep-4:#0A2754; --deep-5:#081F45;
  --on-deep:#DCEBFF; --on-deep-muted:#B9D4F5; --cyan-400:#38BDF8;
  --grad-deep:radial-gradient(85% 95% at 12% 0%,rgba(30,111,208,.5) 0%,transparent 60%),
              radial-gradient(60% 70% at 100% 100%,rgba(56,189,248,.14) 0%,transparent 60%),
              linear-gradient(160deg,var(--deep-2) 0%,var(--deep-3) 50%,var(--deep-4) 100%);
  --green-500:#16A34A; --green-50:#EAF8EF; --red-500:#DC2626; --red-50:#FDECEC;

  /* Semantic */
  --bg:#FFFFFF; --bg-soft:var(--ink-50); --surface:#FFFFFF;
  --text:var(--ink-700); --text-strong:var(--ink-900); --text-muted:var(--ink-500);
  --border:var(--ink-200); --border-soft:var(--ink-100);
  --primary:var(--blue-600); --primary-hover:var(--blue-700); --link:var(--blue-700);
  --focus:0 0 0 3px rgba(30,136,240,.35);

  --grad-brand:linear-gradient(135deg,var(--blue-500) 0%,var(--blue-700) 100%);
  --grad-sun:linear-gradient(135deg,var(--sun-300) 0%,var(--sun-500) 100%);
  --grad-text:linear-gradient(100deg,#FFE29A 0%,var(--sun-400) 45%,var(--sun-500) 100%);

  /* Type scale (fluid) */
  --fs-xs:.8125rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.0625rem; --fs-lg:1.1875rem;
  --fs-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.25rem + 1vw,2rem);
  --fs-3xl:clamp(1.75rem,1.35rem + 1.7vw,2.6rem);
  --fs-4xl:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  --lh-tight:1.45; --lh-base:1.9;

  /* Spacing (4px grid) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem;
  --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem; --s-24:6rem;
  --section-y:clamp(4rem,3rem + 4vw,7rem);

  /* Shape & depth */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(10,22,40,.06);
  --sh-sm:0 1px 2px rgba(10,22,40,.05),0 2px 8px rgba(10,22,40,.05);
  --sh-md:0 2px 4px rgba(10,22,40,.04),0 12px 28px -6px rgba(10,22,40,.10);
  --sh-lg:0 4px 8px rgba(10,22,40,.04),0 24px 56px -12px rgba(10,22,40,.18);
  --sh-blue:0 10px 30px -10px rgba(11,111,214,.55);

  --container:1200px; --header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.18s; --t:.3s;
}

/* 03 — Reset & base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:"IRANSans",Tahoma,system-ui,sans-serif;font-size:var(--fs-base);line-height:var(--lh-base);
  color:var(--text);background:var(--bg);direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--link);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--blue-800)}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong);font-weight:700;line-height:var(--lh-tight)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
::selection{background:var(--blue-200);color:var(--ink-900)}
[dir="ltr"],.ltr{direction:ltr;unicode-bidi:isolate}
.skip-link{position:absolute;inset-inline-start:var(--s-4);top:-60px;z-index:200;background:var(--ink-900);color:#fff;padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);transition:top var(--t-fast)}
.skip-link:focus{top:var(--s-3);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle}

/* 04 — Layout ------------------------------------------------------------ */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--s-6));margin-inline:auto;padding-inline:var(--s-6)}
@media (max-width:575px){.container{padding-inline:var(--s-4)}}
.section{padding-block:var(--section-y);position:relative}
.section--soft{background:var(--bg-soft)}
.section--tight{padding-block:clamp(3rem,2.5rem + 2vw,4.5rem)}
.section + .section--soft,.section--soft + .section{border-top:1px solid var(--border-soft)}
.grid{display:grid;gap:var(--s-6)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:991px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
@media (max-width:991px){.split{grid-template-columns:1fr}}
.stack>*+*{margin-top:var(--s-4)}
main{display:block}

/* 05 — Typography -------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:500;color:var(--blue-700);
  background:var(--blue-50);border:1px solid var(--blue-100);padding:.3rem .85rem;border-radius:var(--r-full);margin-bottom:var(--s-4)}
.eyebrow .icon{width:1rem;height:1rem}
.eyebrow--sun{color:var(--sun-700);background:var(--sun-100);border-color:#FDE3B0}
.section-head{max-width:720px;margin:0 auto var(--s-12);text-align:center}
.section-head--start{margin-inline:0;text-align:right}
.section-title{font-size:var(--fs-3xl);letter-spacing:-.01em;margin-bottom:var(--s-4)}
.section-lead{font-size:var(--fs-md);color:var(--text-muted);margin:0}
.section-lead a{font-weight:500;text-decoration:underline;text-decoration-color:var(--blue-200);text-underline-offset:4px}
.text-gradient{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.text-muted{color:var(--text-muted)}
.text-center{text-align:center}

/* 06 — Buttons ----------------------------------------------------------- */
.btn{--btn-bg:var(--primary);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.65rem 1.4rem;
  font-size:var(--fs-base);font-weight:500;line-height:1.4;white-space:nowrap;text-align:center;
  color:var(--btn-fg);background:var(--btn-bg);border:1px solid var(--btn-bd);border-radius:var(--r-md);
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease),box-shadow var(--t-fast);
  -webkit-tap-highlight-color:transparent;cursor:pointer;text-decoration:none}
.btn:hover{color:var(--btn-fg);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .icon{width:1.1em;height:1.1em}
.btn--primary{box-shadow:var(--sh-blue),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--primary:hover{--btn-bg:var(--primary-hover)}
.btn--sun{--btn-bg:var(--sun-400);--btn-fg:#1A1206;background:var(--grad-sun);box-shadow:0 10px 30px -10px rgba(247,154,30,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--sun:hover{filter:saturate(1.1) brightness(1.03)}
.btn--outline{--btn-bg:#fff;--btn-fg:var(--ink-800);--btn-bd:var(--border);box-shadow:var(--sh-xs)}
.btn--outline:hover{--btn-bd:var(--blue-300);--btn-fg:var(--blue-700)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink-700)}
.btn--ghost:hover{--btn-bg:var(--ink-100);--btn-fg:var(--ink-900)}
.btn--soft{--btn-bg:var(--blue-50);--btn-fg:var(--blue-700);--btn-bd:var(--blue-100)}
.btn--soft:hover{--btn-bg:var(--blue-100)}
.btn--glass{--btn-bg:rgba(255,255,255,.06);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.btn--glass:hover{--btn-bg:rgba(255,255,255,.12)}
.btn--sm{min-height:38px;padding:.4rem 1rem;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn--lg{min-height:54px;padding:.8rem 1.75rem;font-size:var(--fs-md)}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.btn-row--center{justify-content:center}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:500}
.link-arrow .icon{width:1rem;height:1rem;transition:transform var(--t-fast) var(--ease)}
.link-arrow:hover .icon{transform:translateX(-4px)}

/* 07 — Badges & chips ---------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:500;line-height:1;padding:.4rem .7rem;border-radius:var(--r-full);background:var(--ink-100);color:var(--ink-700)}
.badge--blue{background:var(--blue-50);color:var(--blue-700)}
.badge--sun{background:var(--grad-sun);color:#1A1206}
.badge--green{background:var(--green-50);color:#11743A}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);padding:.4rem .85rem;border-radius:var(--r-full);border:1px solid var(--border);background:#fff;color:var(--ink-700)}
.chip .icon{width:1rem;height:1rem;color:var(--blue-600)}
.chip--dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.chip--dark .icon{color:var(--sun-300)}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;
  background:var(--ink-900);color:var(--sun-300);padding:.15rem .6rem;border-radius:var(--r-sm);font-size:.95em;letter-spacing:.04em}

/* 08 — Header & navigation ---------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t),background-color var(--t)}
.site-header.is-scrolled{border-bottom-color:var(--border-soft);box-shadow:0 6px 24px -12px rgba(10,22,40,.18);background:rgba(255,255,255,.92)}
.nav{display:flex;align-items:center;gap:var(--s-6);height:var(--header-h)}
.nav__brand{display:flex;align-items:center;gap:.6rem;flex:none;color:var(--ink-900)}
.nav__brand:hover{color:var(--ink-900)}
.nav__brand img{width:58px;height:39px;object-fit:contain}
.nav__brand-text{display:flex;flex-direction:column;line-height:1.2}
.nav__brand-text strong{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.nav__brand-text small{font-size:.72rem;color:var(--text-muted);font-weight:400}
.nav__menu{display:flex;align-items:center;gap:var(--s-1);margin:0;padding:0;list-style:none}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .8rem;border-radius:var(--r-sm);font-size:.95rem;font-weight:500;color:var(--ink-700);background:none;border:0;line-height:1.6;white-space:nowrap}
.nav__link:hover,.nav__item:hover>.nav__link,.nav__link[aria-expanded="true"]{color:var(--ink-900);background:var(--ink-100)}
.nav__link.is-active{color:var(--blue-700)}
.nav__link .icon{width:.95rem;height:.95rem;transition:transform var(--t-fast)}
.nav__link[aria-expanded="true"] .icon--caret{transform:rotate(180deg)}
.nav__link .icon--ext{width:.8rem;height:.8rem;opacity:.55}
.nav__actions{display:flex;align-items:center;gap:var(--s-2);margin-inline-start:auto}
.nav__toggle{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--border);background:#fff;align-items:center;justify-content:center;color:var(--ink-800)}
.nav__toggle .icon{width:22px;height:22px}

/* Dropdown + mega menu (desktop) */
.dropdown{position:absolute;top:calc(100% + 10px);inset-inline-start:0;min-width:240px;background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:var(--s-2);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--t-fast),transform var(--t-fast) var(--ease),visibility var(--t-fast);z-index:10}
.dropdown::before{content:"";position:absolute;inset-inline:0;top:-12px;height:12px}
.nav__item.is-open>.dropdown{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (min-width:1100px){.nav__item--dd:hover>.dropdown{opacity:1;visibility:visible;transform:none}}
.dropdown a{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:var(--r-sm);color:var(--ink-700);font-size:.93rem}
.dropdown a:hover{background:var(--ink-50);color:var(--ink-900)}
.dropdown a .icon{width:1.1rem;height:1.1rem;color:var(--blue-600)}
.mega{width:min(860px,calc(100vw - 48px));inset-inline-start:-180px;padding:0;display:grid;grid-template-columns:1fr 1fr 240px;overflow:hidden}
.mega__col{padding:var(--s-5)}
.mega__label{font-size:var(--fs-xs);font-weight:500;color:var(--ink-400);margin:0 .5rem var(--s-2)}
.mega a.mega__link{align-items:flex-start;gap:.8rem;padding:.65rem .6rem}
.mega__ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600);transition:background var(--t-fast),color var(--t-fast)}
.mega__ico .icon{width:20px;height:20px;color:inherit}
.mega a.mega__link:hover .mega__ico{background:var(--blue-600);color:#fff}
.mega__txt{display:flex;flex-direction:column;line-height:1.55}
.mega__txt strong{font-weight:500;color:var(--ink-900);font-size:.93rem}
.mega__txt small{color:var(--text-muted);font-size:.78rem}
.mega__aside{background:var(--grad-deep);color:var(--on-deep);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);position:relative;overflow:hidden}
.mega__aside::after{content:"";position:absolute;width:180px;height:180px;inset-inline-end:-60px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(255,185,56,.45),transparent 70%)}
.mega__aside strong{color:#fff;font-size:1rem}
.mega__aside p{font-size:.84rem;margin:0;line-height:1.8}
.mega__aside a{color:#fff;padding:0;margin-top:auto;font-weight:500}
.mega__aside a:hover{background:none;color:var(--sun-300)}
.mega__aside .icon{color:var(--sun-400)!important}
.mega__aside>.icon{width:32px;height:32px}

/* Mobile navigation (drawer) */
.nav-backdrop{position:fixed;inset:0;background:rgba(6,18,38,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);z-index:98}
@media (max-width:1099px){
  /* backdrop-filter would make the header the containing block of the fixed drawer */
  .site-header,.site-header.is-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .nav__toggle{display:inline-flex}
  .nav__actions .btn--hide-mobile{display:none}
  .nav__actions{margin-inline-start:auto}
  .nav__toggle{margin-inline-start:0}
  .nav__panel{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(360px,88vw);background:#fff;z-index:99;display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform var(--t) var(--ease);box-shadow:var(--sh-lg);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
  .nav-open .nav__panel{transform:none;visibility:visible}
  .nav-open .nav-backdrop{opacity:1;visibility:visible}
  .nav-open{overflow:hidden}
  .nav__panel-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:#fff;z-index:1}
  .nav__menu{flex-direction:column;align-items:stretch;padding:var(--s-3);gap:2px}
  .nav__link{width:100%;justify-content:space-between;padding:.8rem .9rem;font-size:1rem}
  .nav__item:hover>.nav__link{background:none}
  .dropdown,.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;min-width:0;width:auto;display:none;padding:0 0 var(--s-2);background:none}
  .nav__item.is-open>.dropdown{display:block}
  .mega{grid-template-columns:1fr}
  .mega__col{padding:0 var(--s-2)}
  .mega__label{margin-top:var(--s-3)}
  .mega__txt small{display:none}
  .mega__aside{margin:var(--s-3) var(--s-2) 0;border-radius:var(--r-md);padding:var(--s-4)}
  .nav__panel-foot{margin-top:auto;padding:var(--s-5);border-top:1px solid var(--border-soft);display:grid;gap:var(--s-3);background:var(--ink-50)}
  .nav__panel-foot .contact-mini{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--fs-sm)}
  .nav__panel-foot .contact-mini a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-600)}
}
@media (min-width:1100px){.nav__panel{display:flex;align-items:center;flex:1;gap:var(--s-4)}.nav__panel-head,.nav__panel-foot{display:none}}
@media (max-width:420px){.nav__brand-text small{display:none}.nav__actions .btn{padding-inline:.85rem}}

/* 09 — Home hero --------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--grad-deep);color:var(--on-deep);padding:clamp(3.5rem,2rem + 6vw,7.5rem) 0 clamp(4rem,3rem + 5vw,7rem);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(45% 55% at 85% 5%,rgba(255,185,56,.20) 0%,transparent 60%),
             radial-gradient(40% 45% at 15% 35%,rgba(56,189,248,.16) 0%,transparent 65%),
             radial-gradient(45% 50% at 55% 110%,rgba(30,111,208,.35) 0%,transparent 70%);
  animation:aurora 22s ease-in-out infinite alternate;will-change:transform}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.06)}100%{transform:translate3d(2%,-2%,0) scale(1.03)}}
.hero__copy,.hero__visual{position:relative}
.hero{border-bottom:1px solid rgba(255,255,255,.08)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.hero__kicker{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .4rem .35rem 1rem;border-radius:var(--r-full);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:var(--fs-sm);color:#fff;margin-bottom:var(--s-6)}
.hero__kicker .badge{background:var(--grad-sun);color:#1A1206}
.hero h1{color:#fff;font-size:var(--fs-4xl);line-height:1.35;letter-spacing:-.015em;margin-bottom:var(--s-5)}
.hero__lead{font-size:var(--fs-lg);color:var(--on-deep);max-width:560px;margin-bottom:var(--s-8)}
.hero__tlds{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--on-deep-muted)}
.hero__tlds b{color:#fff;font-weight:500;direction:ltr;unicode-bidi:isolate}
.hero__tlds span{display:inline-flex;gap:.4rem;align-items:center}
.hero__chips{margin-top:var(--s-8)}
/* Hero visual: product console */
.console{position:relative;border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);padding:var(--s-5);backdrop-filter:blur(8px)}
.console__bar{display:flex;align-items:center;gap:6px;margin-bottom:var(--s-4);direction:ltr}
.console__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.console__bar i:first-child{background:#FF6159}.console__bar i:nth-child(2){background:#FFBD2E}.console__bar i:nth-child(3){background:#28C941}
.console__bar span{margin-inline-start:auto;font-size:.75rem;color:var(--on-deep-muted);font-family:ui-monospace,Menlo,Consolas,monospace}
.console__head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-lg);background:rgba(4,18,44,.45);border:1px solid rgba(255,255,255,.12)}
.console__head img{width:52px;height:35px;object-fit:contain}
.console__head strong{display:block;color:#fff;font-size:1rem}
.console__head small{color:var(--on-deep-muted);font-size:.8rem}
.console__status{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:#7EE2A8;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.3);padding:.25rem .65rem;border-radius:var(--r-full)}
.console__status::before{content:"";width:7px;height:7px;border-radius:50%;background:#34D27A;box-shadow:0 0 0 4px rgba(52,210,122,.18);animation:pulse 2.4s infinite}
.console__list{list-style:none;margin:var(--s-4) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.console__list li{display:flex;align-items:center;gap:.65rem;padding:.75rem .85rem;border-radius:var(--r-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.88rem;line-height:1.5}
.console__list .ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.console__list .ico .icon{width:18px;height:18px}
.console__list li:nth-child(3n) .ico{background:rgba(255,185,56,.16);color:var(--sun-300)}
.console__list small{display:block;color:var(--on-deep-muted);font-size:.74rem}
.console{padding-bottom:var(--s-12)}
.console__float{position:absolute;inset-inline-end:-18px;bottom:-26px;display:flex;align-items:center;gap:.6rem;background:#fff;color:var(--ink-800);border-radius:var(--r-lg);padding:.7rem 1rem;box-shadow:var(--sh-lg);font-size:.85rem;line-height:1.5}
.console__float .icon{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--grad-sun);color:#1A1206}
.console__float strong{display:block;color:var(--ink-900)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (max-width:991px){.hero__grid{grid-template-columns:1fr}.hero__visual{max-width:560px}.console__float{inset-inline-end:12px}}
@media (max-width:575px){.console{padding-bottom:var(--s-5)}.console__list{grid-template-columns:1fr}.hero__lead{font-size:var(--fs-md)}.console__float{position:static;margin-top:var(--s-4)}}

/* Trust / tech strip */
.techstrip{border-bottom:1px solid var(--border-soft);background:#fff}
.techstrip .container{display:flex;align-items:center;gap:var(--s-6);padding-block:var(--s-6);flex-wrap:wrap;justify-content:center}
.techstrip__label{font-size:var(--fs-sm);color:var(--text-muted)}
.techstrip ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-8);align-items:center;justify-content:center}
.techstrip li{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--ink-500);font-size:.98rem}
.techstrip li .icon{color:var(--ink-400)}

/* 10 — Page hero (inner pages) ------------------------------------------ */
.page-hero{position:relative;overflow:hidden;background:var(--grad-deep);color:var(--on-deep);padding:clamp(3rem,2rem + 4vw,5.5rem) 0 clamp(5rem,4rem + 4vw,7rem);isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(50% 80% at 90% 0%,rgba(255,185,56,.16),transparent 60%),radial-gradient(60% 90% at 0% 100%,rgba(56,189,248,.14),transparent 65%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px}
.page-hero__inner{max-width:820px}
.page-hero--center .page-hero__inner{margin-inline:auto;text-align:center}
.page-hero--center .breadcrumb,.page-hero--center .chips{justify-content:center}
.page-hero__icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;margin-bottom:var(--s-5)}
.page-hero--center .page-hero__icon{margin-inline:auto}
.page-hero__icon .icon{width:28px;height:28px}
.page-hero h1{color:#fff;font-size:var(--fs-3xl);margin-bottom:var(--s-4);letter-spacing:-.01em}
.page-hero__lead{font-size:var(--fs-md);color:var(--on-deep);margin:0}
.page-hero__lead p{margin:0 0 .6em}
.page-hero .chips{margin-top:var(--s-6)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;list-style:none;font-size:var(--fs-sm);color:var(--on-deep-muted);margin-bottom:var(--s-5)}
.breadcrumb a{color:var(--on-deep)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .icon{width:.9rem;height:.9rem;opacity:.6}
.page-body{margin-top:clamp(-4rem,-3rem - 2vw,-3rem);position:relative;z-index:2}

/* 11 — Domain search ----------------------------------------------------- */
.domain-search{position:relative;max-width:620px}
.domain-search__field{display:flex;align-items:center;gap:var(--s-2);background:#fff;border-radius:var(--r-lg);padding:6px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);transition:box-shadow var(--t-fast)}
.domain-search__field:focus-within{box-shadow:0 20px 50px -20px rgba(0,0,0,.5),0 0 0 4px rgba(74,163,250,.45)}
.domain-search__field>.icon{color:var(--ink-400);margin-inline-start:.75rem;width:1.3rem;height:1.3rem}
.domain-search input[type="text"]{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--fs-md);padding:.75rem .25rem;color:var(--ink-900);direction:ltr;text-align:left}
.domain-search input[type="text"]::placeholder{color:var(--ink-400);direction:rtl;text-align:right}
.domain-search input[type="text"]:placeholder-shown{direction:rtl;text-align:right}
.domain-search input[type="submit"],.domain-search button[type="submit"]{flex:none;border:0;min-height:50px;padding:.7rem 1.6rem;border-radius:var(--r-md);background:var(--primary);color:#fff;font-weight:500;cursor:pointer;transition:background var(--t-fast)}
.domain-search input[type="submit"]:hover{background:var(--primary-hover)}
.domain-search__hint{min-height:1.6em;font-size:var(--fs-xs);color:var(--sun-300);margin-top:.5rem}
.domain-search--light .domain-search__field{box-shadow:var(--sh-md),0 0 0 1px var(--border)}
.domain-search--light .domain-search__hint{color:var(--sun-700)}
@media (max-width:479px){.domain-search__field{flex-wrap:wrap;padding:8px}.domain-search__field>.icon{display:none}.domain-search input[type="text"]{flex-basis:100%;padding:.6rem .5rem}.domain-search input[type="submit"]{width:100%}}

/* 12 — Service & feature cards ------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-xl);box-shadow:var(--sh-sm);padding:var(--s-8)}
.svc{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);border-radius:var(--r-xl);background:#fff;border:1px solid var(--border-soft);box-shadow:var(--sh-xs);
  color:var(--text);transition:transform var(--t) var(--ease),box-shadow var(--t),border-color var(--t);overflow:hidden;isolation:isolate}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 100% 0%,var(--blue-50),transparent 55%);opacity:0;transition:opacity var(--t)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--blue-100);color:var(--text)}
.svc:hover::before{opacity:1}
.svc__ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600);transition:background var(--t),color var(--t)}
.svc__ico .icon{width:24px;height:24px}
.svc:hover .svc__ico{background:var(--grad-brand);color:#fff}
.svc--sun .svc__ico{background:var(--sun-100);color:var(--sun-600)}
.svc--sun:hover .svc__ico{background:var(--grad-sun);color:#1A1206}
.svc h3{font-size:var(--fs-lg)}
.svc p{font-size:var(--fs-sm);color:var(--text-muted);margin:0;flex:1}
.svc__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-4);margin-top:var(--s-2);border-top:1px dashed var(--border)}
.svc__price{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5}
.svc__price b{display:block;font-size:var(--fs-md);color:var(--ink-900);font-weight:700}
.svc__go{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink-100);color:var(--ink-700);transition:background var(--t),color var(--t),transform var(--t) var(--ease)}
.svc__go .icon{width:18px;height:18px}
.svc:hover .svc__go{background:var(--primary);color:#fff;transform:translateX(-3px)}

.feature{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-8) var(--s-6);border-radius:var(--r-xl);background:#fff;border:1px solid var(--border-soft);transition:box-shadow var(--t),transform var(--t) var(--ease)}
.feature:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.feature__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--grad-brand);box-shadow:var(--sh-blue)}
.feature__ico .icon{width:26px;height:26px}
.feature__ico--sun{background:var(--grad-sun);color:#1A1206;box-shadow:0 10px 30px -10px rgba(247,154,30,.55)}
.feature h3{font-size:var(--fs-lg)}
.feature p{margin:0;color:var(--text-muted);font-size:.95rem}

/* Bento grid */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-5)}
.bento>.feature{grid-column:span 2}
.bento>.feature--wide{grid-column:span 3}
.bento>.feature--hero{grid-column:span 3;background:var(--grad-deep);border-color:transparent;color:var(--on-deep);position:relative;overflow:hidden}
.bento>.feature--hero h3{color:#fff;font-size:var(--fs-xl)}
.bento>.feature--hero p{color:var(--on-deep)}
.bento>.feature--hero::after{content:"";position:absolute;width:260px;height:260px;inset-inline-end:-90px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(255,185,56,.35),transparent 70%)}
@media (max-width:991px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento>.feature,.bento>.feature--wide,.bento>.feature--hero{grid-column:span 1}}
@media (max-width:639px){.bento{grid-template-columns:1fr}}

/* Story / split media panels */
.panel{border-radius:var(--r-2xl);overflow:hidden;background:var(--ink-50);border:1px solid var(--border-soft)}
.panel img{width:100%;height:100%;object-fit:cover}
.checklist{list-style:none;display:grid;gap:var(--s-3);margin:var(--s-6) 0}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.8}
.checklist .icon{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--green-50);color:var(--green-500);margin-top:.2rem}
.why-list{display:grid;gap:var(--s-4)}
.why-item{display:flex;gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-xl);background:#fff;border:1px solid var(--border-soft);transition:border-color var(--t),box-shadow var(--t)}
.why-item:hover{border-color:var(--blue-100);box-shadow:var(--sh-sm)}
.why-item__ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600)}
.why-item h3{font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.why-item p{margin:0;color:var(--text-muted);font-size:.95rem}
.why-item p+p{margin-top:.6em}

/* 13 — Pricing ----------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);align-items:stretch}
@media (max-width:991px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.plans>.plan:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - var(--s-3));justify-self:center;width:100%}}
@media (max-width:679px){.plans{grid-template-columns:1fr}.plans>.plan:last-child:nth-child(odd){max-width:none}}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:var(--s-8) var(--s-6) var(--s-6);box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t),border-color var(--t)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--blue-200)}
.plan--featured{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,var(--sun-400),var(--blue-500) 55%,var(--blue-700)) border-box;box-shadow:var(--sh-lg)}
@media (min-width:992px){.plan--featured{transform:translateY(-10px)}.plan--featured:hover{transform:translateY(-14px)}}
.plan__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 6px 16px -6px rgba(247,154,30,.6)}
.plan__head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2)}
.plan__ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600)}
.plan--featured .plan__ico{background:var(--grad-brand);color:#fff}
.plan__name{font-size:var(--fs-xl)}
.plan__tag{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 var(--s-5)}
.plan__price{padding:var(--s-5) 0;border-block:1px solid var(--border-soft);margin-bottom:var(--s-5)}
.plan__from{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:.15rem}
.plan__amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem;line-height:1.3}
.plan__amount b{font-size:clamp(1.75rem,1.5rem + 1vw,2.25rem);font-weight:700;color:var(--ink-900);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan__amount span{font-size:var(--fs-sm);color:var(--ink-600)}
.plan__amount small{font-size:var(--fs-sm);color:var(--text-muted)}
.plan__alt{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-top:.35rem}
.plan__features{list-style:none;display:grid;gap:.15rem;margin:0 0 var(--s-6);flex:1}
.plan__features li{display:flex;align-items:flex-start;gap:.6rem;padding:.42rem 0;font-size:.92rem;line-height:1.7;color:var(--ink-600)}
.plan__features li .icon{flex:none;width:18px;height:18px;padding:3px;margin-top:.2rem;border-radius:50%;background:var(--blue-50);color:var(--blue-600)}
.plan__features li.is-no{color:var(--ink-400)}
.plan__features li.is-no .icon{background:var(--ink-100);color:var(--ink-400)}
.plan__features .k{flex:1}
.plan__features .v{font-weight:500;color:var(--ink-900);white-space:nowrap;text-align:left}
.plan__features li.is-no .v{color:var(--ink-400)}
.plan .btn{width:100%}
.plans-more{text-align:center;margin-top:var(--s-12)}
.plans-note{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--s-6);text-align:center}
.plans-note .icon{color:var(--blue-600);width:1.1rem;height:1.1rem}
/* Billing switch (home) */
.billing{display:inline-flex;padding:4px;border-radius:var(--r-full);background:var(--ink-100);border:1px solid var(--border-soft);margin:0 auto var(--s-10);position:relative}
.billing button{position:relative;z-index:1;border:0;background:none;padding:.5rem 1.25rem;border-radius:var(--r-full);font-weight:500;color:var(--ink-600);transition:color var(--t-fast),background var(--t-fast)}
.billing button[aria-pressed="true"]{background:#fff;color:var(--ink-900);box-shadow:var(--sh-sm)}
.billing-wrap{text-align:center}
[data-billing="quarter"] .plan__amount[data-period="year"],[data-billing="year"] .plan__amount[data-period="quarter"]{display:none}
[data-billing="quarter"] .plan__alt[data-period="quarter"],[data-billing="year"] .plan__alt[data-period="year"]{display:none}
/* Compare-all features list for product pages */
.includes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.includes li{list-style:none;display:flex;gap:.75rem;align-items:center;padding:var(--s-4);border-radius:var(--r-lg);background:#fff;border:1px solid var(--border-soft);font-size:.93rem;font-weight:500;color:var(--ink-800);line-height:1.6}
.includes .icon{flex:none;width:36px;height:36px;padding:8px;border-radius:10px;background:var(--blue-50);color:var(--blue-600)}
@media (max-width:991px){.includes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.includes{grid-template-columns:1fr}}

/* 14 — Dark sections / infrastructure / stats --------------------------- */
.section--dark{background:var(--grad-deep);color:var(--on-deep);overflow:hidden;isolation:isolate}
.section--dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 100% 0%,rgba(56,189,248,.14),transparent 60%),radial-gradient(40% 50% at 0% 100%,rgba(255,185,56,.12),transparent 60%),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/56px 56px}
.section--dark .section-title{color:#fff}
.section--dark .section-lead{color:var(--on-deep)}
.section--dark .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.infra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:var(--r-xl);overflow:hidden;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.infra__item{background:rgba(8,31,69,.55);backdrop-filter:blur(4px);padding:var(--s-8) var(--s-6);transition:background var(--t)}
.infra__item:hover{background:rgba(30,111,208,.22)}
.infra__item .icon{width:28px;height:28px;color:var(--sun-300);margin-bottom:var(--s-4)}
.infra__item h3{color:#fff;font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.infra__item p{margin:0;font-size:.93rem;color:var(--on-deep-muted)}
@media (max-width:991px){.infra{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575px){.infra{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6);margin-top:var(--s-16);padding-top:var(--s-12);border-top:1px solid rgba(255,255,255,.18)}
.stat{text-align:center}
.stat b{display:block;font-size:clamp(2rem,1.5rem + 2vw,3rem);font-weight:700;line-height:1.2;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:var(--fs-sm);color:var(--on-deep-muted)}
@media (max-width:767px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8) var(--s-4)}}

/* 15 — Platforms switcher ------------------------------------------------ */
.platforms{display:grid;grid-template-columns:260px 1fr;gap:var(--s-8);align-items:center}
.platforms-list{list-style:none;display:grid;gap:var(--s-2)}
.platform-link{display:flex;align-items:center;gap:var(--s-3);width:100%;padding:.7rem .9rem;border-radius:var(--r-md);border:1px solid transparent;background:none;text-align:right;color:var(--ink-700);font-weight:500;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.platform-link img{width:32px;height:32px;object-fit:contain;border-radius:8px}
.platform-link:hover{background:#fff;border-color:var(--border-soft)}
.platform-link.active{background:#fff;border-color:var(--blue-200);color:var(--ink-900);box-shadow:var(--sh-sm)}
.platform-link .tool-tip{flex:1}
#browser{border-radius:var(--r-xl);background:#fff;border:1px solid var(--border);box-shadow:var(--sh-lg);overflow:hidden}
#browser::before{content:"";display:block;height:38px;border-bottom:1px solid var(--border-soft);
  background:radial-gradient(circle at 18px 19px,#FF6159 5px,transparent 6px),radial-gradient(circle at 36px 19px,#FFBD2E 5px,transparent 6px),radial-gradient(circle at 54px 19px,#28C941 5px,transparent 6px),var(--ink-50);
  background-repeat:no-repeat;background-position:left top}
#browser .webpage{position:relative;aspect-ratio:1104/706;background:var(--ink-50)}
#browser .webpage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
#browser .webpage img.active{opacity:1}
@media (max-width:860px){.platforms{grid-template-columns:1fr}.platforms-list{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-link{flex-direction:column;text-align:center;gap:.35rem;font-size:var(--fs-xs);padding:.6rem .3rem}}

/* 16 — Prose / content --------------------------------------------------- */
.prose{font-size:var(--fs-md);color:var(--ink-600);max-width:780px}
.prose--center{margin-inline:auto}
.prose h2{font-size:var(--fs-2xl);margin:1.6em 0 .6em}
.prose h3{font-size:var(--fs-xl);margin:1.5em 0 .5em}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--ink-900)}
.notice{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);background:var(--blue-50);border:1px solid var(--blue-100);color:var(--ink-700);font-size:.95rem}
.notice .icon{flex:none;color:var(--blue-600);margin-top:.25rem}
.notice--sun{background:var(--sun-100);border-color:#FDE3B0}
.notice--sun .icon{color:var(--sun-600)}
.notice--dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--on-deep)}
.notice--dark .icon{color:var(--sun-400)}
.reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:767px){.reasons{grid-template-columns:1fr}}

/* 17 — FAQ --------------------------------------------------------------- */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:var(--s-3)}
.faq details{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);transition:border-color var(--t),box-shadow var(--t)}
.faq details[open]{border-color:var(--blue-100);box-shadow:var(--sh-sm)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) var(--s-6);cursor:pointer;font-weight:500;color:var(--ink-900);font-size:var(--fs-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background:var(--ink-100);color:var(--ink-600);transition:transform var(--t) var(--ease),background var(--t),color var(--t)}
.faq details[open] summary .icon{transform:rotate(180deg);background:var(--primary);color:#fff}
.faq__a{padding:0 var(--s-6) var(--s-5);color:var(--text-muted)}
.faq__a p{margin:0}

/* 18 — CTA band & promo -------------------------------------------------- */
.cta{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-2xl);padding:clamp(2.5rem,2rem + 3vw,4.5rem) clamp(1.5rem,1rem + 4vw,4.5rem);background:linear-gradient(120deg,var(--blue-600) 0%,var(--deep-2) 60%,var(--deep-3) 100%);color:var(--blue-100);
  display:grid;grid-template-columns:1fr auto;gap:var(--s-8);align-items:center}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 90% at 0% 0%,rgba(255,185,56,.35),transparent 60%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/40px 40px}
.cta h2{color:#fff;font-size:var(--fs-2xl);margin-bottom:var(--s-2)}
.cta p{margin:0;color:var(--blue-100);max-width:620px}
@media (max-width:767px){.cta{grid-template-columns:1fr;text-align:center}.cta .btn-row{justify-content:center}.cta p{margin-inline:auto}}
.promo{display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;justify-content:space-between;padding:var(--s-6) var(--s-8);border-radius:var(--r-xl);background:linear-gradient(120deg,var(--sun-100),#FFF9EC 50%,var(--blue-50));border:1px solid #FBE3B5}
.promo__txt{display:flex;align-items:center;gap:var(--s-4)}
.promo__txt .icon{flex:none;width:48px;height:48px;padding:12px;border-radius:14px;background:var(--grad-sun);color:#1A1206}
.promo__txt strong{display:block;color:var(--ink-900);font-size:var(--fs-lg)}
.promo__txt span{font-size:var(--fs-sm);color:var(--ink-600)}
.promo__code{display:flex;align-items:center;gap:var(--s-3)}
.code-btn{display:inline-flex;align-items:center;gap:.6rem;border:1.5px dashed var(--sun-500);background:#fff;padding:.55rem 1rem;border-radius:var(--r-md);font-weight:700;font-size:1.05rem;color:var(--ink-900);letter-spacing:.06em;direction:ltr}
.code-btn .icon{width:1rem;height:1rem;color:var(--sun-600)}
.code-btn.is-copied{border-style:solid;border-color:var(--green-500)}

/* 19 — Tables (dedicated servers / DataTables) -------------------------- */
.table-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-2xl);box-shadow:var(--sh-md);padding:var(--s-6)}
.table-card__head{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;margin-bottom:var(--s-5)}
.table-card__head h2{font-size:var(--fs-xl)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.table th{position:sticky;top:0;background:var(--ink-50);color:var(--ink-600);font-weight:500;font-size:var(--fs-sm);text-align:right;padding:.85rem 1rem;border-bottom:1px solid var(--border);white-space:nowrap}
.table th:first-child{border-start-start-radius:var(--r-md)}
.table th:last-child{border-start-end-radius:var(--r-md)}
.table td{padding:.9rem 1rem;border-bottom:1px solid var(--border-soft);vertical-align:middle;color:var(--ink-700)}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--blue-50)}
.table .num{font-variant-numeric:tabular-nums;color:var(--ink-400)}
.table .ram{font-weight:700;color:var(--blue-700)}
.table .price{font-weight:700;color:var(--ink-900);white-space:nowrap}
.table .cpu,.table .disk{direction:ltr;text-align:right;unicode-bidi:plaintext}
.table .loc{white-space:nowrap}
.loc-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);padding:.25rem .6rem;border-radius:var(--r-full);background:var(--ink-100);color:var(--ink-700)}
/* DataTables skin (no bootstrap) */
.dataTables_wrapper{position:relative}
.dataTables_wrapper .dt-top,.dataTables_wrapper .dt-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.dataTables_wrapper .dt-bottom{margin:var(--s-4) 0 0}
.dataTables_wrapper .dataTables_length label,.dataTables_wrapper .dataTables_filter label{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--ink-600);margin:0}
.dataTables_wrapper select,.dataTables_wrapper input[type="search"]{height:40px;border:1px solid var(--border);border-radius:var(--r-sm);padding:0 .75rem;background:#fff;color:var(--ink-800);outline:0;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.dataTables_wrapper input[type="search"]{min-width:220px}
.dataTables_wrapper select:focus,.dataTables_wrapper input[type="search"]:focus{border-color:var(--blue-400);box-shadow:var(--focus)}
.dataTables_wrapper .dataTables_info{font-size:var(--fs-sm);color:var(--text-muted)}
.dataTables_wrapper .dataTables_paginate{display:flex;flex-wrap:wrap;gap:4px}
.dataTables_wrapper .paginate_button{min-width:38px;height:38px;padding:0 .7rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;color:var(--ink-700)!important;cursor:pointer;font-size:var(--fs-sm);user-select:none}
.dataTables_wrapper .paginate_button:hover{border-color:var(--blue-300);color:var(--blue-700)!important}
.dataTables_wrapper .paginate_button.current{background:var(--primary);border-color:var(--primary);color:#fff!important}
.dataTables_wrapper .paginate_button.disabled{opacity:.45;cursor:default;pointer-events:none}
.dataTables_wrapper .ellipsis{padding:0 .4rem;align-self:center}
.dataTables_wrapper .dataTables_processing{position:absolute;inset:auto 0 50%;text-align:center}
table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer;position:relative;padding-inline-end:1.8rem}
table.dataTable thead .sorting::after,table.dataTable thead .sorting_asc::after,table.dataTable thead .sorting_desc::after{content:"";position:absolute;inset-inline-end:.7rem;top:50%;width:6px;height:6px;border:solid var(--ink-300);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg)}
table.dataTable thead .sorting_asc::after{border-color:var(--blue-600);transform:translateY(-30%) rotate(-135deg)}
table.dataTable thead .sorting_desc::after{border-color:var(--blue-600)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:767px){
  .table-card{padding:var(--s-4);border-radius:var(--r-xl)}
  .table--cards thead{display:none}
  .table--cards,.table--cards tbody,.table--cards tr,.table--cards td{display:block;width:100%}
  .table--cards tr{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3);background:#fff}
  .table--cards tbody tr:hover{background:#fff}
  .table--cards td{display:flex;justify-content:space-between;gap:var(--s-4);padding:.45rem 0;border-bottom:1px dashed var(--border-soft);text-align:left}
  .table--cards td:last-child{border-bottom:0}
  .table--cards td::before{content:attr(data-label);color:var(--ink-400);font-size:var(--fs-xs);font-weight:500;text-align:right;flex:none}
  .table--cards td.cpu,.table--cards td.disk{direction:rtl}
  .table--cards td.num{display:none}
  .dataTables_wrapper input[type="search"]{min-width:0;width:100%}
  .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_filter label{width:100%}
  .dataTables_wrapper .dt-bottom{justify-content:center}
}

/* 20 — Forms & auth ------------------------------------------------------ */
.field{display:grid;gap:.4rem;margin-bottom:var(--s-4)}
.field label{font-size:var(--fs-sm);font-weight:500;color:var(--ink-700)}
.input-wrap{position:relative}
.input-wrap .icon{position:absolute;inset-inline-start:.9rem;top:50%;transform:translateY(-50%);color:var(--ink-400);pointer-events:none;width:1.15rem;height:1.15rem}
.input{width:100%;height:50px;border:1px solid var(--border);border-radius:var(--r-md);padding:0 1rem;background:#fff;color:var(--ink-900);transition:border-color var(--t-fast),box-shadow var(--t-fast);outline:0}
.input-wrap .input{padding-inline-start:2.75rem}
.input:hover{border-color:var(--ink-300)}
.input:focus{border-color:var(--blue-400);box-shadow:var(--focus)}
.input::placeholder{color:var(--ink-400)}
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:#fff}
.auth__aside{position:relative;overflow:hidden;isolation:isolate;background:var(--grad-deep);color:var(--on-deep);padding:clamp(2rem,1rem + 4vw,4.5rem);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-10)}
.auth__aside::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 100% 0%,rgba(255,170,40,.22),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(30,136,240,.38),transparent 65%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px}
.auth__aside h2{color:#fff;font-size:var(--fs-3xl);margin-bottom:var(--s-4)}
.auth__aside .checklist li{color:#fff}
.auth__aside .checklist .icon{background:rgba(52,210,122,.15);color:#5BE39A}
.auth__main{display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,1rem + 3vw,4rem)}
.auth__card{width:100%;max-width:420px}
.auth__card h1{font-size:var(--fs-2xl);margin:var(--s-6) 0 var(--s-2)}
.auth__links{margin-top:var(--s-6);font-size:var(--fs-sm);color:var(--text-muted);text-align:center}
.auth__links a{font-weight:500}
@media (max-width:899px){.auth{grid-template-columns:1fr}.auth__aside{display:none}}

/* 21 — Footer ------------------------------------------------------------ */
.site-footer{background:linear-gradient(180deg,var(--deep-3) 0%,var(--deep-5) 100%);color:var(--on-deep-muted);position:relative;isolation:isolate;overflow:hidden;font-size:.94rem}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 100% 0%,rgba(132,194,255,.16),transparent 60%),radial-gradient(30% 40% at 0% 100%,rgba(255,185,56,.1),transparent 60%)}
.site-footer a{color:var(--on-deep)}
.site-footer a:hover{color:#fff}
.footer-main{padding:var(--s-16) 0 var(--s-10)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:var(--s-10)}
@media (max-width:991px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:575px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-8) var(--s-5)}.footer-about,.footer-contact-col{grid-column:1/-1}}
.footer-logo{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:var(--s-4)}
.footer-logo img{width:64px;height:43px;object-fit:contain}
.footer-logo strong{color:#fff;font-size:1.2rem;display:block;line-height:1.3}
.footer-logo small{color:var(--sun-300);font-size:.8rem}
.footer-about p{line-height:2;margin-bottom:var(--s-5)}
.footer-features{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.footer-features span{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);padding:.35rem .75rem;border-radius:var(--r-full);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--on-deep)}
.footer-features .icon{width:.95rem;height:.95rem;color:var(--sun-300)}
.footer-title{color:#fff;font-size:1rem;font-weight:500;margin-bottom:var(--s-5)}
.footer-links{list-style:none;display:grid;gap:.6rem}
.footer-links a{display:inline-flex;align-items:center;gap:.35rem;transition:color var(--t-fast),transform var(--t-fast) var(--ease)}
.footer-links a:hover{transform:translateX(-3px)}
.footer-contact{display:grid;gap:var(--s-3)}
.contact-item{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3);border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--on-deep)}
a.contact-item:hover{background:rgba(255,255,255,.1)}
.contact-icon{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.contact-icon .icon{width:18px;height:18px}
.contact-content{display:flex;flex-direction:column;line-height:1.8;min-width:0}
.contact-content small{font-size:var(--fs-xs);color:var(--on-deep-muted)}
.contact-content strong{font-weight:400;color:#fff}
.phone-numbers{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.footer-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-6);margin-top:var(--s-12);padding:var(--s-6);border-radius:var(--r-xl);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.footer-trust-title strong{display:block;color:#fff;font-weight:500}
.footer-trust-title span{font-size:var(--fs-sm)}
.trust-items{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.trust-item{width:96px;height:104px;display:grid;place-items:center;padding:8px;border-radius:var(--r-md);background:#fff;border:0;transition:transform var(--t) var(--ease),box-shadow var(--t)}
.trust-item:hover{transform:translateY(-3px);box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.trust-item img{max-width:100%;max-height:100%;object-fit:contain}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);background:rgba(4,16,38,.3);padding:var(--s-6) 0}
.footer-bottom .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-6)}
.copyright{margin:0;font-size:var(--fs-sm)}
.copyright strong{color:#fff;font-weight:500}
.footer-slogan{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--on-deep)}
.footer-slogan .icon{color:var(--sun-300);width:1rem;height:1rem}
.to-top{position:fixed;inset-inline-end:20px;bottom:20px;z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--ink-700);display:grid;place-items:center;box-shadow:var(--sh-md);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--t),transform var(--t) var(--ease),visibility var(--t)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top .icon{transform:rotate(180deg)}
.to-top:hover{color:var(--blue-700);border-color:var(--blue-200)}

/* Error page */
.error-page{min-height:calc(100vh - var(--header-h));display:grid;place-items:center;text-align:center;padding:var(--s-16) 0}
.error-code{font-size:clamp(6rem,4rem + 10vw,11rem);font-weight:700;line-height:1;letter-spacing:-.04em;background:linear-gradient(160deg,var(--sun-400),var(--blue-500) 55%,var(--blue-800));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:var(--s-4)}
.error-page h1{font-size:var(--fs-2xl);margin-bottom:var(--s-3)}
.error-page .domain-search{margin:var(--s-8) auto 0}
.quick-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:var(--s-8)}

/* 22 — Utilities & motion ----------------------------------------------- */
.mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}.mt-12{margin-top:var(--s-12)}
.mb-0{margin-bottom:0}.pt-0{padding-top:0!important}
.text-strong{color:var(--ink-900)}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal-stagger.is-in>*{opacity:1;transform:none}
.js .reveal-stagger.is-in>*:nth-child(2){transition-delay:.06s}.js .reveal-stagger.is-in>*:nth-child(3){transition-delay:.12s}
.js .reveal-stagger.is-in>*:nth-child(4){transition-delay:.18s}.js .reveal-stagger.is-in>*:nth-child(5){transition-delay:.24s}
.js .reveal-stagger.is-in>*:nth-child(6){transition-delay:.3s}.js .reveal-stagger.is-in>*:nth-child(n+7){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal,.js .reveal-stagger>*{opacity:1;transform:none}
}
@media print{.site-header,.site-footer,.to-top,.nav-backdrop{display:none}.hero,.page-hero{background:#fff;color:#000}.hero h1,.page-hero h1{color:#000}}

/* Mobile refinements -------------------------------------------------- */
.plan__name{font-size:clamp(1.1rem,1rem + .4vw,1.3rem)}
@media (min-width:992px){.split--reverse>:first-child{order:2}}
@media (max-width:639px){
  .hero__visual{display:none}
  .hero__kicker{font-size:var(--fs-xs)}
  .svc{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);padding:var(--s-4)}
  .svc__ico{width:44px;height:44px}
  .svc h3{flex:1;font-size:var(--fs-base)}
  .svc p{display:none}
  .svc__foot{flex-basis:100%;margin-top:0;padding-top:var(--s-3)}
  .grid-3.reveal-stagger{gap:var(--s-3)}
  .promo{padding:var(--s-5)}
  .stats{margin-top:var(--s-10)}
}
.split .includes{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:479px){.split .includes{grid-template-columns:1fr}}
.page-hero .domain-search{margin:var(--s-8) auto 0;text-align:right}
.lead-card{text-align:center}
.lead-card p{max-width:820px;margin:0 auto;font-size:var(--fs-lg);color:var(--ink-700);line-height:2}
.feature__title{font-size:var(--fs-xl);margin:0}
.panel.img-col{aspect-ratio:900/835}
.phone-list{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-weight:700;font-size:var(--fs-md)}
.phone-list a{color:var(--ink-900)}
.phone-list a:hover{color:var(--blue-700)}
.auth__aside .nav__brand-text strong{color:#fff}
.auth__aside .nav__brand-text small{color:var(--sun-400)}
.auth__legal{font-size:var(--fs-sm)}
.util-page{padding:var(--s-10) 0}
.util-page h1{font-size:var(--fs-2xl);margin-bottom:var(--s-6)}
.mega__label--gap{margin-top:var(--s-4)}