:root{ --brand1:#7a2cff; --brand2:#ff3fad; --txt:#111827; --muted:#6b7280; --stroke:#ece8f3; --radius:20px; --ok:#16a34a; --danger:#ef4444; }
*{box-sizing:border-box}
html,body{margin:0; font-size:18.5px; line-height:1.6; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; background:#fafafa; color:var(--txt)}
body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#fafafa; color:var(--txt)}

/* Typography */
h1,h2,h3,h4,h5,h6, .menu a, .domain-title, .domain-row input, .tlds .pill, .domain-row button, .card h3, .kicker, .badge, .stat .label, .loc-toolbar .pill {font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:600; letter-spacing:0}

/* Header */
.header{background:transparent}
.header-wrap{max-width:1200px; margin:12px auto 0; padding:0 20px}
.nav-shell{background:#fff; border:1px solid var(--stroke); border-radius:999px; padding:12px 16px; display:flex; align-items:center; gap:18px; box-shadow:0 10px 30px rgba(0,0,0,.06)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; color:#6b21a8; font-size:28px}

.seg{display:flex; align-items:center; gap:8px; border:1px solid var(--stroke); background:#fff; border-radius:999px; padding:8px 12px; font-weight:700}
.menu{display:flex; gap:18px; flex:1; align-items:center}
.menu a{color:#333; text-decoration:none; font-size:18px}
.menu a:hover{color:var(--brand2)}
.menu .menu-item{position:relative; display:flex; align-items:center}
.menu .has-drop > a::after{content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-left:8px; font-size:12px}
.dropdown{position:absolute; top:110%; left:-8px; background:#fff; border:1px solid var(--stroke); border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:8px; display:none; min-width:220px; z-index:30}
.dropdown a{display:block; padding:10px 12px; border-radius:10px}
.dropdown a:hover{background:#faf5ff; color:#7c3aed}
.has-drop:hover .dropdown{display:block}
.btn{padding:10px 18px; border-radius:999px; border:1px solid var(--stroke); text-decoration:none; font-weight:700; font-size:14px}
.btn.primary{background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#fff; border:none}

/* Hero */
.hero{position:relative; background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#fff; padding:90px 20px 60px; text-align:center; overflow:hidden}
.hero h1{font-size:44px; margin:0 0 8px}
.hero p{max-width:760px; margin:0 auto 8px; font-size:18px; color:#f3f4f6}

/* Domain kartı */
.domain-card{max-width:860px; margin:22px auto 0; background:#fff; border:1px solid var(--stroke); border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:16px; text-align:left}
.domain-title{font-size:20px; margin:0 0 10px; color:#1f2937; text-transform:uppercase}
.domain-row{display:flex; gap:10px}
.domain-row .input-wrap{position:relative; flex:1}
.domain-row input{width:100%; padding:16px 18px 16px 42px; border:1px solid var(--stroke); border-radius:14px; font-size:17px; color:#111827}
.domain-row i.search{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9ca3af}
.domain-row button{padding:16px 20px; border:none; border-radius:14px; background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#fff; cursor:pointer}
.tlds{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.tlds .pill{border:1px solid var(--stroke); border-radius:999px; padding:6px 10px; color:#1f2937; background:#fff}

/* Sections */
.section{max-width:1200px; margin:56px auto; padding:0 20px}
.kicker{display:block; text-align:center; color:#7e22ce; text-transform:uppercase; font-size:12px; letter-spacing:.6px}
.section h2{text-align:center; font-size:30px; margin:8px 0 14px; color:#6b21a8}
.section p.lead{text-align:center; color:var(--muted); margin-bottom:30px}

/* 3'lü Feature Tasarımı */
.features3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width: 1000px){ .features3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .features3{grid-template-columns:1fr} }
.fcard{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--brand1),var(--brand2)) border-box; border:1px solid transparent; border-radius:22px; padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.06)}
.icon-pill{width:48px; height:48px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; font-size:22px; margin-bottom:10px}
.fcard h3{margin:6px 0 8px; color:#6b21a8}
.fdesc{color:#1f2937; margin:0 0 12px; font-size:16.5px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.kpi{border:1px solid var(--stroke); border-radius:12px; padding:8px; text-align:center; font-size:12px; color:#374151}

/* Pricing cards */
.toggle{display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:16px}
.switch{position:relative; width:56px; height:30px}
.switch input{display:none}
.slider{position:absolute; inset:0; background:#e5e7eb; border-radius:999px; cursor:pointer}
.slider::after{content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .25s ease}
.switch input:checked + .slider{background:linear-gradient(135deg, var(--brand1), var(--brand2))}
.switch input:checked + .slider::after{transform:translateX(26px)}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.card{background:#fff; border:1px solid var(--stroke); border-radius:24px; padding:22px; position:relative; box-shadow:0 6px 18px rgba(0,0,0,.06)}
.badge{position:absolute; top:14px; right:-28px; transform:rotate(35deg); background:var(--brand2); color:#fff; padding:6px 40px; font-weight:800}
.price{font-size:36px; font-weight:800; color:#6b21a8}
.card ul{list-style:none; padding:0; margin:14px 0}
.card li{margin:10px 0; color:#374151; font-size:17px}
.card li i{color:var(--ok); margin-right:8px}

/* Lokasyonlar */
#lokasyonlar .section-inner{position:relative; padding:0}
.loc-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:16px}
.loc-head .title{font-size:30px; font-weight:800; color:#111827}
.loc-toolbar{display:flex; align-items:center; gap:10px}
.loc-toolbar .pill{border:1px solid var(--stroke); background:#fff; border-radius:999px; padding:8px 12px; font-size:13px; cursor:pointer}
.loc-toolbar .pill.active{background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; border-color:transparent}

.loc-wrap{position:relative; border:1px solid var(--stroke); border-radius:24px; background:#fff; padding:18px; box-shadow:0 8px 24px rgba(0,0,0,.06)}
.loc-wrap::before{content:""; position:absolute; inset:0; background:
  radial-gradient(900px 300px at 100% -20%, rgba(122,44,255,.05), transparent 50%),
  radial-gradient(900px 300px at 0% 120%, rgba(255,63,173,.05), transparent 50%);
  border-radius:24px; pointer-events:none}

.loc-grid{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
@media (max-width: 1000px){ .loc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .loc-grid{grid-template-columns:1fr} }
.loc-card{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--brand1),var(--brand2)) border-box; border:1px solid transparent; border-radius:18px; padding:16px; transition:transform .15s ease, box-shadow .15s ease}
.loc-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.10)}
.loc-badge{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; background:rgba(122,44,255,.10); color:#6b21a8; font-size:12px}
.loc-card h3{margin:8px 0 10px; font-size:20px; color:#111827}
.cities{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.chip{border:1px solid var(--stroke); background:#fff; border-radius:999px; padding:8px 12px; font-size:15px; color:#111827}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}
.metric{border:1px solid var(--stroke); border-radius:12px; padding:10px; font-size:15px; color:#111827; display:flex; align-items:center; gap:8px; justify-content:center}
.providers{margin-top:10px; font-size:15.5px; color:#1f2937}

/* Footer */
footer{position:relative; background:#0f0b15; color:#e5e7eb; margin-top:56px}
.foot-accent{height:4px; background:linear-gradient(90deg,var(--brand1),var(--brand2))}
.superfoot{max-width:1200px; margin:0 auto; padding:36px 20px; display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr; gap:24px}
.fbrand{display:flex; gap:12px; align-items:center}
.fbrand .bolt{font-size:24px; color:#c084fc}
.superfoot h4{margin:0 0 10px; color:#fff}
.superfoot a{display:block; color:#d1d5db; text-decoration:none; margin:6px 0}
.superfoot a:hover{color:#fff}
.contact-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.contact-pill{border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:8px 12px; color:#e5e7eb; display:inline-flex; gap:8px; align-items:center}
.social{display:flex; gap:10px; margin-top:10px}
.social a{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); color:#fff}
.copy{max-width:1200px; margin:0 auto; padding:10px 20px 24px; color:#9ca3af; font-size:13px; text-align:center; border-top:1px solid rgba(255,255,255,.1)}

/* Mobile */
@media (max-width: 900px){ .menu{display:none} .superfoot{grid-template-columns:1fr 1fr} }

/* Mobile call bar */
.callbar{position:fixed; bottom:14px; right:14px; left:14px; display:none}
.callbar a{display:flex; gap:10px; align-items:center; justify-content:center; width:100%; padding:14px 18px; border-radius:14px; background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#fff; font-weight:800; box-shadow:0 8px 24px rgba(0,0,0,.2)}
@media (max-width: 768px){ .callbar{display:block} }


/* Dropdown robustness */
.menu .menu-item{position:relative}
.menu .has-drop{padding-bottom:10px} /* expand hover area to prevent gap flicker */
.dropdown{position:absolute; top:100%; left:-8px; margin-top:8px; background:#fff; border:1px solid var(--stroke); border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:8px; display:none; min-width:220px; z-index:60}
.menu .has-drop:hover .dropdown,
.menu .has-drop.open .dropdown,
.menu .has-drop:focus-within .dropdown{display:block}
.dropdown a{display:block; padding:10px 12px; border-radius:10px; white-space:nowrap}
.dropdown a:hover{background:#faf5ff; color:#7c3aed}

/* features4 grid */
.features4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width: 1000px){ .features4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .features4{grid-template-columns:1fr} }

/* Dropdown robustness v2 */
.menu .has-drop{position:relative}
.menu .has-drop::before{content:""; position:absolute; left:0; right:0; top:100%; height:12px;} /* hover bridge */
.dropdown{position:absolute; top:100%; left:-8px; margin-top:8px; background:#fff; border:1px solid var(--stroke); border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.12); padding:8px; display:none; min-width:240px; z-index:80; opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease}
.menu .has-drop:hover .dropdown,
.menu .has-drop.open .dropdown,
.menu .has-drop:focus-within .dropdown{display:block; opacity:1; transform:translateY(0)}
.dropdown a{display:block; padding:10px 12px; border-radius:10px; white-space:nowrap}
.dropdown a:hover{background:#faf5ff; color:#7c3aed}

.value-strip{max-width:1200px; margin:36px auto 0; padding:0 20px}
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width: 900px){ .value-grid{grid-template-columns:1fr} }
.value-card{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--brand1),var(--brand2)) border-box; border:1px solid transparent; border-radius:18px; padding:14px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 20px rgba(0,0,0,.06)}
.value-ico{width:42px; height:42px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; font-size:18px}
.value-card b{display:block; font-size:16px}
.value-card small{display:block; color:#6b7280}

.icon-section{max-width:1200px; margin:36px auto 0; padding:0 20px}
.icon-groups{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width: 900px){ .icon-groups{grid-template-columns:1fr} }
.icon-wall{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.icon-pill64{width:72px; height:72px; border-radius:18px; display:grid; place-items:center; background:#fff; border:1px solid var(--stroke); box-shadow:0 6px 16px rgba(0,0,0,.06)}
.icon-pill64 i{font-size:28px}
.icon-svg{width:38px; height:38px; fill:#0f172a} display:block}
.icon-muted{color:#6b7280}

.dropdown .with-ico{display:flex; align-items:center; gap:10px}
.dropdown .with-ico i, .dropdown .with-ico svg{width:18px; height:18px}

.icon-wall{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:center}
.icon-pill64{transition:transform .15s ease, box-shadow .15s ease}
.icon-pill64:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10), 0 0 0 4px rgba(122,44,255,.06)}

/* Logo mark + wordmark */
.brand .logo-mark{width:36px; height:36px; display:block}
.brand .logo-text{font-weight:800; font-size:28px; color:#6b21a8}
@media (max-width: 640px){
  .brand .logo-text{font-size:24px}
  .brand .logo-mark{width:32px; height:32px}
}

/* Labeled icon grid for panels & OS */
.logo-section{max-width:1200px; margin:36px auto 0; padding:0 20px}
.logo-group{margin:8px 0 22px}
.logo-group h3{font-family:Poppins,system-ui; font-weight:700; font-size:18px; color:#111827; margin:0 0 12px 6px}
.logo-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
@media (max-width: 1000px){ .logo-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 700px){ .logo-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 480px){ .logo-grid{grid-template-columns:repeat(2,1fr)} }
.logo-card{background:#fff; border:1px solid var(--stroke); border-radius:18px; padding:12px; box-shadow:0 8px 18px rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; gap:8px}
.logo-card .logo-ic{width:40px; height:40px; display:grid; place-items:center}
.logo-card .logo-ic svg{width:40px; height:40px}
.logo-card .cap{font-size:13.5px; font-weight:600; color:#111827; letter-spacing:.1px; text-align:center}
.logo-card:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.10)}

.brand-logos{max-width:1200px; margin:44px auto 0; padding:0 20px}
.brand-row{margin:8px 0 28px}
.brand-row h3{font-family:Poppins,system-ui; font-weight:800; font-size:22px; color:#0f172a; margin:0 0 16px 6px}
.brand-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
@media(min-width:1280px){ .brand-grid{gap:18px} }
@media(max-width:1000px){ .brand-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:720px){ .brand-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .brand-grid{grid-template-columns:repeat(2,1fr)} }
.brand-card{background:#fff; border:1px solid var(--stroke); border-radius:20px; padding:16px; box-shadow:0 12px 26px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; gap:10px}
.brand-ic{width:48px; height:48px; display:grid; place-items:center}
.brand-ic svg{width:48px; height:48px}
.brand-cap{font:600 14.5px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#0f172a; text-align:center}
.brand-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.12)}


/* ===== Perks v4 (modern, readable) ===== */
.perks.perks-v4{max-width:1200px; margin:0 auto; padding:0 20px}
.perks.perks-v4 .perk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:960px){ .perks.perks-v4 .perk-grid{grid-template-columns:1fr} }
.perk-card2{
  position:relative; background:linear-gradient(#fff,#fff) padding-box,
           linear-gradient(135deg, var(--brand1), var(--brand2)) border-box;
  border:1px solid transparent; border-radius:20px; padding:22px;
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; transition:transform .18s ease, box-shadow .18s ease;
}
.perk-card2:hover{ transform:translateY(-3px); box-shadow:0 24px 54px rgba(0,0,0,.14) }
.perk-icon{
  width:72px; height:72px; border-radius:999px; position:relative;
  background: conic-gradient(from 180deg at 50% 50%, var(--brand1), var(--brand2));
  display:grid; place-items:center; box-shadow:0 10px 24px rgba(122,44,255,.28);
}
.perk-icon::after{
  content:""; position:absolute; inset:6px; border-radius:999px; background:#fff;
}
.perk-icon svg{
  position:relative; z-index:1; width:34px; height:34px; color:#111827; fill:#111827;
}
.perk-title2{margin:8px 0 4px; font-size:19.5px; font-weight:800; color:#0f172a}
.perk-desc2{margin:0; font-size:15.5px; color:#6b7280}


/* === Global SVG safety (prevents 300x150 default) === */
svg{width:24px; height:24px; vertical-align:middle}
.brand-ic svg{width:48px; height:48px}        /* Panels & OS */
.perk-icon svg{width:34px; height:34px}       /* Perks */
.logo-mark svg{width:auto; height:auto}       /* if inline logo used */

/* === Perks v4 refinements === */
.perk-card2{padding:20px 22px 18px; border-radius:22px}
.perk-icon{width:70px; height:70px; box-shadow:0 12px 30px rgba(122,44,255,.22)}
.perk-title2{font-size:19px}
.perk-desc2{font-size:15.75px}


/* === Hero/Perks spacing fix === */
.hero{padding-bottom:84px;}               /* daha ferah alt boşluk */
.perks.perks-v4{margin-top:28px;}         /* hero ile net ayrım */


/* badge for plan family */
.card .badge{
  display:inline-block; margin-bottom:8px; padding:4px 10px;
  font:700 12.5px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#6b21a8; background:#f6f0ff; border:1px solid #ece8f3; border-radius:999px;
}


/* === Wordmark logo sizing (header) === */
.brand .logo-full{height:42px; width:auto; display:block}
@media (max-width: 640px){
  .brand .logo-full{height:36px}
}

/* Remove old spacing based on .logo-text/.logo-mark if present */
.brand .logo-text, .brand .logo-mark{display:none;}


/* header logo compact tuning */
.brand .logo-full{height:40px; width:auto; display:block}
.nav-shell{align-items:center}


/* language switcher */
.lang-switch{position:relative; margin-left:10px; user-select:none}
.lang-switch .current{display:inline-block; padding:8px 12px; border:1px solid var(--stroke); border-radius:999px; background:#fff; font-weight:700; font-size:14px; cursor:pointer}
.lang-switch .list{position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--stroke); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.12); padding:6px; display:none; min-width:140px}
.lang-switch.open .list{display:block}
.lang-switch .list a{display:block; padding:8px 10px; border-radius:8px; font-weight:600; text-decoration:none; color:#374151}
.lang-switch .list a:hover{background:#f5f5ff}


/* auth links in header */
.auth-links{display:flex; gap:8px; align-items:center; margin-left:6px}
.auth-links .auth{display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--stroke);
  border-radius:999px; background:#fff; font-weight:700; font-size:14px; color:#374151}
.auth-links .auth:hover{background:#f8f7fb}
.auth-links .auth.signup{background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#fff; border:none}
.auth-links .auth svg{display:block}
@media (max-width:640px){
  .auth-links .auth span{display:none} /* icon-only on narrow screens */
}


/* ===== Refined auth buttons (header) ===== */
.auth-links{display:flex; gap:10px; align-items:center; margin-left:8px}
.auth-links .auth{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; min-height:40px;
  border:1px solid var(--stroke); border-radius:999px;
  background:#fff; color:#111827; font-weight:600; font-size:14px;
  text-decoration:none; line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.auth-links .auth:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.08); text-decoration:none}
.auth-links .auth:focus-visible{outline:2px solid rgba(122,44,255,.35); outline-offset:2px}
.auth-links .auth svg{display:block; opacity:.85}
.auth-links .auth span{white-space:nowrap}

.auth-links .auth.login{background:#fff; border-color:#ece8f3}
.auth-links .auth.login:hover{background:#faf9ff}

.auth-links .auth.signup{
  background:linear-gradient(135deg, var(--brand1), var(--brand2));
  color:#fff; border:none; box-shadow:0 6px 20px rgba(122,44,255,.25);
}
.auth-links .auth.signup:hover{filter:brightness(1.03); box-shadow:0 10px 28px rgba(122,44,255,.28)}
@media (max-width:640px){
  .auth-links .auth span{display:none}
  .auth-links{gap:6px}
  .auth-links .auth{padding:9px 10px; min-height:36px}
}


/* header alignment tweaks */
.nav-shell{padding-left:14px}
.menu{flex:1}
.header-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.brand{margin-left:0}
/* shrink language label footprint */
.lang-switch .current{padding:8px 10px}


/* ==== Hero tweak ==== */
.hero h1 span{letter-spacing:-.5px}
/* ==== Domain glass card ==== */
.domain-glass{backdrop-filter:saturate(140%) blur(6px); border:1px solid rgba(255,255,255,.35)}
.domain-glass .domain-row input{box-shadow:0 8px 26px rgba(0,0,0,.08)}
.domain-glass .domain-row button{box-shadow:0 8px 26px rgba(122,44,255,.35)}
.tlds-soft .pill{box-shadow:0 2px 10px rgba(0,0,0,.05); font-weight:700}
/* ==== Perks v3 ==== */
.perks.v3{padding:28px 16px}
.perks-wrap{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.perk3{background:#fff; border:1px solid #ece8f3; border-radius:18px; padding:18px 18px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.06)}
.perk3 .ico{display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:14px; background:linear-gradient(135deg, var(--brand1), var(--brand2)); color:#fff;
  box-shadow:0 10px 24px rgba(122,44,255,.25); margin-bottom:10px}
.perk3 h3{margin:0 0 6px; font-size:18px}
.perk3 .muted{margin:0; color:#6b7280}
/* ==== Locations modern ==== */
.loc-modern{padding-top:8px}
.loc-modern .loc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1200px; margin:0 auto}
.loc-modern .loc-card{background:radial-gradient(1200px 200px at 0% 0%, rgba(122,44,255,.15), transparent 60%),
  #fff; border:1px solid #ece8f3; border-radius:18px; padding:14px 16px; box-shadow:0 10px 26px rgba(0,0,0,.05)}
.loc-modern .loc-card h4{margin:0 0 8px; font-size:16px}
.loc-modern .badge{display:inline-block; padding:5px 10px; border-radius:999px; border:1px solid #ece8f3; margin-right:6px; margin-bottom:6px; font-weight:600; color:#374151; background:#fff}
@media (max-width:900px){ .perks-wrap, .loc-modern .loc-grid{grid-template-columns:1fr} }


/* Force-hide any leftover panels/OS sections just in case */
section .control-panels, section .os-list, section.control-panels, section.operating-systems{display:none !important}

/* Modern locations visuals */
.locations.loc-modern{padding:40px 16px}
.locations.loc-modern .wrap{max-width:1200px; margin:0 auto; text-align:center}
.locations.loc-modern h2{font-size:28px; margin:0 0 6px}
.locations.loc-modern .muted{color:#6b7280; margin:0 0 18px}
.locations.loc-modern .loc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.locations.loc-modern .loc-card{
  position:relative; background:#fff; border:1px solid #ece8f3; border-radius:18px; padding:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.06);
  overflow:hidden;
}
.locations.loc-modern .loc-card::before{
  content:""; position:absolute; inset:-1px; border-radius:18px;
  background:radial-gradient(800px 180px at -10% -10%, rgba(122,44,255,.16), transparent 55%);
  pointer-events:none;
}
.locations.loc-modern .loc-card .head{display:flex; align-items:center; gap:10px; margin-bottom:10px; justify-content:center}
.locations.loc-modern .loc-card .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow:0 0 0 4px rgba(122,44,255,.12)}
.locations.loc-modern .loc-card h4{margin:0; font-size:16px}
.locations.loc-modern .loc-card .badges{margin:8px 0 10px}
.locations.loc-modern .loc-card .badge{display:inline-block; padding:6px 11px; border-radius:999px; border:1px solid #ece8f3;
  background:#fff; font-weight:700; color:#374151; margin:4px}
.locations.loc-modern .loc-card .meta{display:flex; gap:12px; justify-content:center; color:#6b7280; font-weight:600; font-size:13px}
@media (max-width:900px){ .locations.loc-modern .loc-grid{grid-template-columns:1fr} }


/* ===== Locations Clean ===== */
.locations.loc-clean{padding:48px 16px}
.locations.loc-clean .wrap{max-width:1200px; margin:0 auto; text-align:center}
.locations.loc-clean h2{font-size:30px; margin:0 0 6px}
.locations.loc-clean .lead{font-weight:700}
.locations.loc-clean .loc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.locations.loc-clean .loc-card{
  background:#fff; border:1px solid #ece8f3; border-radius:20px; padding:16px 18px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  text-align:left; position:relative; overflow:hidden;
}
.locations.loc-clean .loc-card::after{
  content:""; position:absolute; inset:-1px; border-radius:20px;
  background:linear-gradient(180deg, rgba(122,44,255,.06), rgba(255,63,173,.04));
  pointer-events:none;
}
.locations.loc-clean .loc-card.soon{opacity:.7}
.locations.loc-clean .title{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:#111827}
.locations.loc-clean .ping{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow:0 0 0 6px rgba(122,44,255,.12)}
.locations.loc-clean .meta{display:flex; gap:10px; margin-top:8px; color:#374151; font-weight:700; font-size:13px}
.locations.loc-clean .meta span{border:1px solid #ece8f3; border-radius:999px; padding:6px 10px; background:#fff}
@media (max-width:900px){ .locations.loc-clean .loc-grid{grid-template-columns:1fr} }


/* ===== Locations Compact ===== */
.locations.loc-compact{padding:40px 16px}
.locations.loc-compact .wrap{max-width:1200px; margin:0 auto; text-align:center}
.locations.loc-compact h2{font-size:28px; margin:0 0 6px}
.locations.loc-compact .lead{font-weight:700; margin-bottom:16px}
.locations.loc-compact .loc-list{list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; text-align:left}
.locations.loc-compact .loc-list li{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#fff; border:1px solid #ece8f3; border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.05); min-height:44px
}
.locations.loc-compact .loc-list li strong{font-weight:800; color:#111827}
.locations.loc-compact .loc-list li em{margin-left:auto; font-style:normal; color:#6b7280; font-weight:700; font-size:12px}
.locations.loc-compact .dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow:0 0 0 5px rgba(122,44,255,.12)}
@media (max-width:1200px){ .locations.loc-compact .loc-list{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .locations.loc-compact .loc-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .locations.loc-compact .loc-list{grid-template-columns:1fr} }