/* ---------- Global base (keep this near the top) ---------- */
:root{
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
}
html, body{
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
width: 100%;
overflow-x: hidden;
}
/* Some browsers can "lighten" variable fonts when a container sets weight.
Ensure headings/buttons render as intended across pages. */
h1, h2, h3, .btn, .button{
font-variation-settings: normal;
}
/* ---------- Typographic base + normalization ---------- */
:root{
--font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
}
/* Global font family and font rendering sanity */
:root {
--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
}
html, body {
font-family: var(--font-sans);
font-synthesis-weight: none; /* don't fake bold */
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Header/Menu explicit weights so they don't get weakened by generic reset rules */
header .nav a,
header nav a,
.navbar a,
.menu a,
.nav-link {
font-weight: 700;
}
header .btn,
header .btn-primary,
.navbar .btn-primary,
.cta .btn-primary {
font-weight: 700;
}
/* Ensure all nav links have consistent weight */
header nav a {
font-weight: 600; /* instead of 400 or 500 */
}
/* Ensure buttons like Get Started / Client Area are consistent */
header .btn,
header button,
header a.btn {
font-weight: 700;
}
/* Guard against any "* { font-weight: inherit }" that might affect header */
/* header weight reset removed — it was overriding nav weights */
/* header * { font-weight: revert-layer; } */
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* Prevent fake bold/italic synthesis so weights render exactly */
body {
font-family: var(--font-family-sans);
font-weight: var(--fw-400);
font-synthesis-weight: none;
font-synthesis-style: none;
text-rendering: optimizeLegibility;
}
/* If a variable font is used (e.g. Inter VF), lock the axis */
@supports (font-variation-settings: normal) {
body {
font-variation-settings: "wght" 400;
}
}
/* Explicit heading scale (don't rely on inherited misc rules) */
h1, .h1 { font-weight: var(--fw-700); line-height: 1.1; }
h2, .h2 { font-weight: var(--fw-700); line-height: 1.15; }
h3, .h3 { font-weight: var(--fw-600); line-height: 1.2; }
h4, .h4 { font-weight: var(--fw-600); }
h5, .h5 { font-weight: var(--fw-600); }
h6, .h6 { font-weight: var(--fw-600); }
/* Buttons, badges, caps—slightly heavier by default */
button, .btn, .badge, .chip {
font-weight: var(--fw-600);
}
/* Links default weight */
a { font-weight: var(--fw-500); text-decoration: none; }
/* Keep b/strong actually bold (in case they were overridden) */
b, strong { font-weight: var(--fw-700); }
/* Utilities for fine-grained control */
.fw-400 { font-weight: var(--fw-400) !important; }
.fw-500 { font-weight: var(--fw-500) !important; }
.fw-600 { font-weight: var(--fw-600) !important; }
.fw-700 { font-weight: var(--fw-700) !important; }
/* Header / Nav consistency across pages */
.site-header, header.site-header {
font-weight: var(--fw-500);
}
.site-header .nav a,
header .nav a,
header nav a {
font-weight: var(--fw-700);
}
.site-header .nav a.active,
header .nav a.active,
header nav a.active {
font-weight: var(--fw-600);
}
/* Hero titles should always be bold regardless of page */
.hero h1, .hero .title, .hero-title {
font-weight: var(--fw-700);
@supports (font-variation-settings: normal) {
font-variation-settings: "wght" 700;
}
}
/* Prevent descendant "*" rules from changing font-weight */
.section *, .hero *, footer * {
font-weight: inherit;
}
/* do not inherit inside header — we want explicit weights there */
/* ---------- end base typography ---------- */
/* Reset */
* { margin:0; padding:0; box-sizing:border-box }
/* Body */
body {
background-color:var(--color-bg);
color:var(--color-text);
transition:background .3s,color .3s;
padding-top: 84px; /* Account for fixed header height */
}
/* Container width handled below with .header-inner */
/* === Header === */
header {
background:var(--color-header);
padding:20px 0; /* full-width background; vertical padding only */
position:fixed; top:0; left:0; right:0; z-index:1000;
transition: box-shadow .2s ease;
}
/* make sure Inter VF follows the weight axis in header (don't freeze it at 400) */
header { font-variation-settings: normal; }
header.header-scrolled{ box-shadow: 0 6px 14px rgba(0,0,0,.18) }
/* Constrained, centered content inside the full-width header */
.header-inner{
display:flex;
align-items:center;
gap:24px;
padding:0 40px;
margin:0 auto;
max-width:1600px;
position:relative; /* anchor for absolute-positioned mobile menu */
}
/* Logo lane (reserves width so nav/buttons don't overlap) */
.logo { display:flex; align-items:center; width:220px; min-width:180px; }
.logo-img { height:44px; width:auto; display:block; }
/* Theme-based logo switching (IMG version) */
.logo-img { display:none; height:44px; width:auto; }
/* show one based on */
[data-theme="light"] .logo-light { display:block; }
[data-theme="dark"] .logo-dark { display:block; }
@media (max-width:768px){
.logo-img { height:38px; }
}
/* Desktop nav */
.desktop-nav { display:flex; gap:18px; flex:1 1 auto; min-width:0; flex-wrap:nowrap; }
.desktop-nav a {
color:var(--color-text);
text-decoration:none;
font-weight:var(--fw-700);
font-size:15px;
transition:color .3s;
white-space:nowrap; /* keep each link on one line */
letter-spacing:.02em;
padding:8px 6px; /* larger click target */
position:relative; display:inline-block;
}
/* belt-and-suspenders: keep header nav at 700 even if another rule appears later */
.site-header .nav a,
header .nav a,
header nav a { font-weight: var(--fw-700) !important; }
.desktop-nav a:hover { color:var(--color-accent); }
/* Active/hover underline animation */
.desktop-nav a::after{
content:""; position:absolute; left:6px; right:6px; bottom:-6px; height:2px;
background:var(--color-accent); transform:scaleX(0); transform-origin:left;
transition:transform .25s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after,
.desktop-nav a[aria-current="page"]::after{ transform:scaleX(1) }
.desktop-nav a.active,
.desktop-nav a[aria-current="page"]{
color:var(--color-accent);
font-weight:var(--fw-600);
}
/* Right controls */
.auth-links { display:flex; gap:20px; margin-left:auto; flex:0 0 auto; }
.auth-links a { font-weight:700; text-decoration:none }
/* Mobile menu trigger */
.mobile-menu-btn {
display:none;
font-size:24px;
background:none;
border:none;
color:var(--color-text);
cursor:pointer;
padding:8px;
border-radius:6px;
transition:background .2s;
min-width:40px;
min-height:40px;
align-items:center;
justify-content:center;
}
.mobile-menu-btn:hover {
background:var(--btn-bg-hover);
}
.mobile-menu-btn:active {
transform:scale(0.95);
}
/* Mobile slide-out menu */
.mobile-menu{
position:fixed; top:0; right:0; height:100vh; height:100dvh; width:84vw; max-width:320px;
background:var(--color-header);
padding:20px; padding-top:56px; padding-bottom:calc(20px + env(safe-area-inset-bottom));
display:flex; flex-direction:column; gap:16px;
justify-content:flex-start;
overflow-y:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
transform:translateX(100%); transition:transform .3s ease;
z-index:1002; border-left:1px solid var(--btn-border);
}
.mobile-menu.mobile-menu-active{ transform:translateX(0) }
.mobile-menu a { color:var(--color-text); font-weight:700; text-decoration:none; padding:10px 12px; border-bottom:1px solid var(--color-soft); }
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu button:not(.mobile-close-btn) { width:100%; text-align:left; padding:10px 12px; background:none; border:none; color:var(--color-text); font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; }
.mobile-menu button:hover { background:var(--btn-bg-hover); border-radius:6px; }
/* CTA buttons inside the mobile menu */
.mobile-menu a.cta-button,
.mobile-menu a.client-area-button{
border:0; padding:0; margin-top:8px; height:40px;
display:inline-flex; align-items:center; justify-content:center; width:100%;
}
/* Mobile menu grouping */
.mobile-top{ display:flex; flex-direction:column; gap:12px; flex:0 0 auto }
.mobile-bottom{ margin-top:auto; padding-bottom: env(safe-area-inset-bottom); }
.mobile-links{ display:flex; flex-direction:column }
.mobile-ctas{ display:flex; flex-direction:column; gap:8px }
.menu-divider{ height:1px; background:var(--btn-border); margin:6px 0 }
/* Active/selected state in mobile menu */
.mobile-menu a.active,
.mobile-menu a[aria-current="page"]{ color:var(--color-accent); }
/* Backdrop for slide-out */
.mobile-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .25s; z-index:1001; backdrop-filter: blur(2px) }
.mobile-backdrop.active{ opacity:1; pointer-events:auto }
body.no-scroll{ overflow:hidden }
/* Close button inside drawer */
.mobile-close-btn{
position:absolute; top:12px; right:12px;
width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
border:1px solid var(--btn-border); border-radius:8px; background:var(--btn-bg); color:var(--color-text);
font-size:18px; cursor:pointer; transition:background .2s, box-shadow .2s, opacity .2s;
z-index:1003; opacity:0; pointer-events:none;
}
.mobile-menu.mobile-menu-active .mobile-close-btn{ opacity:1; pointer-events:auto }
.mobile-close-btn:hover{ background:var(--btn-bg-hover); box-shadow:0 0 0 3px rgba(30,168,255,.12) inset }
/* Mobile adjustments */
@media (max-width:768px){
.desktop-nav{display:none}
.logo{width:auto;min-width:0;max-width:42%}
.logo-img{height:32px}
.mobile-menu-btn{display:flex;margin-left:auto;width:34px;height:30px;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--btn-border);border-radius:8px;flex:0 0 34px;order:3}
.auth-links{display:flex;gap:6px;row-gap:6px;flex-wrap:nowrap;margin-left:auto;align-items:center}
.theme-toggle{display:none}
/* Hide CTAs in the top bar on mobile; they live in the menu */
.auth-links .cta-button,
.auth-links .client-area-button{display:none}
/* Hide redundant background CTA buttons on mobile */
.hero-background .cta-button,
.hero-background .btn-primary,
.floating-illustration .cta-button {
display: none;
}
header{padding:8px 0;position:fixed;top:0;left:0;right:0;width:100%;}
body{padding-top: 60px;} /* Smaller padding for mobile header */
.header-inner{padding:0 15px; max-width: none; width:100%;}
.plans-grid{grid-template-columns:1fr}
.compare-table{font-size:14px}
.compare-table th,.compare-table td{padding:8px 10px}
.migration{grid-template-columns:1fr;gap:20px}
.mig-steps{grid-template-columns:1fr;gap:10px}
.ts-container{grid-template-columns:1fr;gap:15px}
.ts-nav{display:none}
.ts-track{justify-content:center}
}
/* Slightly tighter at large-but-not-huge widths */
@media (max-width:1536px){
.header-inner{ padding:0 28px; }
.logo{ width:210px; min-width:170px; }
.desktop-nav{ gap:18px; }
.desktop-nav a{ font-size:14px; padding:8px 5px; }
.auth-links{ gap:12px; }
.cta-button, .client-area-button{ padding:0 18px; }
}
/* Tighten header spacing on smaller desktops so nav fits */
/* Extra tightening for 1200–1280px widths */
@media (max-width:1280px){
.header-inner{ padding:0 16px; }
.logo{ width:180px; min-width:160px; }
.desktop-nav{ gap:12px; }
.desktop-nav a{ font-size:13px; }
.auth-links{ gap:8px; }
.cta-button, .client-area-button{ padding:6px 12px; font-size:13.5px; }
}
/* === Theme Vars === */
[data-theme="dark"] {
--color-bg:#0a0f1c;
--color-text:#fff;
--color-accent:#1ea8ff;
--color-header:#111729;
--color-box:#1c223a;
--color-soft:#232b45;
--color-card:#1e293b;
--color-border:rgba(255,255,255,0.2);
--color-surface-secondary:#334155;
--btn-border: rgba(255,255,255,0.18);
--btn-bg: transparent;
--btn-bg-hover: #1c223a;
/* Hero gradient variables */
--hero-top:#0a0f1c;
--hero-bottom:#111729;
--hero-accent-glow: rgba(30,168,255,0.20);
/* Shared section defaults for dark */
--section-tint: transparent;
--card-tint: var(--color-box);
--trust-card-bg: var(--color-box);
--accent-strong: var(--color-accent);
}
[data-theme="light"] {
--color-bg:#fff;
--color-text:#1a1a1a;
--color-accent:#00AEEF;
--color-header:#f0f0f0;
--color-box:#eaeaea;
--color-soft:#f6f7fb;
--color-card:#ffffff;
--color-border:rgba(0,0,0,0.15);
--color-surface-secondary:#f8fafc;
--btn-border: rgba(0,0,0,0.12);
--btn-bg: transparent;
--btn-bg-hover: #f3f4f6;
--hero-top: #ffffff;
--hero-bottom: #e2e6eb;
--hero-accent-glow: rgba(0,174,239,0.25);
/* Light tints and accents */
--section-tint:#f8f9fb;
--card-tint:#f1f3f6;
--trust-card-bg: var(--card-tint);
--accent-strong:#09a8ff;
}
/* Theme toggle buttons (desktop + mobile) */
.theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; /* match button height */
border:1px solid var(--btn-border);
background:var(--btn-bg);
color:var(--color-text);
border-radius:10px;
cursor:pointer;
transition:background .2s, box-shadow .2s, border-color .2s, transform .1s;
}
.theme-toggle:hover{ background:var(--btn-bg-hover); box-shadow:0 0 0 3px rgba(30,168,255,.18) inset }
.theme-toggle:active{ transform: scale(0.98) }
.theme-toggle svg{ width:18px; height:18px }
/* Hide the header theme toggle on mobile/tablet; it exists in the mobile menu */
@media (max-width:1024px){
.theme-toggle{ display:none !important; }
}
.theme-toggle-mobile{
display:flex; align-items:center; gap:8px;
padding:10px 12px; /* inner padding for icon/text */
border:1px solid var(--btn-border);
background:var(--btn-bg);
color:var(--color-text);
border-radius:10px;
cursor:pointer;
width:100%; /* align outer edges with dividers/menu items */
margin:0; /* default */
margin-left:-12px; margin-right:-12px; /* flush with link/divider edges */
}
.theme-toggle-mobile:hover{ background:var(--btn-bg-hover) }
.theme-toggle-mobile svg{ width:18px; height:18px }
/* === Hero === */
.hero {
/* Original website colors with dynamic animation */
background:
radial-gradient(circle at 20% 30%, var(--hero-accent-glow), transparent 70%),
linear-gradient(135deg, var(--hero-top) 0%, var(--hero-bottom) 25%, var(--hero-top) 50%, var(--hero-bottom) 75%, var(--hero-top) 100%);
background-size: 200% 200%, 400% 400%;
animation: heroBackgroundFlow 25s ease infinite;
text-align:center;
/* Unify vertical rhythm for both themes */
padding: clamp(84px, 10vw, 110px) 20px clamp(48px, 6vw, 72px);
min-height:400px;
position: relative;
overflow: hidden;
}
.hero h1 {
/* Same responsive title size for both themes */
font-size: clamp(2.25rem, 3.6vw + 1rem, 3.4rem);
font-weight: var(--fw-700);
margin-bottom: 20px;
letter-spacing: -0.02em;
position: relative;
z-index: 2;
}
@supports (font-variation-settings: normal) {
.hero h1 { font-variation-settings: "wght" 700; }
}
.hero p {
font-size:1.2rem;
max-width:700px;
margin:0 auto 40px;
position: relative;
z-index: 2;
}
.hero .trust-rail,
.hero .trust-bar-wrap {
margin-top: 22px;
}
.cta-secondary{ display:inline-block; margin-top:8px; color:var(--color-text); opacity:.9; text-decoration:none; font-weight:700; padding-left:8px }
.cta-secondary:hover{ color:var(--color-accent); opacity:1 }
.btn-primary {
padding:15px 30px;
background:var(--color-accent);
color:#fff;
border-radius:8px;
font-weight:700;
text-decoration:none;
display:inline-block;
}
[data-theme="light"] .btn-primary{ background:var(--accent-strong) }
[data-theme="light"] .cta-button{ background:var(--accent-strong) }
/* === Trust Bar === */
.trust{ padding:32px 20px 28px; border-top:1px solid var(--btn-border); border-bottom:1px solid var(--btn-border); background:var(--section-tint) }
.trust-title{ text-align:center; font-weight:800; margin:0 0 12px 0 }
.trust-sub{ text-align:center; opacity:.8; margin:-2px 0 14px 0; font-size:.95rem }
.trust-bar {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;
margin:0 auto; /* remove top margin */
max-width:1100px;
padding:14px;
align-items:center; /* center badges within the row */
grid-auto-rows:minmax(64px, auto); /* consistent baseline height */
}
.trust-item {
background:var(--trust-card-bg);
border-radius:10px;
padding:12px 16px;
display:grid; /* grid lets us center on both axes precisely */
grid-auto-flow:column; /* keep icon + text in a row */
align-items:center; /* vertical centering of cells */
justify-content:center; /* horizontal centering */
gap:10px;
font-weight:700;
line-height:1; /* consistent text box height */
min-height:72px; /* equal badge height across breakpoints */
transition:background .15s, transform .12s, box-shadow .2s, color .15s;
}
.trust-item svg { width:20px; height:20px; display:block; color:var(--color-accent) }
.trust-item:hover{ background:var(--btn-bg-hover); transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.12) }
.trust-item:hover svg{ stroke:var(--color-accent); color:var(--color-accent) }
/* Ensure 4 badges in one row on desktop */
@media (min-width:900px){
.trust-bar{ grid-template-columns:repeat(4,1fr) }
}
@media (max-width:600px){ .trust-bar{ grid-template-columns:repeat(2,1fr) } }
/* === Domain checker === */
.domain-checker{background:var(--color-header);padding:40px 35px;text-align:center}
.domain-form input{padding:12px 16px;width:300px;border:none;border-radius:6px;margin-right:10px;font-size:16px}
.domain-form button{padding:12px 20px;background:var(--color-accent);color:#fff;border:none;border-radius:6px;font-weight:700;cursor:pointer}
.domain-result{margin-top:20px;font-size:18px;color:var(--color-accent)}
.tld-quick{margin-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tld-quick button{border:1px solid var(--btn-border);background:var(--color-soft);color:var(--color-text);padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .2s}
.tld-quick button:hover{background:var(--btn-bg-hover);border-color:var(--color-accent)}
/* === Domain Compact (checker + small prices) === */
.domain-compact{background:var(--color-header);padding:28px 20px;margin:0 auto}
.dc-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.dc-left{ text-align:center; display:flex; flex-direction:column; align-items:center }
.dc-left h3{font-size:1.35rem;margin-bottom:12px;font-weight:800}
.domain-compact .domain-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.domain-compact .domain-form input{width:100%;max-width:520px}
.domain-compact .domain-result{margin-top:12px;text-align:center}
.domain-subnote{margin-top:8px; text-align:center; opacity:.85; font-size:.95rem}
.domain-compact .domain-form .btn-ghost{background:var(--btn-bg);color:var(--color-text);border:1px solid var(--btn-border);border-radius:6px;padding:12px 16px;font-weight:700;cursor:pointer}
.domain-compact .domain-form .btn-ghost:hover{background:var(--btn-bg-hover);border-color:var(--color-accent)}
/* Domain ideas pills */
.domain-ideas{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.domain-ideas button{border:1px solid var(--btn-border);background:var(--color-soft);color:var(--color-text);padding:8px 12px;border-radius:999px;cursor:pointer}
.domain-ideas button:hover{background:var(--btn-bg-hover);border-color:var(--color-accent)}
.dc-right,.dc-panel{background:var(--color-box);border:1px solid var(--btn-border);border-radius:10px;padding:14px;display:flex;flex-direction:column}
.dc-panel{ background:var(--card-tint) }
[data-theme="light"] .dc-panel{ box-shadow:0 10px 30px rgba(0,0,0,.08) }
.dc-right h4,.dc-panel h4{margin-bottom:4px;font-weight:800}
.dc-sub{opacity:.8;font-size:.9rem;margin:0 0 10px 0}
/* Grid of popular TLDs */
.dc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:10px}
.dc-item{border:1px solid var(--btn-border);border-radius:10px;background:var(--color-header);padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:84px;cursor:pointer;transition: transform .15s ease, box-shadow .2s ease, background .15s ease}
.dc-item:focus{ outline:2px solid var(--color-accent); outline-offset:2px }
.dc-item:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); background:var(--btn-bg-hover) }
.dc-item .tld{font-weight:800;display:flex;align-items:center;gap:6px}
.dc-item .badge{background:#f1c40f;color:#111;padding:2px 6px;border-radius:999px;font-size:11px;font-weight:800}
.dc-item .price{opacity:.9}
.dc-item .order{display:none}
.dc-item:hover{background:var(--btn-bg-hover)}
.dc-note{opacity:.8;font-size:.9rem;margin-top:auto}
/* domain quick buttons inside compact layout */
.domain-compact .tld-quick{justify-content:flex-start;margin-top:10px}
.domain-compact .tld-quick button{padding:6px 12px}
@media (max-width:900px){
.dc-right,.dc-panel{padding:12px}
.dc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){ .dc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:540px){ .dc-grid{grid-template-columns:1fr} }
/* Header CTAs */
.cta-button{background:var(--color-accent);color:#fff;padding:0 20px;font-weight:700;border-radius:10px;text-decoration:none;transition:background .3s, box-shadow .2s;display:inline-flex;align-items:center;height:40px}
.cta-button:hover{background:#0088cc;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.client-area-button{background:transparent;color:var(--color-text);border:0.75px solid var(--btn-border);padding:0 20px;font-weight:700;border-radius:10px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;height:40px}
.client-area-button:hover{background:var(--btn-bg-hover);border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(30,168,255,.15) inset}
/* === Domain pricing === */
/* old .domain-pricing cards removed in favor of compact list */
/* Mobile tweaks for domain cards */
@media (max-width:768px){
.domain-cards{grid-template-columns:repeat(2,1fr)}
.domain-card{max-width:100%;padding:15px}
.domain-card h3{font-size:1.2rem}
.domain-card .price{font-size:1.1rem}
.btn-primary{font-size:.9rem}
.domain-form input{width:200px;margin-right:8px;margin-bottom:10px}
.domain-form button{width:auto;padding:12px 16px}
.hero h1{font-size:2.2rem}
.hero p{font-size:1.1rem}
.trust-bar{grid-template-columns:repeat(2,1fr);gap:10px}
.trust-item{font-size:14px;padding:10px 12px}
}
/* === Plans === */
.plans{padding:20px 20px;max-width:1200px;margin:0 auto}
.plans h2{text-align:center;font-size:2rem;margin-bottom:30px;font-weight:800}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-items:stretch}
.plan-card{background:var(--color-box);border-radius:14px;padding:22px;padding-top:42px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .18s ease, box-shadow .22s ease, border-color .2s}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.18), 0 0 0 1px var(--color-accent)}
.plan-card.popular:hover{
transform: scale(1.04) translateY(-4px);
box-shadow: 0 0 0 1px rgba(30,168,255,.3), 0 12px 40px rgba(30,168,255,.25), 0 8px 24px rgba(0,0,0,.15);
}
.plan-savings{ font-size:.85rem; color:var(--color-accent); font-weight:700; text-align:center; margin:4px 0 8px; opacity:.9 }
.plan-card.popular{
border:1px solid var(--color-accent);
background:linear-gradient(135deg, rgba(30,168,255,.12) 0%, rgba(30,168,255,.04) 50%, rgba(30,168,255,.08) 100%), var(--color-box);
box-shadow: 0 0 0 1px rgba(30,168,255,.2), 0 8px 32px rgba(30,168,255,.15), 0 4px 16px rgba(0,0,0,.1);
transform: scale(1.02);
}
.plan-ribbon{position:absolute;top:10px;left:12px;background:var(--color-accent);color:#fff;padding:4px 8px;border-radius:6px;font-size:.75rem;font-weight:800;z-index:1}
.plan-top{display:flex;align-items:center;gap:10px}
.plan-top svg{width:22px;height:22px}
.plan-card .subtitle{opacity:.85}
.plan-description{
background: rgba(30, 168, 255, 0.08);
color: var(--color-accent);
padding: 6px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
margin: 8px 0;
display: inline-block;
width: fit-content;
align-self: center;
}
.plan-feats{list-style:none;display:grid;gap:6px;margin:6px 0}
.plan-feats li{display:flex;align-items:center;gap:8px}
.plan-feats li i{width:16px;height:16px;color:var(--color-accent);flex-shrink:0}
.plan-start{font-size:.85rem;opacity:.8;margin-top:auto}
.plan-price{display:flex;align-items:baseline;gap:4px;margin:8px 0}
.plan-price .price{font-size:2.4rem;font-weight:900;line-height:1;color:var(--color-text)}
.plan-price .per{font-size:1.2rem;font-weight:500;opacity:.7;margin-left:2px}
/* Hosting Benefits Grid - Override any existing styles */
.plans .hosting-benefits-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr);
gap: 20px !important;
margin: 40px 0 !important;
align-items: unset !important;
width: 100% !important;
max-width: none !important;
}
.hosting-benefits-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr);
gap: 20px !important;
margin: 40px 0 !important;
align-items: unset !important;
}
/* Hosting Benefit Cards - Override any existing styles */
.plans .hosting-benefit-card {
background: var(--color-box) !important;
border: 1px solid var(--color-border) !important;
border-radius: 12px !important;
padding: 28px 24px !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
display: block !important;
flex-direction: unset !important;
gap: unset !important;
align-items: unset !important;
min-height: unset !important;
width: 100% !important;
max-width: none !important;
}
.hosting-benefit-card {
background: var(--color-box) !important;
border: 1px solid var(--color-border) !important;
border-radius: 12px !important;
padding: 28px 24px !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
display: block !important;
flex-direction: unset !important;
gap: unset !important;
align-items: unset !important;
min-height: unset !important;
}
.hosting-benefit-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: rgba(30, 168, 255, 0.6);
box-shadow: 0 6px 20px rgba(30, 168, 255, 0.25), 0 0 0 1px rgba(30, 168, 255, 0.2);
}
/* Enhanced visual balance for all cards */
.hosting-benefit-card {
border: 1px solid rgba(30, 168, 255, 0.4);
box-shadow: 0 3px 12px rgba(30, 168, 255, 0.15), 0 0 0 1px rgba(30, 168, 255, 0.1);
background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.01) 100%);
}
/* Highlighted key benefits with enhanced styling */
.hosting-benefit-highlight {
border: 2px solid var(--color-accent) !important;
box-shadow: 0 6px 25px rgba(30, 168, 255, 0.4), 0 0 0 1px rgba(30, 168, 255, 0.3) !important;
background: linear-gradient(135deg, rgba(30, 168, 255, 0.08) 0%, rgba(30, 168, 255, 0.02) 50%, var(--color-box) 100%) !important;
position: relative;
transform: scale(1.02);
}
.hosting-benefit-highlight::before {
content: "ESSENTIAL";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--color-accent) 0%, #1e8ce8 100%);
color: white;
padding: 6px 16px;
border-radius: 16px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
z-index: 1;
box-shadow: 0 2px 8px rgba(30, 168, 255, 0.3);
}
.hosting-benefit-highlight:hover {
transform: scale(1.05) translateY(-4px) !important;
box-shadow: 0 8px 30px rgba(30, 168, 255, 0.5), 0 0 0 1px rgba(30, 168, 255, 0.4) !important;
}
.hosting-benefit-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hosting-benefit-card:hover .hosting-benefit-icon {
transform: scale(1.1);
}
.hosting-benefit-icon i {
width: 28px;
height: 28px;
color: white;
}
/* Hosting Icon Colors */
.hosting-ssl-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
.hosting-uptime-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.hosting-support-icon {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.hosting-migration-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.hosting-backup-icon {
background: linear-gradient(135deg, #ec4899, #db2777);
}
.hosting-ssd-icon {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.hosting-apps-icon {
background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.hosting-guarantee-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
.hosting-global-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.hosting-ddos-icon {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.hosting-benefit-card h3 {
margin: 0 0 16px 0;
color: var(--color-text);
font-size: 18px;
font-weight: 600;
}
.hosting-benefit-desc {
margin: 0;
color: var(--color-text-secondary);
font-size: 14px;
line-height: 1.5;
}
/* Hosting Benefits CTA */
.hosting-benefits-cta {
text-align: center;
margin-top: 48px;
padding: 40px 32px;
background: rgba(30, 168, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(30, 168, 255, 0.2);
}
.hosting-benefits-cta p {
margin: 0 0 16px 0;
color: var(--color-text);
font-size: 18px;
font-weight: 500;
}
.hosting-benefits-btn {
display: inline-block;
background: var(--color-accent);
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.hosting-benefits-btn:hover {
background: #1e8ce8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(30, 168, 255, 0.3);
}
/* Performance & Technology Section */
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: var(--color-text-secondary);
margin-bottom: 40px;
opacity: 0.8;
}
.performance-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin: 40px 0;
align-items: stretch;
}
.performance-card {
background: var(--color-box);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 32px 24px 24px 24px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.performance-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border-color: var(--color-primary);
}
.performance-highlight {
background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.05) 100%);
border-color: var(--color-primary);
box-shadow: 0 4px 20px rgba(30, 168, 255, 0.1);
}
/* Specific badge labels for each performance card with color-matched backgrounds */
.performance-card:nth-child(1)::before {
content: "HARDWARE";
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #f59e0b, #f97316);
color: white;
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.performance-card:nth-child(2)::before {
content: "SECURITY";
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.performance-card:nth-child(3)::before {
content: "NETWORK";
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.performance-card:nth-child(4)::before {
content: "SECURITY";
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.performance-card:nth-child(5)::before {
content: "GLOBAL";
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: white;
padding: 6px 16px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.performance-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
margin-top: 16px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.performance-icon i {
width: 32px;
height: 32px;
color: white;
}
.performance-cpu-icon {
background: linear-gradient(135deg, #f59e0b, #f97316);
}
.performance-protocol-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
.performance-network-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.performance-ddos-icon {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.performance-global-icon {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.performance-card h3 {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 16px 0;
color: var(--color-text);
}
.performance-desc {
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-text-secondary);
margin: 0 0 20px 0;
}
.performance-metric {
background: rgba(30, 168, 255, 0.1);
border: 1px solid rgba(30, 168, 255, 0.2);
border-radius: 12px;
padding: 16px;
margin-top: 16px;
}
.metric-value {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 4px;
}
.metric-label {
font-size: 0.85rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.performance-cta {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, rgba(30, 168, 255, 0.05), rgba(14, 165, 233, 0.05));
border-radius: 16px;
margin-top: 40px;
}
.performance-cta p {
font-size: 1.1rem;
color: var(--color-text);
margin: 0 0 20px 0;
font-weight: 500;
}
.performance-btn {
display: inline-block;
background: linear-gradient(135deg, var(--color-primary), #0ea5e9);
color: white;
padding: 14px 28px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(30, 168, 255, 0.3);
}
.performance-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(30, 168, 255, 0.4);
background: linear-gradient(135deg, #0ea5e9, var(--color-primary));
}
/* Reseller Benefits Grid - Override any existing styles */
.plans .reseller-benefits-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr);
gap: 20px !important;
margin: 40px 0 !important;
align-items: unset !important;
width: 100% !important;
max-width: none !important;
}
.reseller-benefits-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr);
gap: 20px !important;
margin: 40px 0 !important;
align-items: unset !important;
}
/* Reseller Benefit Cards - Override any existing styles */
.plans .reseller-benefit-card {
background: var(--color-box) !important;
border: 1px solid var(--color-border) !important;
border-radius: 12px !important;
padding: 28px 24px !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
.reseller-benefit-card {
background: var(--color-box) !important;
border: 1px solid var(--color-border) !important;
border-radius: 12px !important;
padding: 28px 24px !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
.reseller-benefit-card:hover {
transform: translateY(-4px) scale(1.02) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}
/* Enhanced hover for bottom row cards */
.reseller-benefit-card:not(.reseller-benefit-highlight):hover {
border-color: rgba(30, 168, 255, 0.6) !important;
box-shadow: 0 6px 20px rgba(30, 168, 255, 0.25), 0 0 0 1px rgba(30, 168, 255, 0.2) !important;
}
/* Enhanced visual balance for bottom row cards */
.reseller-benefit-card:not(.reseller-benefit-highlight) {
border: 1px solid rgba(30, 168, 255, 0.4) !important;
box-shadow: 0 3px 12px rgba(30, 168, 255, 0.15), 0 0 0 1px rgba(30, 168, 255, 0.1) !important;
background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.01) 100%) !important;
}
.reseller-benefit-highlight {
border: 2px solid var(--color-accent) !important;
box-shadow: 0 4px 15px rgba(30, 168, 255, 0.2) !important;
background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.02) 100%) !important;
}
/* Reseller Benefit Icons */
.reseller-benefit-icon {
width: 60px !important;
height: 60px !important;
margin: 0 0 20px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
}
.reseller-benefit-card:hover .reseller-benefit-icon {
transform: scale(1.1) !important;
}
/* Icon consistency - add subtle border to bottom row icons */
.reseller-benefit-card:not(.reseller-benefit-highlight) .reseller-benefit-icon {
border: 2px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.reseller-benefit-icon i {
width: 28px !important;
height: 28px !important;
color: white !important;
}
/* Reseller Benefit Icon Colors */
.reseller-ssl-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
.reseller-uptime-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.reseller-support-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.reseller-migration-icon {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.reseller-backup-icon {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.reseller-ssd-icon {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.reseller-whm-icon {
background: linear-gradient(135deg, #84cc16, #65a30d);
}
.reseller-branding-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.reseller-nameservers-icon {
background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.reseller-guarantee-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
.reseller-setup-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.reseller-benefit-card h3 {
margin: 0 0 16px 0 !important;
color: var(--color-text) !important;
font-size: 18px !important;
font-weight: 600 !important;
}
.reseller-benefit-desc {
margin: 0 !important;
color: var(--color-text-secondary) !important;
font-size: 14px !important;
line-height: 1.5 !important;
flex-grow: 1 !important;
}
/* Reseller Benefits CTA */
.reseller-benefits-cta {
text-align: center !important;
margin-top: 50px !important;
padding: 40px 20px !important;
background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.02) 100%) !important;
border-radius: 16px !important;
border: 1px solid rgba(30, 168, 255, 0.2) !important;
}
.reseller-benefits-cta p {
margin: 0 0 20px 0 !important;
font-size: 18px !important;
color: var(--color-text) !important;
font-weight: 500 !important;
}
.reseller-benefits-btn {
display: inline-block !important;
padding: 12px 24px !important;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
color: white !important;
text-decoration: none !important;
border-radius: 8px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(30, 168, 255, 0.3) !important;
}
.reseller-benefits-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(30, 168, 255, 0.4) !important;
background: linear-gradient(135deg, #0ea5e9, var(--color-primary)) !important;
}
/* Mobile Responsive for Hosting Benefits */
@media (max-width: 1200px) {
.hosting-benefits-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px !important;
}
.hosting-benefit-card {
padding: 20px 16px !important;
}
.reseller-benefits-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 18px !important;
}
.reseller-benefit-card {
padding: 24px 20px !important;
}
}
@media (max-width: 1024px) {
.hosting-benefits-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.hosting-benefit-card {
padding: 20px 16px !important;
}
.reseller-benefits-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
}
.reseller-benefit-card {
padding: 24px 20px !important;
}
}
@media (max-width: 768px) {
.hosting-benefits-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.hosting-benefit-card {
padding: 20px 16px !important;
}
.hosting-benefits-cta {
padding: 30px 20px;
}
.reseller-benefits-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px !important;
}
.reseller-benefit-card {
padding: 24px 20px !important;
}
.reseller-benefits-cta {
padding: 32px 20px !important;
margin-top: 40px !important;
}
}
@media (max-width: 480px) {
.hosting-benefits-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.hosting-benefit-card {
padding: 16px 12px !important;
}
.hosting-benefit-icon {
width: 50px !important;
height: 50px !important;
margin: 0 auto 12px !important;
}
.hosting-benefit-icon i {
width: 20px !important;
height: 20px !important;
}
.reseller-benefits-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
.reseller-benefit-card {
padding: 20px 16px !important;
}
.reseller-benefit-icon {
width: 50px !important;
height: 50px !important;
margin: 0 auto 16px !important;
}
.reseller-benefit-icon i {
width: 20px !important;
height: 20px !important;
}
.reseller-benefits-cta {
padding: 24px 16px !important;
margin-top: 32px !important;
}
.reseller-benefits-cta p {
font-size: 16px !important;
}
.reseller-benefits-btn {
padding: 10px 20px !important;
font-size: 14px !important;
}
}
/* Performance & Technology Responsive */
@media (max-width: 1200px) {
.performance-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
}
@media (max-width: 768px) {
.performance-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.performance-card {
padding: 24px 20px 16px 20px;
}
.performance-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
margin-top: 24px;
}
.performance-icon i {
width: 28px;
height: 28px;
}
.performance-card h3 {
font-size: 1.2rem;
margin: 0 0 12px 0;
}
.performance-desc {
font-size: 0.9rem;
margin: 0 0 16px 0;
}
.performance-cta {
padding: 30px 16px;
}
}
@media (max-width: 480px) {
.performance-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.performance-card {
padding: 18px 12px 10px 12px;
}
.performance-icon {
width: 44px;
height: 44px;
margin: 0 auto 10px;
margin-top: 20px;
}
.performance-icon i {
width: 22px;
height: 22px;
}
.performance-card h3 {
font-size: 1rem;
margin: 0 0 8px 0;
}
.performance-desc {
font-size: 0.8rem;
margin: 0 0 8px 0;
line-height: 1.4;
}
.performance-card:nth-child(1)::before,
.performance-card:nth-child(2)::before,
.performance-card:nth-child(3)::before,
.performance-card:nth-child(4)::before,
.performance-card:nth-child(5)::before {
top: 12px;
left: 50%;
transform: translateX(-50%);
padding: 4px 12px;
font-size: 0.7rem;
}
.performance-cta {
padding: 24px 12px;
}
.performance-cta p {
font-size: 1rem;
}
.performance-btn {
padding: 12px 24px;
font-size: 0.95rem;
}
}
/* Secondary button style for non-primary plans */
.btn-secondary{padding:10px 20px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--color-text);border-radius:10px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;transition:background .2s,border-color .2s}
.btn-secondary:hover{background:var(--btn-bg-hover);border-color:var(--color-accent)}
/* Web Hosting Billing Toggle Styles */
.hosting-billing-toggle {
display: flex;
justify-content: center;
margin: 2rem 0;
gap: 0.5rem;
}
.hosting-toggle-btn {
background: var(--color-surface-secondary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
opacity: 0.7;
}
.hosting-toggle-btn:hover {
background: var(--color-surface-tertiary);
color: var(--color-text-primary);
opacity: 1;
}
.hosting-toggle-btn.active {
background: var(--color-accent);
color: white;
border-color: var(--color-accent);
opacity: 1;
}
.hosting-savings-badge {
background: #10b981;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
/* Domain Benefits Grid Styles */
.domain-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin: 2rem 0;
}
.domain-benefit-card {
background: var(--color-box);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 24px;
text-align: center;
transition: all 0.3s ease;
}
.domain-benefit-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.domain-benefit-icon {
width: 64px;
height: 64px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 24px;
color: white;
}
.domain-dns-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
.domain-privacy-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.domain-propagation-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.domain-management-icon {
background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.domain-support-icon {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.domain-uptime-icon {
background: linear-gradient(135deg, #10b981, #059669);
}
.domain-lock-icon {
background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.domain-bulk-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.domain-reminder-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.domain-benefit-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 8px;
}
.domain-benefit-desc {
color: var(--color-text-secondary);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* DNS Features Visual Styles */
.dns-features-visual {
padding: 0;
overflow: hidden;
}
.dns-features-dashboard {
background: var(--color-bg);
border-radius: 12px;
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.dns-features-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.feature-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--color-accent), #3b82f6);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.feature-icon i {
width: 20px;
height: 20px;
}
.feature-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--color-text);
}
.dns-features-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.feature-description {
color: var(--color-text-secondary);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
.features-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--color-surface-secondary);
border-radius: 8px;
transition: all 0.2s ease;
}
.feature-item:hover {
background: var(--color-surface-tertiary);
transform: translateX(4px);
}
.feature-item-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.feature-item-icon i {
width: 16px;
height: 16px;
}
.feature-item span {
color: var(--color-text);
font-weight: 500;
font-size: 0.9rem;
}
.dns-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.stat-item {
text-align: center;
padding: 16px 12px;
background: var(--color-surface-secondary);
border-radius: 8px;
transition: all 0.2s ease;
}
.stat-item:hover {
background: var(--color-surface-tertiary);
transform: translateY(-2px);
}
.stat-number {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-accent);
margin-bottom: 4px;
}
.stat-label {
font-size: 0.8rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.speed-highlight {
background: linear-gradient(135deg, #10b981, #059669) !important;
color: white !important;
}
.speed-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.speed-badge i {
width: 18px;
height: 18px;
color: white;
}
/* DNS Management Visual Styles */
.dns-management-visual {
padding: 0;
overflow: hidden;
}
.dns-dashboard {
background: var(--color-bg);
border-radius: 12px;
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.dns-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.dns-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
}
.dns-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
}
.status-dot.active {
background: #10b981;
}
.dns-records {
flex: 1;
margin-bottom: 16px;
}
.dns-record {
display: grid;
grid-template-columns: 40px 60px 1fr 60px 30px;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
align-items: center;
font-size: 0.8rem;
}
.dns-record:last-child {
border-bottom: none;
}
.record-type {
background: var(--color-accent);
color: white;
padding: 4px 6px;
border-radius: 4px;
text-align: center;
font-weight: 600;
font-size: 0.75rem;
}
.record-name {
color: var(--color-text);
font-weight: 500;
}
.record-value {
color: var(--color-text-secondary);
font-family: monospace;
font-size: 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.record-ttl {
color: var(--color-text-secondary);
text-align: center;
font-size: 0.75rem;
}
.status-icon-wrapper {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.status-icon {
width: 14px;
height: 14px;
color: white;
stroke-width: 3;
}
.dns-actions {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.dns-btn {
padding: 6px 12px;
border: 1px solid var(--color-border);
background: var(--color-surface-secondary);
color: var(--color-text);
border-radius: 6px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s ease;
}
.dns-btn.primary {
background: var(--color-accent);
color: white;
border-color: var(--color-accent);
}
.dns-btn:hover {
background: var(--color-surface-tertiary);
}
.dns-btn.primary:hover {
background: var(--color-accent-hover);
}
.propagation-indicator {
border-top: 1px solid var(--color-border);
padding-top: 16px;
}
.propagation-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 12px;
}
.propagation-map {
position: relative;
height: 60px;
background: linear-gradient(135deg, #1e3a8a, #3730a3);
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
}
.world-map-bg {
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 1px, transparent 1px),
radial-gradient(circle at 60% 40%, rgba(255,255,255,0.1) 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 1px, transparent 1px),
radial-gradient(circle at 30% 80%, rgba(255,255,255,0.1) 1px, transparent 1px),
linear-gradient(135deg, #1e3a8a, #3730a3);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.location {
position: absolute;
display: flex;
align-items: center;
gap: 4px;
color: white;
font-size: 0.7rem;
font-weight: 500;
}
.location-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
animation: pulse 2s infinite;
}
.location-dot.glowing {
box-shadow: 0 0 10px rgba(16, 185, 129, 0.6), 0 0 20px rgba(16, 185, 129, 0.4);
}
.location.pending .location-dot {
background: #f59e0b;
animation: pulse-slow 3s infinite;
}
.location.pending .location-dot.glowing {
box-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 0 20px rgba(245, 158, 11, 0.4);
}
.propagation-status {
display: flex;
flex-direction: column;
gap: 6px;
}
.status-text {
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.progress-bar {
height: 4px;
background: var(--color-border);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 75%;
background: linear-gradient(90deg, var(--color-accent), #10b981);
border-radius: 2px;
animation: progress 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.2); }
}
@keyframes pulse-slow {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
@keyframes progress {
0% { width: 0%; }
50% { width: 75%; }
100% { width: 75%; }
}
/* FAQ Support Link */
.faq-support {
margin-top: 32px;
padding: 20px;
text-align: center;
background: var(--color-surface-secondary);
border-radius: 12px;
border: 1px solid var(--color-border);
}
.faq-support p {
margin: 0;
color: var(--color-text-secondary);
font-size: 0.95rem;
}
.support-link {
color: var(--color-accent);
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}
.support-link:hover {
color: var(--color-accent-hover);
text-decoration: underline;
}
/* Solutions Page Styles - More specific to avoid conflicts */
.page-solutions .solutions-hero {
background: linear-gradient(135deg, var(--color-bg) 0%, rgba(15, 23, 42, 0.95) 100%);
padding: 80px 0 0;
text-align: center;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--color-border);
}
.page-solutions .solutions-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(30, 168, 255, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.01) 50%, transparent 70%);
pointer-events: none;
}
.solutions-hero::after {
content: '';
position: absolute;
top: 15%;
right: 8%;
width: 250px;
height: 200px;
background:
url('data:image/svg+xml,') no-repeat center,
linear-gradient(45deg, transparent 40%, rgba(30, 168, 255, 0.02) 50%, transparent 60%),
radial-gradient(circle at 30% 30%, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
background-size: 100px, 100% 100%, 100% 100%;
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
.hero-content h1 {
font-size: 3.2rem;
font-weight: 800;
color: var(--color-text);
margin-bottom: 24px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.hero-story {
margin-bottom: 48px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 24px 20px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.hero-subheadline {
font-size: 1.3rem;
color: var(--color-text);
line-height: 1.6;
font-weight: 400;
margin: 0 auto 32px;
max-width: 700px;
text-align: center;
}
.hero-trust-container {
margin-bottom: 32px;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-trust-badges {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.trust-badge {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 6px 12px;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}
.trust-badge:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.trust-badge i {
width: 14px;
height: 14px;
color: rgba(30, 168, 255, 0.8);
stroke-width: 1.5;
}
.trust-number {
font-size: 1rem;
font-weight: 700;
color: var(--color-text);
}
.trust-label {
font-size: 0.85rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.hero-ctas {
display: flex;
gap: 32px;
justify-content: center;
margin-bottom: 16px;
flex-wrap: wrap;
padding: 20px 0;
}
.cta-group {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: flex-start;
}
.cta-microcopy {
font-size: 0.85rem;
color: var(--color-text-secondary);
font-weight: 500;
text-align: center;
}
.btn-large {
padding: 18px 36px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-success {
background: #10b981;
color: white;
border: 1px solid #10b981;
}
.btn-success:hover {
background: #059669;
border-color: #059669;
}
.hero-guarantee-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 0.9rem;
color: var(--color-text);
font-weight: 500;
padding: 10px 20px;
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.15);
border-radius: 20px;
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}
.hero-guarantee-badge i {
width: 14px;
height: 14px;
color: rgba(16, 185, 129, 0.8);
stroke-width: 1.5;
}
/* Services Grid */
.solutions-services {
padding: 40px 0 80px;
background: var(--color-bg);
scroll-margin-top: 20px;
}
.solutions-services h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text);
margin-top: 40px;
margin-bottom: 48px;
scroll-margin-top: 100px;
}
/* Service Categories */
.service-category {
margin-bottom: 60px;
padding: 40px 0;
position: relative;
}
.service-category:nth-child(even) {
background: var(--color-surface-secondary);
}
.service-category::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 2px;
}
/* Build & Launch Category Specific Styles */
.build-launch-category {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
border-radius: 16px;
margin: 30px 0 40px;
padding: 30px 0;
position: relative;
overflow: hidden;
}
.build-launch-category::before {
display: none;
}
.build-launch-category::after {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.category-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--color-accent), #3b82f6);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.category-badge i {
width: 16px;
height: 16px;
}
.category-stats {
display: flex;
gap: 24px;
margin-top: 20px;
justify-content: center;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
}
.category-stats .stat-number {
display: block;
font-size: 2rem !important;
font-weight: 800;
color: var(--color-accent);
line-height: 1;
}
.category-stats .stat-label {
display: block;
font-size: 1rem !important;
color: var(--color-text-secondary);
margin-top: 8px;
}
.category-header {
text-align: center;
margin-bottom: 32px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
}
.category-header h3 {
font-size: 2.2rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 12px;
position: relative;
}
.category-header h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--color-accent);
border-radius: 1px;
}
.category-subtitle {
font-size: 1.1rem;
color: var(--color-accent);
font-weight: 600;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.category-header p:not(.category-subtitle) {
font-size: 1.2rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.service-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 20px 16px;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
transform: scaleX(0);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: var(--color-accent);
}
.service-card.featured {
border: 2px solid var(--color-accent);
background: linear-gradient(135deg, var(--color-bg), rgba(59, 130, 246, 0.02));
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
}
.service-card.featured:hover {
box-shadow: 0 24px 80px rgba(59, 130, 246, 0.2);
}
.service-badge {
position: absolute;
top: 16px;
right: 16px;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.service-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--color-accent), #3b82f6);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: white;
position: relative;
}
.service-icon::after {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, var(--color-accent), #3b82f6);
border-radius: 22px;
z-index: -1;
opacity: 0.2;
filter: blur(8px);
}
.service-icon i {
width: 28px;
height: 28px;
}
.service-card h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 12px;
line-height: 1.3;
}
.service-card p {
color: var(--color-text-secondary);
margin-bottom: 16px;
line-height: 1.5;
font-size: 0.9rem;
}
.service-features {
margin: 12px 0;
text-align: left;
}
.feature-item {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.feature-item i {
width: 14px;
height: 14px;
color: #10b981;
flex-shrink: 0;
}
.service-price {
margin: 16px 0;
text-align: center;
}
.price-amount {
display: block;
font-size: 1.2rem;
font-weight: 800;
color: var(--color-accent);
line-height: 1;
}
.price-note {
display: block;
font-size: 0.75rem;
color: var(--color-text-secondary);
margin-top: 2px;
font-weight: 500;
}
background: rgba(59, 130, 246, 0.1);
border-radius: 8px;
display: inline-block;
}
.service-cta {
background: var(--color-accent);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.85rem;
margin-top: auto;
box-shadow: 0 2px 6px rgba(30, 168, 255, 0.2);
position: relative;
height: 36px;
min-height: 36px;
}
.service-cta:hover {
background: #0088cc;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(30, 168, 255, 0.3);
}
.service-cta i {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.service-cta:hover i {
transform: translateX(2px);
}
/* Ensure service CTA buttons have consistent styling */
.service-card .service-cta,
.service-card button.service-cta {
background: var(--color-accent);
color: white;
border: none;
}
.service-card .service-cta:hover,
.service-card button.service-cta:hover {
background: #0088cc;
color: white;
}
/* Card v2 Layout - Build & Launch */
/* Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(4, minmax(240px, 1fr));
gap: 20px;
justify-content: center;
}
/* Light mode overrides for better contrast */
[data-theme="light"] .services-grid {
--card-bg: #ffffff;
--border: rgba(0, 0, 0, 0.1);
--muted-2: #6b7280;
--accent: #3b82f6;
}
@media (max-width: 1100px){ .services-grid { grid-template-columns: repeat(2, minmax(260px,1fr)); justify-content: center; } }
@media (max-width: 640px){ .services-grid { grid-template-columns: 1fr; justify-content: center; } }
/* Mobile responsive rules for all service card grids */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.service-card {
max-width: 100%;
width: 100%;
}
/* Ensure all card grids are single column on mobile */
.build-launch-category .services-grid,
.optimize-secure-category .services-grid,
.fix-support-category .services-grid,
.integrate-scale-category .services-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
/* Force single column for How It Works and Featured Works on mobile */
.process-timeline {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.process-step {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.step-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.portfolio-grid {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.portfolio-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
/* Center grids with fewer cards */
.services-grid:has(.service-card:nth-child(3):last-child) {
grid-template-columns: repeat(3, minmax(240px, 1fr));
justify-content: center;
}
.services-grid:has(.service-card:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(240px, 1fr));
justify-content: center;
}
@media (max-width: 1100px) {
.services-grid:has(.service-card:nth-child(3):last-child) {
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
.services-grid:has(.service-card:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
}
/* Card shell */
.service-card{
position: relative;
background: var(--card-bg, rgba(255,255,255,.04));
border: 1px solid var(--border, rgba(255,255,255,.08));
border-radius: 18px;
padding: 22px 22px 18px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Light mode card styling */
[data-theme="light"] .service-card {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.service-card:hover{
transform: translateY(-4px);
border-color: rgba(59,130,246,.45); /* accent */
box-shadow: 0 10px 30px rgba(2,8,23,.35);
}
/* Light mode hover effects */
[data-theme="light"] .service-card:hover {
border-color: rgba(59, 130, 246, 0.6);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}
/* Featured accent */
.service-card--featured{
outline: 1px solid rgba(59,130,246,.55);
outline-offset: 0;
box-shadow: 0 0 0 3px rgba(59,130,246,.18) inset;
}
/* Icon */
.service-card__icon{
width: 56px;height:56px;border-radius:14px;
display:grid;place-items:center;
background: linear-gradient(180deg, rgba(59,130,246,.25), rgba(59,130,246,.14));
color: #fff;margin-bottom: 14px;
}
.service-card__icon [data-lucide]{ width:26px;height:26px; }
/* Text */
.service-card__title{ font-size:1.1rem;font-weight:700;line-height:1.25;margin: 4px 0 8px; }
.service-card__price{ font-size:0.9rem;font-weight:600;color:var(--color-accent);margin:0 0 8px;opacity:0.9; }
.service-card__badge{ position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:0.75rem;font-weight:700;padding:4px 8px;border-radius:12px;text-transform:uppercase;letter-spacing:0.5px; }
.service-card__lead{ color: var(--muted-2, #9aa4b2); margin:0 0 12px; }
/* Light mode text colors */
[data-theme="light"] .service-card__title {
color: #1f2937;
}
[data-theme="light"] .service-card__lead {
color: #6b7280;
}
/* Bullets */
.service-card__bullets{ list-style:none;margin:0 0 14px;padding:0; }
.service-card__bullets li{
display:flex;gap:10px;align-items:flex-start;
color: var(--muted-2,#9aa4b2);
margin:6px 0;
}
.service-card__bullets i[data-lucide]{ width:18px;height:18px;color: var(--accent, #60a5fa); }
/* Light mode bullet colors */
[data-theme="light"] .service-card__bullets li {
color: #6b7280;
}
[data-theme="light"] .service-card__bullets i[data-lucide] {
color: #3b82f6;
}
/* Price + ETA row */
.service-card__meta{
display:flex;justify-content:space-between;align-items:center;
font-size:.95rem;margin: 6px 0 12px;
}
.service-card__meta .price em{ font-style:normal;opacity:.6;margin-right:6px; }
.service-card__meta .eta{ opacity:.75;font-size:.9rem; }
/* Light mode price colors */
[data-theme="light"] .service-card__meta .price {
color: #3b82f6;
}
[data-theme="light"] .service-card__meta .eta {
color: #6b7280;
}
/* Light mode category headers */
[data-theme="light"] .category-header h3 {
color: #1f2937;
}
[data-theme="light"] .category-subtitle {
color: #3b82f6;
}
[data-theme="light"] .category-header p {
color: #6b7280;
}
/* Light mode statistics */
[data-theme="light"] .stat-number {
color: #3b82f6;
}
[data-theme="light"] .stat-label {
color: #6b7280;
}
/* Light mode hero section */
[data-theme="light"] .solutions-hero {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
color: #1f2937;
}
[data-theme="light"] .solutions-hero h1 {
color: #1f2937;
}
[data-theme="light"] .solutions-hero .hero-subheadline {
color: #6b7280;
}
[data-theme="light"] .hero-trust-badges {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .trust-badge {
color: #1f2937;
}
[data-theme="light"] .trust-badge i {
color: #3b82f6;
}
[data-theme="light"] .hero-guarantee-badge {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
color: #059669;
}
[data-theme="light"] .hero-guarantee-badge i {
color: #059669;
}
[data-theme="light"] .cta-microcopy {
color: #6b7280;
}
/* Light mode Build & Launch category */
[data-theme="light"] .build-launch-category {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
border: 1px solid rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .category-badge {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Light mode Solutions Hero */
[data-theme="light"] .solutions-hero {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
color: #1e293b;
}
[data-theme="light"] .solutions-hero::before {
background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%);
}
[data-theme="light"] .hero-badge {
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
color: #3b82f6;
}
[data-theme="light"] .solutions-hero h1 {
color: #1e293b;
}
[data-theme="light"] .gradient-text {
background: linear-gradient(135deg, #3b82f6, #10b981);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .hero-subheadline {
color: #64748b;
}
[data-theme="light"] .hero-description {
color: #6b7280;
}
[data-theme="light"] .hero-stats {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .stat-number {
color: #3b82f6;
}
[data-theme="light"] .stat-label {
color: #64748b;
}
[data-theme="light"] .hero-ctas .btn-outline {
color: #1e293b;
border: 2px solid rgba(30, 41, 59, 0.2);
}
[data-theme="light"] .hero-ctas .btn-outline:hover {
background: rgba(30, 41, 59, 0.05);
border-color: rgba(30, 41, 59, 0.3);
}
[data-theme="light"] .trust-item {
color: #64748b;
}
[data-theme="light"] .trust-item i {
color: #10b981;
}
/* Light mode hero highlights */
[data-theme="light"] .highlight-card {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .highlight-card:hover {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .highlight-icon {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
}
[data-theme="light"] .highlight-icon i {
color: #3b82f6;
}
[data-theme="light"] .highlight-number {
color: #1f2937;
}
[data-theme="light"] .highlight-label {
color: #6b7280;
}
/* Light mode hero guarantees */
[data-theme="light"] .hero-guarantees {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .hero-guarantees h3 {
color: #1f2937;
}
[data-theme="light"] .guarantee-item {
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.08);
color: #374151;
}
[data-theme="light"] .guarantee-item:hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(59, 130, 246, 0.2);
}
[data-theme="light"] .guarantee-item i {
color: #10b981;
}
[data-theme="light"] .hero-guarantees {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .hero-guarantees h3 {
color: #1e293b;
}
/* Solutions Form - Complete Redesign */
.solutions-form {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
color: white;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.solutions-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.form-wrapper {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.form-header {
text-align: center;
margin-bottom: 48px;
}
.form-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
color: #60a5fa;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 20px;
backdrop-filter: blur(10px);
}
.form-badge i {
width: 14px;
height: 14px;
}
.form-header h2 {
font-size: 2.5rem;
font-weight: 800;
margin: 0 0 16px;
background: linear-gradient(135deg, #ffffff, #cbd5e1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.form-header p {
font-size: 1.1rem;
color: #cbd5e1;
margin: 0 0 32px;
}
.form-stats {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.form-stats .stat {
display: flex;
align-items: center;
gap: 8px;
color: #cbd5e1;
font-size: 0.9rem;
}
.form-stats .stat i {
width: 16px;
height: 16px;
color: #34d399;
}
.form-container {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.brief-form {
display: flex;
flex-direction: column;
gap: 32px;
}
.form-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-section h3 {
font-size: 1.2rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 0.9rem;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 4px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 18px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 0.95rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #3b82f6;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 6px 20px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #cbd5e1;
font-weight: 400;
}
.form-group select {
cursor: pointer;
}
.form-group select option {
background: #1e293b;
color: #ffffff;
}
.file-upload-area {
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 32px;
text-align: center;
transition: all 0.3s ease;
position: relative;
}
.file-upload-area:hover {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.05);
}
.file-upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.file-upload-content i {
width: 48px;
height: 48px;
color: #60a5fa;
}
.file-upload-text h4 {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
margin: 0 0 8px;
}
.file-upload-text p {
color: #cbd5e1;
margin: 0;
font-size: 0.9rem;
}
.file-upload-area input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-upload-btn {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.file-upload-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.file-list {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.form-submit {
text-align: center;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.form-submit .btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s ease;
}
.form-submit .btn i {
width: 20px;
height: 20px;
}
.submit-note {
color: #cbd5e1;
font-size: 0.9rem;
margin: 16px 0 0;
}
.trust-note {
color: rgba(203, 213, 225, 0.7);
font-size: 0.8rem;
margin: 8px 0 0;
text-align: center;
font-style: italic;
}
/* Responsive Design */
@media (max-width: 768px) {
.solutions-form {
padding: 60px 0;
}
.form-container {
padding: 24px;
}
.form-row {
grid-template-columns: 1fr;
}
.form-stats {
gap: 20px;
}
.form-header h2 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.form-container {
padding: 20px;
}
.brief-form {
gap: 24px;
}
.form-section {
gap: 16px;
}
}
/* Light mode form styling */
[data-theme="light"] .solutions-form {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
color: #1e293b;
}
[data-theme="light"] .solutions-form::before {
background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.04) 0%, transparent 60%);
}
[data-theme="light"] .form-badge {
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
color: #3b82f6;
}
[data-theme="light"] .form-header h2 {
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .form-header p {
color: #64748b;
}
[data-theme="light"] .form-stats .stat {
color: #64748b;
}
[data-theme="light"] .form-container {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .form-section h3 {
color: #1e293b;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .form-group label {
color: #374151;
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.2);
color: #1e293b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
background: rgba(255, 255, 255, 1);
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 6px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
color: #6b7280;
font-weight: 400;
}
[data-theme="light"] .form-group select option {
background: #ffffff;
color: #1e293b;
}
[data-theme="light"] .file-upload-area {
border-color: rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .file-upload-area:hover {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.05);
}
[data-theme="light"] .file-upload-text h4 {
color: #1e293b;
}
[data-theme="light"] .file-upload-text p {
color: #64748b;
}
[data-theme="light"] .form-submit {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .submit-note {
color: #64748b;
}
/* How It Works Section - Complete Redesign */
.solutions-process {
background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
color: white;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.solutions-process::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.process-header {
text-align: center;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
.process-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
color: #60a5fa;
padding: 8px 16px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 24px;
backdrop-filter: blur(10px);
}
.process-badge i {
width: 16px;
height: 16px;
}
.process-header h2 {
font-size: 3rem;
font-weight: 800;
margin: 0 0 20px;
background: linear-gradient(135deg, #ffffff, #cbd5e1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.process-header p {
font-size: 1.2rem;
color: #cbd5e1;
margin: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.process-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
.process-step {
position: relative;
}
.step-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 32px 24px;
backdrop-filter: blur(15px);
transition: all 0.3s ease;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.step-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(59, 130, 246, 0.3);
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.step-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.step-number {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
flex-shrink: 0;
}
.step-icon {
width: 40px;
height: 40px;
background: rgba(59, 130, 246, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-icon i {
width: 20px;
height: 20px;
color: #60a5fa;
}
.step-content {
flex: 1;
margin-bottom: 20px;
}
.step-content h3 {
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px;
line-height: 1.3;
}
.step-content p {
color: #cbd5e1;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
.step-connector {
position: absolute;
top: 50%;
right: -12px;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: rgba(59, 130, 246, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.step-connector i {
width: 12px;
height: 12px;
color: #60a5fa;
}
.process-guarantees {
text-align: center;
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 48px 32px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.process-guarantees h3 {
font-size: 2.2rem;
font-weight: 800;
color: #ffffff;
margin: 0 0 48px;
background: linear-gradient(135deg, #ffffff, #cbd5e1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.guarantee-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* Hero section guarantee grid should stay 2x2 */
.hero-guarantees .guarantee-grid {
grid-template-columns: 1fr 1fr !important;
gap: 12px;
max-width: none;
}
@media (min-width: 1200px) {
.guarantee-grid {
gap: 24px;
}
}
.guarantee-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 20px 16px;
backdrop-filter: blur(15px);
transition: all 0.4s ease;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
min-height: 140px;
}
.guarantee-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
}
.guarantee-card:hover::before {
opacity: 1;
}
.guarantee-card:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(59, 130, 246, 0.4);
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.guarantee-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
position: relative;
z-index: 2;
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3);
}
.guarantee-icon i {
width: 22px;
height: 22px;
color: #ffffff;
}
.guarantee-content {
position: relative;
z-index: 2;
}
.guarantee-content h4 {
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 8px;
line-height: 1.2;
}
.guarantee-content p {
color: #cbd5e1;
font-size: 0.85rem;
line-height: 1.4;
margin: 0;
opacity: 0.9;
}
.guarantees-tagline {
font-size: 1rem;
color: rgba(255, 255, 255, 0.7);
text-align: center;
margin: 8px 0 32px;
font-style: italic;
}
/* Responsive Design */
@media (max-width: 1024px) {
.process-timeline {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 900px) {
.guarantee-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.guarantee-card {
padding: 18px 14px;
min-height: 120px;
}
.process-guarantees {
padding: 40px 24px;
}
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 768px) {
.solutions-process {
padding: 80px 0;
}
.process-header {
margin-bottom: 60px;
}
.process-header h2 {
font-size: 2.5rem;
}
.process-timeline {
grid-template-columns: 1fr !important;
gap: 20px;
margin-bottom: 60px;
}
.step-card {
padding: 20px 16px;
text-align: center;
}
.step-number {
width: 40px;
height: 40px;
font-size: 1.1rem;
margin: 0 auto 16px;
}
.step-icon {
width: 48px;
height: 48px;
margin: 0 auto 16px;
}
.step-content h4 {
font-size: 1.2rem;
margin-bottom: 12px;
}
.step-content p {
font-size: 0.9rem;
line-height: 1.5;
}
.step-card {
padding: 24px 20px;
}
.step-connector {
display: none;
}
.guarantee-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.process-guarantees {
padding: 32px 20px;
}
.guarantee-card {
padding: 16px 12px;
min-height: 100px;
}
.guarantee-grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
.guarantees-tagline {
font-size: 0.9rem;
margin: 6px 0 24px;
}
/* Hero guarantees should also be single column on mobile */
.hero-guarantees .guarantee-grid {
grid-template-columns: 1fr !important;
gap: 12px;
}
/* Additional mobile optimizations for smaller screens */
.process-timeline {
gap: 16px;
}
.step-card {
padding: 16px 12px;
}
.step-content h4 {
font-size: 1.1rem;
}
.step-content p {
font-size: 0.85rem;
}
.portfolio-card {
padding: 16px 12px;
}
.portfolio-content h3 {
font-size: 1.2rem;
}
.portfolio-content p {
font-size: 0.85rem;
}
/* Force single column layout on all mobile devices */
.process-timeline {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.process-step {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.step-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.portfolio-grid {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.portfolio-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
@media (max-width: 480px) {
.process-header h2 {
font-size: 2rem;
}
/* Ensure single column on very small screens */
.process-timeline {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.process-step {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.step-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.portfolio-grid {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.portfolio-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.step-card {
padding: 20px 16px;
}
.step-header {
gap: 12px;
}
.step-number {
width: 40px;
height: 40px;
font-size: 1rem;
}
.step-icon {
width: 36px;
height: 36px;
}
}
/* Light mode How It Works */
[data-theme="light"] .solutions-process {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
color: #1e293b;
}
[data-theme="light"] .solutions-process::before {
background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.04) 0%, transparent 60%);
}
[data-theme="light"] .process-badge {
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.2);
color: #3b82f6;
}
[data-theme="light"] .process-header h2 {
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .process-header p {
color: #64748b;
}
[data-theme="light"] .step-card {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .step-card:hover {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .step-content h3 {
color: #1e293b;
}
[data-theme="light"] .step-content p {
color: #64748b;
}
[data-theme="light"] .process-guarantees {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .process-guarantees h3 {
background: linear-gradient(135deg, #1e293b, #475569);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .guarantee-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .guarantee-card::before {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(16, 185, 129, 0.03));
}
[data-theme="light"] .guarantee-card:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .guarantee-content h4 {
color: #1e293b;
}
[data-theme="light"] .guarantee-content p {
color: #64748b;
}
[data-theme="light"] .guarantees-tagline {
color: rgba(30, 41, 59, 0.6);
}
/* Portfolio Section Light Mode */
[data-theme="light"] .portfolio-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .portfolio-card:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .portfolio-image {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
color: #1e293b;
}
[data-theme="light"] .label {
color: rgba(30, 41, 59, 0.8);
}
[data-theme="light"] .arrow {
color: #1e293b;
text-shadow: none;
}
[data-theme="light"] .portfolio-content h3 {
color: #1e293b;
}
[data-theme="light"] .metric-value {
color: #3b82f6;
}
[data-theme="light"] .metric-label {
color: rgba(30, 41, 59, 0.9);
}
[data-theme="light"] .portfolio-content .metric-label {
color: rgba(30, 41, 59, 0.9) !important;
}
[data-theme="light"] .portfolio-content p {
color: rgba(30, 41, 59, 0.8);
}
[data-theme="light"] .client-info {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .client-info span {
color: rgba(30, 41, 59, 0.9);
}
/* Solutions Hero Section - Enhanced Design - More specific to avoid conflicts */
.page-solutions .solutions-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
color: white;
padding: 30px 0 40px;
position: relative;
overflow: hidden;
}
.page-solutions .solutions-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.2) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.15) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.page-solutions .solutions-hero .container {
position: relative;
z-index: 2;
}
.page-solutions .solutions-hero .hero-content {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 50px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.hero-left {
text-align: left;
}
.hero-right {
text-align: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.4);
color: #60a5fa;
padding: 8px 16px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 24px;
backdrop-filter: blur(15px);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}
.hero-badge i {
width: 16px;
height: 16px;
}
.page-solutions .solutions-hero h1 {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
margin: 0 0 24px;
letter-spacing: -0.03em;
}
.gradient-text {
background: linear-gradient(135deg, #60a5fa, #34d399, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-subheadline {
font-size: 1.3rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.95);
margin: 0 0 16px;
max-width: 600px;
font-weight: 500;
}
.hero-description {
font-size: 1.1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 32px;
max-width: 600px;
}
.hero-highlights {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 24px;
}
.highlight-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
backdrop-filter: blur(15px);
transition: all 0.3s ease;
flex: 1;
min-width: 0;
}
.highlight-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateX(4px);
}
.highlight-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2));
border-radius: 8px;
flex-shrink: 0;
}
.highlight-icon i {
width: 18px;
height: 18px;
color: #60a5fa;
}
.highlight-content {
flex: 1;
}
.highlight-number {
font-size: 1.3rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 2px;
line-height: 1;
}
.highlight-label {
font-size: 0.75rem;
color: #cbd5e1;
font-weight: 500;
white-space: nowrap;
}
.hero-ctas {
display: flex;
gap: 16px;
margin: 0 0 0;
flex-wrap: wrap;
}
.hero-ctas .btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s ease;
text-decoration: none;
position: relative;
overflow: hidden;
}
.hero-ctas .btn i {
width: 18px;
height: 18px;
}
.hero-ctas .btn-primary {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}
.hero-ctas .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6);
}
.hero-ctas .btn-outline {
background: rgba(255, 255, 255, 0.05);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
}
.hero-ctas .btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}
.hero-guarantees {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 18px;
backdrop-filter: blur(15px);
}
.hero-guarantees h3 {
font-size: 1rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 16px;
text-align: center;
}
.guarantee-item {
display: flex;
align-items: center;
gap: 8px;
color: #e2e8f0;
font-size: 0.8rem;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.guarantee-item:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateX(2px);
}
.guarantee-item i {
width: 16px;
height: 16px;
color: #34d399;
flex-shrink: 0;
}
/* Responsive Design */
@media (max-width: 1024px) {
.solutions-hero .hero-content {
grid-template-columns: 1fr;
gap: 50px;
text-align: center;
}
.hero-left {
text-align: center;
}
.solutions-hero h1 {
font-size: 2.8rem;
}
}
@media (max-width: 768px) {
.page-solutions .solutions-hero {
padding: 50px 0 40px;
}
.page-solutions .solutions-hero .hero-content {
gap: 40px;
}
.page-solutions .solutions-hero h1 {
font-size: 2.4rem;
}
.hero-subheadline {
font-size: 1.1rem;
max-width: 100%;
}
.hero-highlights {
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.highlight-card {
flex: 1;
min-width: 120px;
padding: 12px;
}
.highlight-number {
font-size: 1.2rem;
}
.highlight-label {
font-size: 0.7rem;
}
.hero-ctas {
justify-content: center;
}
.hero-ctas .btn {
padding: 12px 20px;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.page-solutions .solutions-hero {
padding: 40px 0 30px;
}
.page-solutions .solutions-hero h1 {
font-size: 2rem;
}
.hero-highlights {
flex-direction: column;
}
.highlight-card {
min-width: auto;
}
.hero-ctas {
flex-direction: column;
align-items: center;
}
.hero-ctas .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* CTA */
.service-card .btn.service-cta{
display:inline-flex;align-items:center;gap:10px;
padding:10px 14px;border-radius:10px;
}
.service-card .btn.service-cta i[data-lucide]{ width:18px;height:18px; }
/* Quick badge */
.badge-quick{
position:absolute;top:10px;left:10px;
font-size:.75rem;font-weight:700;
background: rgba(34,197,94,.12);
color:#22c55e;border:1px solid rgba(34,197,94,.35);
padding:4px 8px;border-radius:999px;
}
/* Hover restriction for pointer devices */
@media (hover:hover){
.service-card:hover{ transform: translateY(-4px); }
}
/* Process Steps */
.solutions-process {
padding: 60px 0;
background: var(--color-surface-secondary);
position: relative;
}
.solutions-process::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 70%);
pointer-events: none;
}
.solutions-process h2 {
text-align: center;
font-size: 2.4rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 40px;
position: relative;
}
.solutions-process h2::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 2px;
}
.process-timeline {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto 40px;
position: relative;
z-index: 1;
}
.process-step {
flex: 1;
display: flex;
align-items: flex-start;
position: relative;
}
.step-connector {
position: absolute;
top: 40px;
left: 100%;
width: calc(100% - 80px);
height: 2px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
z-index: 1;
}
.step-content {
text-align: center;
max-width: 200px;
margin: 0 auto;
}
.step-number {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--color-accent), #3b82f6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
color: white;
margin: 0 auto 20px;
position: relative;
z-index: 2;
}
.step-icon {
width: 48px;
height: 48px;
background: var(--color-surface-secondary);
border: 1px solid var(--color-border);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--color-accent);
}
.step-icon i {
width: 24px;
height: 24px;
}
.process-step h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 12px;
}
.process-step p {
color: var(--color-text-secondary);
line-height: 1.5;
font-size: 0.95rem;
}
.process-reassurances {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
.reassurance-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--color-surface-secondary);
border: 1px solid var(--color-border);
border-radius: 8px;
color: var(--color-text-secondary);
font-weight: 500;
font-size: 0.95rem;
}
.reassurance-item i {
width: 18px;
height: 18px;
color: #10b981;
}
.pricing-delivery {
font-size: 0.9rem;
color: #10b981;
font-weight: 600;
margin-bottom: 20px;
padding: 4px 12px;
background: rgba(16, 185, 129, 0.1);
border-radius: 6px;
display: inline-block;
}
.step-number {
width: 40px;
height: 40px;
background: var(--color-accent);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
margin: 0 auto 16px;
}
.step-icon {
width: 48px;
height: 48px;
background: var(--color-surface-tertiary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--color-accent);
}
.step-icon i {
width: 24px;
height: 24px;
}
.process-step h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 12px;
}
.process-step p {
color: var(--color-text-secondary);
line-height: 1.5;
}
.process-note {
text-align: center;
margin-top: 32px;
}
.process-note p {
color: var(--color-text-secondary);
font-size: 0.95rem;
}
/* Form Styles */
.solutions-form {
padding: 60px 0;
background: linear-gradient(135deg, var(--color-surface-secondary) 0%, var(--color-bg) 100%);
position: relative;
}
.solutions-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.form-header {
text-align: center;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.form-header h2 {
font-size: 2.4rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
position: relative;
}
.form-header h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 2px;
}
.form-header p {
color: var(--color-text-secondary);
font-size: 1.2rem;
margin-top: 20px;
}
.progress-bar {
width: 200px;
height: 6px;
background: var(--color-border);
border-radius: 3px;
margin: 16px auto 0;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 3px;
transition: width 0.3s ease;
}
.form-note {
display: flex;
align-items: center;
gap: 8px;
margin: 24px 0;
padding: 16px;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
border-radius: 8px;
color: #059669;
font-weight: 500;
}
.form-note i {
width: 20px;
height: 20px;
}
.form-container {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.brief-form {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 32px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
position: relative;
}
.brief-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 20px 20px 0 0;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
font-weight: 600;
color: var(--color-text);
margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-text);
font-size: 1rem;
transition: border-color 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-top: 12px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.checkbox-item:hover {
background: var(--color-surface-tertiary);
}
.checkbox-item input[type="checkbox"] {
width: auto;
margin: 0;
}
.checkbox-item span {
color: var(--color-text);
font-size: 0.95rem;
}
.form-group small {
display: block;
color: var(--color-text-secondary);
font-size: 0.85rem;
margin-top: 4px;
}
.checkbox-group {
margin-top: 24px;
}
/* Portfolio Section */
.solutions-portfolio {
padding: 60px 0;
background: var(--color-bg);
position: relative;
}
.solutions-portfolio::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 70% 30%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
pointer-events: none;
}
.solutions-portfolio h2 {
text-align: center;
font-size: 2.4rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 40px;
position: relative;
}
.solutions-portfolio h2::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 2px;
}
.client-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
margin: 32px 0 48px;
flex-wrap: wrap;
}
.logo-item {
font-size: 1.1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
padding: 8px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
backdrop-filter: blur(10px);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.portfolio-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.portfolio-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
border-color: rgba(59, 130, 246, 0.4);
background: rgba(255, 255, 255, 0.08);
}
.portfolio-image {
height: 180px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.1rem;
position: relative;
overflow: hidden;
}
.before-after {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
height: 100%;
padding: 20px;
}
.before, .after {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.speed-meter, .security-score, .traffic-meter {
padding: 12px 20px;
border-radius: 24px;
font-weight: 700;
font-size: 1.2rem;
min-width: 80px;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.speed-meter.slow {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #ffffff;
}
.speed-meter.fast {
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
}
.security-score.low {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #ffffff;
}
.security-score.high {
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
}
.traffic-meter {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #ffffff;
}
.traffic-meter.up {
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
}
.arrow {
font-size: 1.8rem;
color: #ffffff;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.client-info {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.client-avatar {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.client-info span {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
font-size: 0.9rem;
}
.portfolio-content {
padding: 28px 24px;
}
.portfolio-content h3 {
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
line-height: 1.3;
}
.portfolio-metrics {
display: flex;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.metric {
text-align: center;
flex: 1;
min-width: 0;
}
.metric-value {
display: block;
font-size: 2rem !important;
font-weight: 700;
color: #60a5fa;
margin-bottom: 4px;
}
.portfolio-content .metric-value {
font-size: 1.5rem !important;
font-weight: 700;
position: static !important;
right: auto !important;
top: auto !important;
}
.portfolio-content .metric-label {
font-size: 0.8rem !important;
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 600 !important;
}
.metric-label {
display: block;
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
margin-top: 4px;
font-weight: 600;
}
.portfolio-content p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
font-size: 0.95rem;
margin-bottom: 20px;
}
.portfolio-cta {
text-align: center;
}
/* Pricing Section */
.solutions-pricing {
padding: 60px 0;
background: var(--color-surface-secondary);
position: relative;
}
.solutions-pricing::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
pointer-events: none;
}
.solutions-pricing h2 {
text-align: center;
font-size: 2.4rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 40px;
position: relative;
}
.solutions-pricing h2::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 2px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto 48px;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pricing-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 40px 32px;
text-align: center;
position: relative;
transition: all 0.3s ease;
overflow: hidden;
}
.pricing-card.featured {
border-color: var(--color-accent);
transform: scale(1.05);
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-4px);
}
.pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.pricing-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--color-accent), #3b82f6);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: white;
}
.pricing-icon i {
width: 32px;
height: 32px;
}
.pricing-card h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 16px;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 24px 0;
}
.pricing-features li {
padding: 8px 0;
color: var(--color-text-secondary);
position: relative;
padding-left: 24px;
}
.pricing-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #10b981;
font-weight: 600;
}
.pricing-note {
text-align: center;
margin-top: 32px;
}
.pricing-note a {
color: var(--color-accent);
text-decoration: none;
font-weight: 600;
}
.pricing-note a:hover {
text-decoration: underline;
}
/* Guarantees Section */
.solutions-guarantees {
padding: 60px 0;
background: var(--color-bg);
position: relative;
}
.solutions-guarantees::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 70%);
pointer-events: none;
}
.solutions-guarantees h2 {
text-align: center;
font-size: 2.4rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 40px;
position: relative;
}
.solutions-guarantees h2::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #3b82f6);
border-radius: 2px;
}
.guarantees-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.guarantee-card {
background: var(--color-surface-secondary);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 40px 32px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.guarantee-number {
position: absolute;
top: -12px;
left: 24px;
width: 32px;
height: 32px;
background: #10b981;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
}
.guarantee-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.guarantee-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: white;
}
.guarantee-icon i {
width: 32px;
height: 32px;
}
.guarantee-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 12px;
}
.guarantee-card p {
color: var(--color-text-secondary);
line-height: 1.5;
}
/* FAQ Section */
.solutions-faq {
padding: 60px 0;
background: var(--color-bg);
}
.solutions-faq h2 {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 32px;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--color-surface-secondary);
border: 1px solid var(--color-border);
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
}
.faq-q {
width: 100%;
padding: 24px;
background: none;
border: none;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
color: var(--color-text);
font-size: 1.1rem;
font-weight: 600;
transition: background-color 0.2s ease;
}
.faq-q:hover {
background: var(--color-surface-tertiary);
}
.faq-q i {
width: 20px;
height: 20px;
color: var(--color-accent);
flex-shrink: 0;
}
.faq-a {
padding: 0 24px 24px;
color: var(--color-text-secondary);
line-height: 1.6;
max-height: 0 !important;
overflow: hidden;
opacity: 0 !important;
transition: max-height 0.3s ease, opacity 0.3s ease, padding-bottom 0.3s ease;
display: block;
}
/* Ensure all FAQ answers are collapsed by default on all pages */
.faq-item .faq-a {
max-height: 0 !important;
opacity: 0 !important;
padding-bottom: 0 !important;
}
.faq-item.open .faq-q {
background: var(--color-surface-tertiary);
}
.faq-item.open .faq-a {
max-height: 500px !important;
opacity: 1 !important;
padding-bottom: 24px;
}
/* Specific rules for Solutions page FAQ */
.solutions-faq .faq-item .faq-a {
max-height: 0 !important;
opacity: 0 !important;
padding-bottom: 0 !important;
transition: max-height 0.3s ease, opacity 0.3s ease, padding-bottom 0.3s ease !important;
}
.solutions-faq .faq-item.open .faq-a {
max-height: 500px !important;
opacity: 1 !important;
padding-bottom: 24px !important;
}
/* Force FAQ to work on Solutions page */
.solutions-faq .faq-item {
position: relative;
}
.solutions-faq .faq-item .faq-q {
cursor: pointer;
user-select: none;
}
.faq-escalation {
text-align: center;
margin-top: 32px;
padding: 24px;
background: var(--color-surface-secondary);
border-radius: 12px;
border: 1px solid var(--color-border);
}
.faq-escalation p {
margin: 0;
color: var(--color-text-secondary);
}
.chat-link {
color: var(--color-accent);
text-decoration: none;
font-weight: 600;
}
.chat-link:hover {
text-decoration: underline;
}
/* Final CTA */
.solutions-final-cta {
padding: 40px 0;
background: linear-gradient(135deg, #1e40af, #7c3aed, var(--color-accent));
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 24px;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.solutions-final-cta .btn-outline {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
}
.solutions-final-cta .btn-outline:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
/* Success Message */
.success-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 32px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
z-index: 1000;
max-width: 400px;
width: 90%;
}
.success-content {
text-align: center;
}
.success-content i {
width: 48px;
height: 48px;
color: #10b981;
margin-bottom: 16px;
}
.success-content h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 12px;
}
.success-content p {
color: var(--color-text-secondary);
margin-bottom: 8px;
}
/* Responsive Design */
@media (max-width: 768px) {
.page-solutions .solutions-hero {
padding: 60px 0 0;
}
.page-solutions .hero-content h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.hero-trust-badges {
gap: 20px;
margin-bottom: 32px;
padding: 0 16px;
}
.trust-badge {
padding: 6px 12px;
}
.trust-badge i {
width: 14px;
height: 14px;
}
.trust-number {
font-size: 0.9rem;
}
.trust-label {
font-size: 0.8rem;
}
.hero-subheadline {
font-size: 1.1rem;
margin-bottom: 24px;
}
.hero-trust-container {
margin-bottom: 24px;
padding: 12px 16px;
}
.hero-ctas {
gap: 24px;
margin-bottom: 20px;
}
.cta-microcopy {
font-size: 0.8rem;
}
.hero-guarantee-badge {
margin-top: 10px;
font-size: 0.8rem;
padding: 8px 16px;
}
.hero-guarantee-badge i {
width: 14px;
height: 14px;
}
.hero-story {
margin-bottom: 32px;
padding: 20px 16px;
}
.hero-problem, .hero-promise {
font-size: 1.1rem;
}
.hero-ctas {
gap: 16px;
margin-bottom: 32px;
padding: 20px 0;
}
.hero-ctas {
flex-direction: column;
align-items: center;
gap: 12px;
}
.trust-bar {
gap: 16px;
flex-wrap: wrap;
}
.client-logos {
gap: 16px;
}
.process-timeline {
flex-direction: column;
gap: 32px;
}
.step-connector {
display: none;
}
.process-reassurances {
flex-direction: column;
gap: 16px;
}
.service-category {
padding: 30px 0;
margin-bottom: 40px;
}
.build-launch-category {
margin: 20px 0 40px;
padding: 30px 0;
border-radius: 16px;
}
.category-stats {
gap: 20px;
margin-top: 20px;
}
.category-stats .stat-number {
font-size: 1.8rem !important;
}
.category-stats .stat-label {
font-size: 0.9rem !important;
}
.category-header h3 {
font-size: 1.8rem;
}
.category-header p {
font-size: 1.1rem;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 0 16px;
}
.service-card {
padding: 16px 12px;
}
.service-features {
margin: 10px 0;
}
.feature-item {
font-size: 0.75rem;
margin-bottom: 4px;
}
.service-cta {
padding: 6px 12px;
font-size: 0.8rem;
height: 32px;
min-height: 32px;
}
.solutions-form {
padding: 50px 0;
}
}
/* Tablet and smaller desktop - ensure 4 columns fit */
@media (max-width: 1024px) and (min-width: 769px) {
.services-grid {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.service-card {
padding: 16px 12px;
}
.service-card h4 {
font-size: 1rem;
}
.service-card p {
font-size: 0.85rem;
}
.feature-item {
font-size: 0.75rem;
}
.price-amount {
font-size: 1.1rem;
}
.service-cta {
padding: 6px 12px;
font-size: 0.8rem;
height: 32px;
min-height: 32px;
}
.form-header h2 {
font-size: 2rem;
}
.brief-form {
padding: 24px 20px;
}
.solutions-process {
padding: 50px 0;
}
.solutions-portfolio {
padding: 50px 0;
}
.portfolio-grid {
grid-template-columns: 1fr !important;
gap: 20px;
padding: 0 16px;
}
.portfolio-card {
padding: 20px 16px;
}
.portfolio-image {
height: 120px;
margin-bottom: 16px;
}
.portfolio-content h3 {
font-size: 1.3rem;
margin-bottom: 12px;
}
.portfolio-content p {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 16px;
}
.portfolio-metrics {
gap: 16px;
margin-bottom: 16px;
}
.metric-value {
font-size: 1.4rem !important;
}
.metric-label {
font-size: 0.8rem !important;
}
.solutions-pricing {
padding: 50px 0;
}
.pricing-grid {
grid-template-columns: 1fr;
gap: 24px;
padding: 0 16px;
}
.solutions-guarantees {
padding: 50px 0;
}
.guarantees-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 16px;
}
.form-row {
grid-template-columns: 1fr;
gap: 16px;
}
.checkbox-grid {
grid-template-columns: 1fr;
}
.solutions-faq {
padding: 50px 0;
}
.solutions-final-cta {
padding: 32px 0;
}
.cta-content h2 {
font-size: 1.8rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.page-solutions .solutions-hero {
padding: 60px 0 0;
}
.page-solutions .hero-content h1 {
font-size: 2rem;
}
.hero-trust-badges {
gap: 16px;
margin-bottom: 28px;
padding: 0 12px;
}
.trust-badge {
padding: 5px 10px;
}
.trust-badge i {
width: 12px;
height: 12px;
}
.trust-number {
font-size: 0.85rem;
}
.trust-label {
font-size: 0.75rem;
}
.hero-subheadline {
font-size: 1rem;
margin-bottom: 20px;
}
.guarantee-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.hero-trust-container {
margin-bottom: 20px;
padding: 10px 12px;
}
.hero-ctas {
gap: 20px;
margin-bottom: 16px;
}
.cta-microcopy {
font-size: 0.75rem;
}
.hero-guarantee-badge {
margin-top: 8px;
font-size: 0.75rem;
padding: 6px 12px;
}
.hero-guarantee-badge i {
width: 12px;
height: 12px;
}
.hero-subtitle {
font-size: 1.1rem;
}
.solutions-services,
.solutions-process,
.solutions-form,
.solutions-portfolio,
.solutions-pricing,
.solutions-guarantees,
.solutions-faq,
.solutions-final-cta {
padding: 60px 0;
}
}
/* Hosting Compare Table Styles */
.hosting-compare-container {
overflow-x: auto;
margin: 32px 0;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-box);
}
.hosting-compare-table {
min-width: 800px;
display: grid;
grid-template-columns: 200px repeat(4, 1fr);
border-radius: 12px;
overflow: hidden;
}
.hosting-compare-header {
display: contents;
}
.hosting-compare-feature {
padding: 20px 16px;
font-weight: 600;
color: var(--color-text);
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
display: flex;
align-items: center;
}
.hosting-compare-plan {
padding: 20px 16px;
text-align: center;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
position: relative;
}
.hosting-compare-plan:last-child {
border-right: none;
}
.hosting-plan-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
}
.hosting-plan-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
background: rgba(30, 168, 255, 0.1);
color: var(--color-primary);
border: 1px solid rgba(30, 168, 255, 0.2);
}
.hosting-plan-badge.popular {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
border: none;
}
.hosting-plan-badge.premium {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border: none;
}
.hosting-compare-row {
display: contents;
}
.hosting-compare-cell {
padding: 16px;
border-bottom: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
background: var(--color-box);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-text);
font-size: 0.95rem;
}
.hosting-compare-cell:last-child {
border-right: none;
}
.hosting-pricing-row .hosting-compare-cell {
background: rgba(30, 168, 255, 0.05);
font-weight: 600;
}
.hosting-price-display {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.hosting-price {
font-size: 1.8rem;
font-weight: 800;
color: var(--color-accent);
transition: all 0.3s ease;
display: block;
}
.hosting-price.monthly-price {
color: var(--color-text-secondary);
font-weight: 400;
font-size: 1.2rem;
opacity: 0.7;
}
.hosting-price.annual-price {
color: var(--color-accent);
font-weight: 800;
font-size: 1.8rem;
}
.hosting-price.active {
opacity: 1;
text-decoration: none;
font-weight: 800;
}
.hosting-price:not(.active) {
opacity: 0.5;
text-decoration: line-through;
}
.hosting-period {
font-size: 1rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.hosting-savings-text {
font-size: 0.8rem;
color: var(--color-text-secondary);
margin-top: 4px;
opacity: 0.8;
}
.hosting-cta-row .hosting-compare-cell {
padding: 20px 16px;
background: var(--color-bg-secondary);
}
.hosting-compare-cta {
display: inline-block;
padding: 12px 24px;
background: var(--color-accent);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(30, 168, 255, 0.2);
}
.hosting-compare-cta:hover {
background: var(--color-accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(30, 168, 255, 0.3);
}
.hosting-compare-cta.popular {
background: var(--color-accent);
box-shadow: 0 2px 8px rgba(30, 168, 255, 0.3);
}
.hosting-compare-cta.premium {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.hosting-compare-cta.premium:hover {
background: linear-gradient(135deg, #d97706, #b45309);
}
.hosting-popular-plan .hosting-compare-cell {
border-left: none;
border-right: none;
border-bottom: 1px solid var(--color-accent);
}
.hosting-popular-plan .hosting-compare-cell:last-child {
border-bottom: none;
}
/* Hosting Compare Table Responsive */
@media (max-width: 768px) {
.hosting-compare-container {
margin: 24px -20px;
border-radius: 0;
border-left: none;
border-right: none;
}
.hosting-compare-table {
min-width: 600px;
grid-template-columns: 150px repeat(4, 1fr);
}
.hosting-compare-feature,
.hosting-compare-cell {
padding: 12px 8px;
font-size: 13px;
}
.hosting-plan-name {
font-size: 1rem;
}
.hosting-plan-badge {
font-size: 0.7rem;
padding: 3px 8px;
}
.hosting-price {
font-size: 1.5rem;
}
.hosting-compare-cta {
padding: 10px 16px;
font-size: 13px;
}
}
/* Reseller Compare - Scoped Styles */
.reseller-compare {
/* Isolate from VPS styles */
}
.reseller-compare .reseller-billing-toggle {
display: flex;
justify-content: center;
margin: 0 0 32px;
background: var(--color-box);
border-radius: 12px;
padding: 8px;
border: 1px solid var(--color-border);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.reseller-compare .reseller-toggle-btn {
flex: 1;
padding: 12px 24px;
border: none;
background: transparent;
color: var(--color-text-secondary);
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.reseller-compare .reseller-toggle-btn.active {
background: var(--color-accent);
color: white;
box-shadow: 0 2px 8px rgba(30, 168, 255, 0.3);
}
.reseller-compare .reseller-savings-badge {
background: #10b981;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
}
/* Reseller Compare Table Styles */
.reseller-compare .reseller-compare-container {
overflow-x: auto;
margin: 32px 0;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-box);
}
.reseller-compare .reseller-compare-table {
min-width: 800px;
display: grid;
grid-template-columns: 200px repeat(4, 1fr);
border-radius: 12px;
overflow: hidden;
}
.reseller-compare .reseller-compare-header {
display: contents;
}
.reseller-compare .reseller-compare-feature {
padding: 20px 16px;
font-weight: 600;
color: var(--color-text);
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
display: flex;
align-items: center;
}
.reseller-compare .reseller-compare-plan {
padding: 20px 16px;
text-align: center;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: auto !important;
}
.reseller-compare .reseller-compare-plan:last-child {
border-right: none;
}
.reseller-compare .reseller-plan-name {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: var(--color-text) !important;
margin-bottom: 8px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1 !important;
line-height: 1.2 !important;
text-align: center !important;
width: 100% !important;
order: 1 !important;
}
.reseller-compare .reseller-badge {
display: inline-block !important;
padding: 4px 12px !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
border-radius: 20px !important;
background: #60a5fa !important; /* Light blue for budget-friendly */
color: white !important;
order: 2 !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
}
.reseller-compare .reseller-badge.popular {
background: linear-gradient(135deg, #10b981, #059669) !important; /* Green for Most Popular */
}
.reseller-compare .reseller-badge.premium {
background: linear-gradient(135deg, #f59e0b, #d97706) !important; /* Gold/Orange for Enterprise Grade */
}
/* Budget-friendly badge (default) - light blue */
.reseller-compare .reseller-compare-plan:first-child .reseller-badge {
background: #60a5fa !important; /* Light blue */
}
/* Best Value badge - blue */
.reseller-compare .reseller-compare-plan:nth-child(3) .reseller-badge {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important; /* Blue for Best Value */
}
.reseller-compare .reseller-compare-row {
display: contents;
}
.reseller-compare .reseller-compare-cell {
padding: 16px;
border-bottom: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
background: var(--color-box);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-text);
font-size: 0.9rem;
}
.reseller-compare .reseller-compare-cell:last-child {
border-right: none;
}
.reseller-compare .reseller-pricing-row .reseller-compare-cell {
background: rgba(30, 168, 255, 0.05);
padding: 20px 16px;
font-weight: 600;
}
.reseller-compare .reseller-popular-plan {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(59, 130, 246, 0.1)) !important;
border: 2px solid var(--color-primary) !important;
}
.reseller-compare .reseller-popular-plan .reseller-compare-cell {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(59, 130, 246, 0.05)) !important;
}
.reseller-compare .reseller-price-display {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.reseller-compare .reseller-price {
font-size: 26px;
font-weight: 700;
color: var(--color-accent);
transition: all 0.3s ease;
display: flex;
align-items: baseline;
gap: 4px;
}
.reseller-compare .reseller-price.monthly-price {
color: var(--color-text-secondary);
font-weight: 400;
font-size: 14px;
opacity: 0.7;
}
.reseller-compare .reseller-price.annual-price {
color: var(--color-accent);
font-weight: 700;
font-size: 26px;
}
.reseller-compare .reseller-price.active {
opacity: 1;
text-decoration: none;
font-weight: 700;
}
.reseller-compare .reseller-price:not(.active) {
opacity: 0.5;
text-decoration: line-through;
}
.reseller-compare .reseller-period {
font-size: 14px;
color: var(--color-text-secondary);
font-weight: 400;
}
.reseller-compare .reseller-savings-text {
font-size: 0.85rem;
color: var(--color-accent);
font-weight: 600;
}
.reseller-compare .reseller-compare-cta {
padding: 24px;
text-align: center;
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
}
.reseller-compare .reseller-compare-cta p {
margin: 0 0 12px 0;
font-size: 1.1rem;
color: var(--color-text);
}
.reseller-compare .reseller-compare-btn {
display: inline-block;
padding: 12px 24px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
}
.reseller-compare .reseller-compare-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(30, 168, 255, 0.4);
}
/* Reseller Compare Table Responsive */
@media (max-width: 768px) {
.reseller-compare .reseller-compare-container {
margin: 24px -20px;
border-radius: 0;
border-left: none;
border-right: none;
}
.reseller-compare .reseller-compare-table {
min-width: 600px;
grid-template-columns: 150px repeat(4, 1fr);
}
.reseller-compare .reseller-compare-feature,
.reseller-compare .reseller-compare-cell {
padding: 12px 8px;
font-size: 13px;
}
.reseller-compare .reseller-plan-name {
font-size: 1rem;
}
.reseller-compare .reseller-badge {
font-size: 0.7rem;
padding: 3px 8px;
}
.reseller-compare .reseller-price {
font-size: 22px;
}
.reseller-compare .reseller-price.monthly-price {
font-size: 12px;
}
.reseller-compare .reseller-compare-cta {
padding: 10px 16px;
font-size: 13px;
}
}
/* Reseller Hosting Packages Styles - Copy from Web Hosting */
.reseller-plans-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
margin: 40px 0 !important;
align-items: stretch !important;
}
.reseller-plan-card {
background: var(--color-box) !important;
border: 1px solid var(--color-border) !important;
border-radius: 12px !important;
padding: 28px 24px !important;
text-align: center !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.reseller-plan-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
border-color: var(--color-primary) !important;
}
.reseller-popular {
background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.05) 100%) !important;
border-color: var(--color-primary) !important;
box-shadow: 0 4px 20px rgba(30, 168, 255, 0.1) !important;
}
.reseller-enterprise {
background: linear-gradient(135deg, var(--color-box) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
border-color: #f59e0b !important;
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1) !important;
}
.reseller-plan-badge {
position: absolute !important;
top: 16px !important;
right: 16px !important;
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
color: white !important;
padding: 6px 16px !important;
border-radius: 50px !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
}
.reseller-plan-badge.enterprise {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.reseller-plan-top {
margin-bottom: 20px !important;
}
.reseller-plan-top i {
width: 48px !important;
height: 48px !important;
color: var(--color-primary) !important;
margin-bottom: 16px !important;
}
.reseller-plan-card h3 {
font-size: 1.4rem !important;
font-weight: 700 !important;
margin: 0 0 8px 0 !important;
color: var(--color-text) !important;
}
.reseller-plan-subtitle {
font-size: 0.95rem !important;
color: var(--color-text-secondary) !important;
margin: 0 !important;
opacity: 0.8 !important;
}
.reseller-plan-price {
margin-bottom: 24px !important;
}
.reseller-price {
font-size: 2.4rem !important;
font-weight: 900 !important;
color: var(--color-text) !important;
display: block !important;
margin-bottom: 4px !important;
line-height: 1 !important;
}
.reseller-period {
font-size: 1.2rem !important;
color: var(--color-text-secondary) !important;
font-weight: 500 !important;
margin-left: 2px !important;
}
.reseller-savings {
font-size: 0.85rem !important;
color: var(--color-accent) !important;
font-weight: 700 !important;
text-align: center !important;
margin-top: 8px !important;
padding: 4px 8px !important;
background: rgba(30, 168, 255, 0.1) !important;
border-radius: 6px !important;
display: inline-block !important;
}
.reseller-plan-features {
text-align: left !important;
margin-bottom: 24px !important;
}
.reseller-feature {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
padding: 8px 0 !important;
border-bottom: 1px solid var(--color-border) !important;
}
.reseller-feature:last-child {
border-bottom: none !important;
}
.reseller-feature-label {
font-weight: 600 !important;
color: var(--color-text) !important;
font-size: 0.9rem !important;
flex: 0 0 30% !important;
margin-right: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
}
.reseller-feature-label i {
color: var(--color-accent) !important;
flex-shrink: 0 !important;
}
.reseller-feature-value {
color: var(--color-text-secondary) !important;
font-size: 0.9rem !important;
flex: 1 !important;
text-align: right !important;
line-height: 1.4 !important;
}
.reseller-btn-primary {
display: inline-block !important;
background: var(--color-accent) !important;
color: white !important;
padding: 12px 24px !important;
border-radius: 10px !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
width: 100% !important;
text-align: center !important;
border: none !important;
margin-top: auto !important;
}
.reseller-btn-primary:hover {
background: linear-gradient(135deg, #0d7ce8 0%, #29b6f6 100%) !important;
box-shadow: 0 6px 20px rgba(30, 168, 255, 0.5) !important;
transform: translateY(-3px) !important;
}
/* Special styling for Growth plan CTA */
.reseller-popular .reseller-btn-primary {
background: linear-gradient(135deg, #1ea8ff 0%, #4fc3f7 100%) !important;
box-shadow: 0 4px 16px rgba(30, 168, 255, 0.4) !important;
position: relative !important;
}
.reseller-popular .reseller-btn-primary::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, #1ea8ff 0%, #4fc3f7 100%) !important;
border-radius: 10px !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
z-index: -1 !important;
}
.reseller-popular .reseller-btn-primary:hover {
background: linear-gradient(135deg, #0d7ce8 0%, #29b6f6 100%) !important;
box-shadow: 0 6px 20px rgba(30, 168, 255, 0.5) !important;
transform: translateY(-3px) !important;
}
.reseller-see-more-link {
text-align: center !important;
margin-top: 40px !important;
}
.reseller-footnote {
text-align: center !important;
margin-top: 20px !important;
padding: 16px 20px !important;
background: rgba(30, 168, 255, 0.05) !important;
border-radius: 8px !important;
border: 1px solid rgba(30, 168, 255, 0.1) !important;
}
.reseller-footnote p {
margin: 0 !important;
font-size: 0.9rem !important;
color: var(--color-text-secondary) !important;
line-height: 1.5 !important;
}
.reseller-footnote .vat-disclaimer {
margin-top: 8px !important;
font-size: 0.8rem !important;
opacity: 0.8 !important;
}
/* Billing Selector Styles */
.billing-selector {
display: flex !important;
justify-content: center !important;
margin-bottom: 40px !important;
}
.billing-options {
display: flex !important;
background: var(--color-box) !important;
border: 1px solid var(--color-border) !important;
border-radius: 12px !important;
padding: 4px !important;
gap: 4px !important;
}
.billing-option {
background: transparent !important;
border: none !important;
padding: 12px 20px !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
color: var(--color-text-secondary) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
position: relative !important;
}
.billing-option:hover {
background: rgba(30, 168, 255, 0.1) !important;
color: var(--color-accent) !important;
}
.billing-option.active {
background: var(--color-accent) !important;
color: white !important;
box-shadow: 0 2px 8px rgba(30, 168, 255, 0.3) !important;
}
.billing-option .save-badge {
background: rgba(255, 255, 255, 0.2) !important;
color: white !important;
padding: 2px 8px !important;
border-radius: 12px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
margin-left: 6px !important;
}
/* Updated Pricing Display */
.price-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 8px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.savings-badge {
background: var(--color-accent) !important;
color: white !important;
padding: 4px 12px !important;
border-radius: 20px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.reseller-total {
margin-top: 0 !important;
font-size: 0.95rem !important;
color: var(--color-text) !important;
line-height: 1.4 !important;
text-align: center !important;
margin-bottom: 8px !important;
}
.total-amount {
font-weight: 600 !important;
color: var(--color-text-secondary) !important;
font-size: 0.9rem !important;
display: block !important;
text-align: center !important;
line-height: 1.3 !important;
}
/* Highlighted version for longer billing cycles */
.total-amount.highlighted {
font-weight: 800 !important;
color: var(--color-accent) !important;
font-size: 1.1rem !important;
background: linear-gradient(135deg, rgba(30, 168, 255, 0.12) 0%, rgba(30, 168, 255, 0.08) 100%) !important;
padding: 8px 16px !important;
border-radius: 8px !important;
border: 2px solid rgba(30, 168, 255, 0.25) !important;
box-shadow: 0 2px 8px rgba(30, 168, 255, 0.15) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
display: block !important;
text-align: center !important;
line-height: 1.3 !important;
}
.reseller-see-more-link a {
color: var(--color-accent) !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
transition: color 0.3s ease !important;
}
.reseller-see-more-link a:hover {
color: var(--color-text) !important;
}
/* Reseller Hosting Responsive - Copy from Web Hosting */
@media (max-width: 1200px) {
.reseller-plans-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px !important;
}
}
@media (max-width: 768px) {
.reseller-plans-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.reseller-plan-card {
padding: 20px 16px !important;
}
.reseller-plan-top i {
width: 40px !important;
height: 40px !important;
}
.reseller-plan-card h3 {
font-size: 1.2rem !important;
}
.reseller-price {
font-size: 2rem !important;
}
.reseller-feature {
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
.reseller-feature-label {
flex: none !important;
margin-right: 0 !important;
font-size: 0.85rem !important;
}
.reseller-feature-value {
text-align: left !important;
font-size: 0.85rem !important;
}
}
@media (max-width: 480px) {
.reseller-plans-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.reseller-plan-card {
padding: 16px 12px !important;
}
.reseller-plan-badge {
top: 12px !important;
right: 12px !important;
padding: 4px 12px !important;
font-size: 0.7rem !important;
}
.reseller-plan-top i {
width: 36px !important;
height: 36px !important;
}
.reseller-plan-card h3 {
font-size: 1.1rem !important;
}
.reseller-price {
font-size: 1.8rem !important;
}
.reseller-btn-primary {
padding: 10px 20px !important;
font-size: 0.9rem !important;
}
/* Mobile billing selector */
.billing-options {
flex-wrap: wrap !important;
gap: 2px !important;
}
.billing-option {
padding: 8px 12px !important;
font-size: 0.8rem !important;
flex: 1 !important;
min-width: 0 !important;
}
.billing-option .save-badge {
font-size: 0.7rem !important;
padding: 1px 6px !important;
}
/* Mobile price row */
.price-row {
gap: 6px !important;
margin-bottom: 6px !important;
}
.savings-badge {
font-size: 0.7rem !important;
padding: 3px 8px !important;
}
/* Mobile total amount */
.total-amount {
font-size: 0.85rem !important;
font-weight: 600 !important;
}
.total-amount.highlighted {
font-size: 1rem !important;
padding: 6px 12px !important;
font-weight: 800 !important;
}
.reseller-total {
font-size: 0.85rem !important;
}
}
/* === Compare === */
.compare{padding:20px 20px;background:var(--section-tint); margin-top:16px}
.compare.compare-bar{ background:transparent; border-top:0; }
.compare h2{display:none}
.cmp-bar{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-items:stretch}
.cmp-chip{background:transparent;border:1px solid var(--btn-border);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:12px;min-height:64px;transition:transform .15s ease, box-shadow .2s ease, background .15s;position:relative}
.cmp-chip.popular{border-color:var(--color-accent);background:linear-gradient(180deg, rgba(30,168,255,.06), transparent), var(--card-tint);padding-top:36px}
.chip-ribbon{position:absolute;top:8px;left:10px;background:var(--color-accent);color:#fff;padding:2px 6px;border-radius:6px;font-size:.7rem;font-weight:800}
.cmp-chip:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.12);background:var(--btn-bg-hover)}
.cmp-chip > i{width:22px;height:22px;color:var(--color-accent)}
.chip-text{display:flex;flex-direction:column;gap:4px}
.chip-text strong{font-weight:800}
.chip-text span{display:flex;align-items:center;gap:6px;opacity:.9}
.chip-text span i{width:16px;height:16px;color:var(--color-accent)}
/* small outlined button for chip */
.btn-chip{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--color-text);padding:6px 10px;border-radius:8px;text-decoration:none;font-weight:700;white-space:nowrap;grid-column:1 / -1;justify-self:stretch;text-align:center;margin-top:4px}
.btn-chip:hover{background:var(--btn-bg-hover);border-color:var(--color-accent)}
.see-more-link{ display:block; text-align:center; margin-top:10px }
@media (max-width:900px){ .cmp-bar{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cmp-bar{grid-template-columns:1fr} }
/* Utility for hidden heading but accessible to screen readers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* === Migration === */
.migration{padding:60px 20px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;position:relative;align-items:center}
.migration::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 300px at 70% 20%, rgba(30,168,255,.08), transparent 60%);pointer-events:none}
.mig-left h2{font-size:2rem;margin-bottom:10px;font-weight:800}
.mig-sub{opacity:.9;margin-bottom:14px}
.mig-trust{margin-top:8px;opacity:.8;font-size:.95rem}
.learn-link{display:inline-block;margin:0 0 0 14px;color:var(--color-text);opacity:.9;text-decoration:none;font-weight:700}
.learn-link:hover{color:var(--color-accent)}
/* Horizontal process flow */
.mig-flow{display:flex;align-items:center;gap:18px;justify-content:space-between;background:var(--card-tint);border:1px solid var(--btn-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);border-radius:14px;padding:20px 24px;position:relative;overflow:hidden;min-height:140px}
/* animated connector */
.mig-flow::before{content:"";position:absolute;left:56px;right:56px;top:50%;height:2px;background:var(--btn-border);transform:translateY(-50%) scaleX(0);transform-origin:left center;transition:transform .7s ease}
.mig-flow.animate::before{transform:translateY(-50%) scaleX(1)}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:1 1 0;justify-content:flex-start;text-align:center;padding:8px;opacity:0;transform:translateY(6px);transition:opacity .35s ease, transform .35s ease}
.mig-flow.animate .flow-step{opacity:1;transform:none}
.mig-flow.animate .flow-step:nth-child(1){transition-delay:.12s}
.mig-flow.animate .flow-step:nth-child(2){transition-delay:.22s}
.mig-flow.animate .flow-step:nth-child(3){transition-delay:.32s}
.flow-step .num{width:28px;height:28px;border-radius:999px;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex:0 0 28px;z-index:1}
.flow-step i{width:20px;height:20px;color:var(--color-accent);margin-top:6px}
.flow-step span{font-weight:700;line-height:1.2;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.flow-step:not(:last-child)::after{content:none}
@media (max-width:900px){
.migration{grid-template-columns:1fr}
.mig-flow{flex-direction:column;gap:10px;padding:18px}
.mig-flow::before{left:32px;right:auto;top:40px;bottom:40px;width:2px;height:auto;transform:scaleY(0);transform-origin:top center}
.mig-flow.animate::before{transform:scaleY(1)}
.flow-step{width:100%;justify-content:flex-start;align-items:flex-start;text-align:left}
}
/* === Testimonials === */
.testimonials{padding:60px 20px;background:var(--color-box)}
.testimonials h2{text-align:center;margin-bottom:20px;font-weight:800}
.ts-container{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;max-width:1000px;margin:0 auto}
.ts-track{display:flex;gap:16px;overflow:hidden;scroll-behavior:smooth}
.ts-card{min-width:300px;background:var(--color-header);border-radius:12px;padding:16px}
.ts-card .stars{color:#f1c40f;margin-bottom:6px}
.ts-nav{background:var(--color-header);border:none;border-radius:10px;padding:10px 14px;cursor:pointer;color:var(--color-text)}
/* === FAQ === */
.faq{padding:60px 20px;max-width:900px;margin:0 auto}
.faq h2{text-align:center;margin-bottom:16px;font-weight:800}
.faq-group-title{margin:18px 0 8px 0;opacity:.9;font-size:1rem;font-weight:800}
.faq-item{background:var(--color-box);border-radius:12px;margin:10px 0;overflow:hidden;border:1px solid var(--btn-border)}
.faq-q{width:100%;text-align:left;background:none;border:none;color:var(--color-text);padding:16px;display:flex;gap:10px;align-items:center;font-weight:800;cursor:pointer;min-height:44px;font-size:1.1rem}
.faq-q:hover{background:var(--btn-bg-hover)}
/* Ensure uniform icon appearance */
.faq-q svg{width:18px;height:18px;stroke-width:1.75}
/* Answer text more muted for hierarchy - removed conflicting rules */
/* FAQ footer CTA */
.faq-divider{height:1px;background:var(--btn-border);margin:28px 0}
.faq-cta{margin-top:36px;background:var(--color-box);border:1px solid var(--btn-border);border-radius:12px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.faq-cta{border-top:1px solid var(--btn-border)}
.faq-cta-text h3{margin:0 0 6px 0;font-weight:800}
.faq-cta-text p{margin:0;opacity:.85}
.faq-cta-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-outline{padding:10px 20px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--color-text);border-radius:10px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
.btn-outline:hover{background:var(--btn-bg-hover);border-color:var(--color-accent)}
@media (max-width:700px){
.faq-cta{grid-template-columns:1fr}
.faq-cta-actions{flex-direction:column;align-items:stretch}
}
/* === Footer === */
footer{padding:40px;background:var(--color-header);color:var(--color-text);margin-top:60px;border-top:1px solid var(--btn-border)}
.footer-top{max-width:1200px;margin:0 auto 12px;display:grid;grid-template-columns:1.2fr 2.8fr;gap:24px;align-items:start}
.brand-block{display:flex;flex-direction:column;gap:10px}
.footer-logo .logo-img{height:32px;width:auto}
.tagline{opacity:.9}
.contact-list{list-style:none;display:grid;gap:6px}
.contact-list i{width:18px;height:18px;color:var(--color-accent)}
.contact-list a{color:var(--color-text);text-decoration:none;margin-left:8px}
.social-links{display:flex;gap:10px;margin-top:4px}
.social-links i{width:18px;height:18px}
.social-links .brand-icon{width:20px;height:20px;display:block}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
footer h4{margin-bottom:10px;font-weight:800}
footer ul{list-style:none;display:grid;gap:8px}
footer a{color:var(--color-text);text-decoration:none;opacity:.9}
footer a:hover{opacity:1;text-decoration:underline}
.newsletter .note{opacity:.85;margin:0 0 8px}
.newsletter-form{display:flex;gap:8px}
.newsletter-form input{flex:1;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--color-text);border-radius:8px;padding:10px 12px}
.newsletter-form button{border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--color-text);border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}
.newsletter-form button:hover{background:var(--btn-bg-hover);border-color:var(--color-accent)}
.footer-divider{max-width:1200px;margin:18px auto;border-top:1px solid var(--btn-border)}
.footer-bottom{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.footer-bottom .badges{display:flex;flex-wrap:wrap;gap:8px}
.footer-bottom .badges .badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--btn-border);border-radius:999px;padding:6px 10px;background:var(--btn-bg)}
.footer-bottom .payments{display:flex;gap:8px}
.footer-bottom .payments i{width:20px;height:20px}
@media (max-width:900px){
.footer-top{grid-template-columns:1fr}
.footer-bottom{grid-template-columns:1fr;justify-items:flex-start}
}
/* === Generic Utilities for internal pages === */
.container{ max-width:1400px; margin:0 auto; padding:0 20px }
.spacing-lg{ margin:40px 0 }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr } .grid-2{ grid-template-columns:1fr } }
.card{ background:var(--color-box); border:1px solid var(--btn-border); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px }
.card .price{ font-weight:800 }
.align-center{ align-items:center; text-align:center }
.actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none; border-radius:10px; padding:10px 20px }
.btn-primary{ background:var(--color-accent); color:#fff; border:0 }
.btn-outline{ border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--color-text) }
.page-hero{
padding:40px 0 40px;
position:relative;
background: linear-gradient(135deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
min-height: 400px;
display: flex;
align-items: flex-start;
margin-bottom: 0;
}
.hero-background{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%, rgba(30,168,255,.08), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(30,168,255,.05), transparent 50%);
pointer-events:none;
}
.hero-background::after{
content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
background-image:
url('data:image/svg+xml;utf8,');
background-size:320px 180px; background-repeat:repeat; background-position:center;
}
.hero-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
position:relative;
z-index:1;
max-width:1100px; /* center the hero grid within the container */
margin:0 auto 40px auto; /* add bottom margin for spacing */
}
.hero-text{ text-align:left }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:linear-gradient(90deg, rgba(30,168,255,.35), rgba(30,168,255,.2)); color:#fff; border:1px solid rgba(255,255,255,.25); font-weight:700; margin-bottom:14px; animation:badgePulse 5s ease-in-out infinite }
.hero-badge i{ width:16px; height:16px }
@keyframes badgePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(30,168,255,.35)} 60%{ box-shadow:0 0 18px 6px rgba(30,168,255,.18)} }
@keyframes heroBackgroundFlow {
0% {
background-position: 0% 50%, 0% 50%;
}
25% {
background-position: 50% 0%, 25% 75%;
}
50% {
background-position: 100% 50%, 50% 0%;
}
75% {
background-position: 50% 100%, 75% 25%;
}
100% {
background-position: 0% 50%, 0% 50%;
}
}
@keyframes particleFloat {
0% {
transform: translate(0, 0) scale(1);
opacity: 0.15;
}
25% {
transform: translate(10px, -15px) scale(1.05);
opacity: 0.25;
}
50% {
transform: translate(-5px, -10px) scale(0.95);
opacity: 0.2;
}
75% {
transform: translate(15px, 5px) scale(1.02);
opacity: 0.3;
}
100% {
transform: translate(0, 0) scale(1);
opacity: 0.15;
}
}
.page-hero h1{
font-size:3rem;
font-weight:800;
margin-bottom:16px;
line-height:1.1;
}
.page-hero p{
font-size:1.2rem;
margin-bottom:16px;
opacity:.9;
line-height:1.5;
}
.hero-ctas{
display:flex;
gap:16px;
margin:0;
flex-wrap:wrap;
}
.hero-visual{
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
/* =========================
WEB PERFORMANCE DASHBOARD
========================= */
.web-performance-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.performance-dashboard {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
}
/* Central Performance Monitor */
.performance-monitor {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
}
.monitor-header {
font-size: 8px;
font-weight: 600;
color: #00d4ff;
text-align: center;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
order: 1;
}
.monitor-screen {
width: 120px;
height: 90px;
background: linear-gradient(145deg, #1a1a2e, #16213e);
border: 1px solid rgba(30, 168, 255, 0.3);
border-radius: 8px;
padding: 10px;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.3),
0 0 30px rgba(30, 168, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
animation: monitorGlow 3s ease-in-out infinite;
order: 2;
display: flex;
align-items: center;
justify-content: center;
}
.performance-metrics {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 0;
width: 100%;
justify-content: center;
}
.metric-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.metric-label {
font-size: 6px;
color: #a0a0a0;
font-weight: 500;
}
.metric-bar {
position: relative;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.metric-fill {
height: 100%;
border-radius: 2px;
position: relative;
animation: metricFill 4s ease-in-out infinite;
}
.speed-fill {
background: linear-gradient(90deg, #00ff88, #00cc66);
width: 85%;
animation-delay: 0s;
}
.uptime-fill {
background: linear-gradient(90deg, #00d4ff, #0099ff);
width: 100%;
animation-delay: 1s;
}
.traffic-fill {
background: linear-gradient(90deg, #ff6b6b, #ff4757);
width: 70%;
animation-delay: 2s;
}
.metric-value {
position: absolute;
right: 0;
top: -8px;
font-size: 7px;
color: #ffffff;
font-weight: 600;
}
.monitor-status {
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
margin-top: 2px;
}
.status-indicator {
width: 4px;
height: 4px;
background: #00ff88;
border-radius: 50%;
animation: statusBlink 2s ease-in-out infinite;
}
.status-text {
font-size: 6px;
color: #00ff88;
font-weight: 500;
}
/* Website Type Icons */
.website-icon {
position: absolute;
width: 48px;
height: 48px;
background: linear-gradient(145deg, #1a1a2e, #16213e);
border: 1px solid rgba(30, 168, 255, 0.3);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.2),
0 0 20px rgba(30, 168, 255, 0.1);
animation: websiteFloat 3s ease-in-out infinite;
z-index: 2;
}
.website-icon:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.3),
0 0 25px rgba(30, 168, 255, 0.2);
}
.icon-container {
width: 20px;
height: 20px;
color: #00d4ff;
margin-bottom: 2px;
}
.website-status {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
background: #00ff88;
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
}
.website-label {
font-size: 6px;
color: #a0a0a0;
font-weight: 500;
text-align: center;
margin-top: 2px;
}
/* Website positioning */
.blog-website {
top: 10px;
left: 50%;
transform: translateX(-50%);
animation-delay: 0s;
}
.ecommerce-website {
top: 50px;
right: 10px;
animation-delay: 0.5s;
}
.portfolio-website {
bottom: 50px;
right: 10px;
animation-delay: 1s;
}
.corporate-website {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
animation: corporateFloat 3s ease-in-out infinite;
animation-delay: 0.3s;
}
.forum-website {
bottom: 50px;
left: 10px;
animation-delay: 2s;
}
.news-website {
top: 50px;
left: 10px;
animation-delay: 2.5s;
}
/* Connection Lines */
.performance-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.connection-line {
stroke: var(--color-accent);
stroke-width: 1.5;
stroke-opacity: 0.4;
stroke-dasharray: 4, 4;
animation: dashFlow 6s linear infinite;
}
.connection-line:nth-child(1) { animation-delay: 0s; }
.connection-line:nth-child(2) { animation-delay: 1s; }
.connection-line:nth-child(3) { animation-delay: 2s; }
.connection-line:nth-child(4) { animation-delay: 3s; }
.connection-line:nth-child(5) { animation-delay: 4s; }
.connection-line:nth-child(6) { animation-delay: 5s; }
/* Performance Data Particles */
.performance-particle {
position: absolute;
width: 6px;
height: 6px;
background: rgba(30, 168, 255, 0.9);
border-radius: 50%;
box-shadow: 0 0 8px rgba(30, 168, 255, 0.7);
z-index: 2;
}
.performance-particle.p1 {
top: 50%;
left: 50%;
animation: particleMove1 8s linear infinite;
}
.performance-particle.p2 {
top: 50%;
left: 50%;
animation: particleMove2 8s linear infinite;
animation-delay: 2.5s;
}
.performance-particle.p3 {
top: 50%;
left: 50%;
animation: particleMove3 8s linear infinite;
animation-delay: 5s;
}
/* Animations */
@keyframes monitorGlow {
0%, 100% { box-shadow:
0 4px 20px rgba(0, 0, 0, 0.3),
0 0 30px rgba(30, 168, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1); }
50% { box-shadow:
0 4px 20px rgba(0, 0, 0, 0.3),
0 0 40px rgba(30, 168, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}
@keyframes metricFill {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
@keyframes statusBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes websiteFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
}
@keyframes corporateFloat {
0%, 100% { transform: translateX(-50%) translateY(0px); }
50% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes statusPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
@keyframes dashFlow {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -16; }
}
@keyframes particleMove1 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
8% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
16% { transform: translate(-50%, -50%) translate(0px, -106px); }
33% { transform: translate(-50%, -50%) translate(106px, -66px); }
50% { transform: translate(-50%, -50%) translate(106px, 66px); }
66% { transform: translate(-50%, -50%) translate(-106px, 66px); }
83% { transform: translate(-50%, -50%) translate(-106px, -66px); }
92% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes particleMove2 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
8% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
16% { transform: translate(-50%, -50%) translate(106px, -66px); }
33% { transform: translate(-50%, -50%) translate(106px, 66px); }
50% { transform: translate(-50%, -50%) translate(-106px, 66px); }
66% { transform: translate(-50%, -50%) translate(-106px, -66px); }
83% { transform: translate(-50%, -50%) translate(0px, -106px); }
92% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes particleMove3 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
8% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
16% { transform: translate(-50%, -50%) translate(106px, 66px); }
33% { transform: translate(-50%, -50%) translate(-106px, 66px); }
50% { transform: translate(-50%, -50%) translate(-106px, -66px); }
66% { transform: translate(-50%, -50%) translate(0px, -106px); }
83% { transform: translate(-50%, -50%) translate(106px, -66px); }
92% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
/* Light theme adjustments for web performance dashboard */
[data-theme="light"] .monitor-screen {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border-color: rgba(30, 90, 200, 0.3);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 0 30px rgba(30, 90, 200, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .monitor-header {
color: #1e5ac8;
}
[data-theme="light"] .metric-label {
color: #64748b;
}
[data-theme="light"] .metric-value {
color: #1e293b;
}
[data-theme="light"] .status-text {
color: #059669;
}
[data-theme="light"] .website-icon {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border-color: rgba(30, 90, 200, 0.3);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.1),
0 0 20px rgba(30, 90, 200, 0.1);
}
[data-theme="light"] .icon-container {
color: #1e5ac8;
}
[data-theme="light"] .website-label {
color: #64748b;
}
[data-theme="light"] .connection-line {
stroke: rgba(30, 90, 200, 0.4);
stroke-opacity: 0.6;
}
.trust-item{
font-size:.95rem; font-weight:700; opacity:.92; display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; transition:background .15s, transform .12s
}
.trust-item:hover{ background:var(--btn-bg-hover); transform:translateY(-1px) }
@media (max-width:768px){
.hero-content{
grid-template-columns:1fr;
gap:15px;
text-align:center;
padding: 0 20px;
margin-bottom: 30px;
width: 100%;
}
.hero-text{
text-align:center;
order: 1;
}
.page-hero p {
white-space: normal;
word-wrap: break-word;
max-width: 100%;
line-height: 1.6;
text-align: center;
padding: 0 20px;
font-size: 1.1rem;
margin-bottom: 12px;
display: block;
overflow-wrap: break-word;
hyphens: auto;
}
.hero-visual {
order: 2;
margin-top: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.hero-ctas {
flex-direction: row;
gap: 12px;
align-items: center;
width: 100%;
justify-content: flex-start;
}
/* Solutions page mobile - keep buttons in same row */
.page-solutions .solutions-hero .hero-ctas {
flex-direction: row;
gap: 16px;
justify-content: center;
align-items: flex-start;
}
.page-solutions .solutions-hero .cta-group {
flex: 1;
min-width: 0;
align-items: center;
}
.hero-ctas .btn {
flex: 1;
max-width: 200px;
justify-content: center;
}
.page-hero {
height: auto;
min-height: 600px; /* Increased to accommodate trust cards */
padding: 20px 0 20px; /* Balanced top and bottom padding */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
margin-bottom: 0;
}
/* Mobile scaling for hero visuals - 63% of screen width (10% smaller) */
.web-performance-visual,
.domain-search-visual,
.vps-dashboard,
.reseller-network {
transform: scale(1);
width: 63vw;
max-width: 63vw;
margin: 0 auto;
}
/* Specific dashboard scaling - 63% of screen width (10% smaller) */
.performance-dashboard,
.domain-dashboard,
.vps-dashboard,
.reseller-network {
width: 63vw !important;
height: 63vw !important;
max-width: 63vw;
max-height: 63vw;
}
}
/* Smaller mobile screens */
.breadcrumb{ font-size:.95rem; opacity:.9; margin:6px auto 14px; padding-top:20px }
.breadcrumb a{ color:var(--color-text); text-decoration:none }
.breadcrumb a:hover{ text-decoration:underline }
.domain-search{ display:flex; gap:10px; flex-wrap:wrap }
.domain-search input{ flex:1; min-width:220px; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--color-text); border-radius:8px; padding:10px 12px }
.tld-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:12px }
.tld-grid .tld{ background:var(--card-tint); border:1px solid var(--btn-border); border-radius:10px; padding:10px; display:flex; align-items:center; justify-content:space-between }
.checklist{ list-style:none; display:grid; gap:6px; padding-left:0 }
.checklist li::before{ content:"✔"; color:var(--color-accent); margin-right:8px }
/* Table card wrapper for comparison tables */
.table-card{ border:1px solid var(--btn-border); border-radius:12px; overflow:hidden; background:var(--color-box); padding:0; margin-top:12px }
.table-card table{ width:100%; border-collapse:collapse; font-size:.98rem }
.table-card thead th{ background:var(--card-tint); font-weight:800; text-align:left }
.table-card th, .table-card td{ padding:14px 16px; border-bottom:1px solid var(--btn-border) }
.table-card tbody tr:last-child td{ border-bottom:0 }
.table-card tbody tr:nth-child(odd){ background:rgba(255,255,255,.02) }
.see-more-link{ margin-top:14px }
.see-more-link a{ color:var(--color-accent); font-weight:800; text-decoration:none }
.see-more-link a:hover{ text-decoration:underline }
/* Extra air between major sections */
.plans{ margin-bottom:46px }
.plans h2{ text-align:center; font-weight:800; margin:0 0 22px }
.testimonials{ margin-top:50px }
/* Trust section and payment logos */
.trust-section {
margin: 20px auto;
max-width: 1120px;
}
.trust-section .trust-bar {
margin-bottom: 0;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.trust-card.payment-accept {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px; /* Updated to match patch */
border-radius: 12px; /* Updated to match patch */
background: var(--trust-card-bg, var(--card-tint));
border: 1px solid rgba(255,255,255,0.12);
box-shadow: none;
transition: background .15s, transform .12s, box-shadow .2s;
}
.trust-card.payment-accept:hover {
background: var(--btn-bg-hover);
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.trust-card.payment-accept .trust-label {
color: var(--text-muted, #c9d4e5);
font-size: 13px;
font-weight: 600;
letter-spacing: .2px;
white-space: nowrap;
}
.payment-logos {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: center;
}
.payment-img {
height: 25px;
width: auto;
object-fit: contain;
transition: transform .2s ease, filter .2s ease;
margin: 0 4px;
display: block;
visibility: visible;
opacity: 1;
}
.payment-img:hover {
transform: scale(1.05);
filter: brightness(1.1) contrast(1.1);
}
/* ---------- Payment Images (PNG) ---------- */
/* Make the PNG logos row behave like the dark "chips" row */
.payment-images {
display: flex;
flex-direction: row; /* row, not column — keeps the bar one line tall */
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.payment-images img {
height: 28px; /* same visual height as .payment-chip (28px) */
width: auto;
display: block;
}
@media (max-width: 820px) {
.payment-images { gap: 8px; }
.payment-images img { height: 26px; } /* mirrors chip downscale on mobile */
}
[data-theme="light"] .payment-logos {
background: transparent;
border: none;
padding: 0;
}
/* Light theme text colors */
[data-theme="light"] .trust-card.payment-accept .trust-label {
color: #000000 !important;
}
/* Make light mode payments bar match other trust cards exactly */
[data-theme="light"] .trust-card.payment-accept {
background: rgba(0,0,0,0.05); /* same as other trust cards */
border: 1px solid rgba(0,0,0,0.08);
border-radius: 10px;
padding: 12px 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* same as other trust cards */
/* Ensure exact same sizing as dark mode */
display: flex;
align-items: center;
gap: 14px;
min-height: 64px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
[data-theme="light"] .trust-card.payment-accept .payment-logos {
/* Keep the gray background container to match dark mode visual weight */
background: rgba(255,255,255,0.6);
border-radius: 8px;
padding: 8px 12px;
border: 1px solid rgba(0,0,0,0.04);
}
/* Dark theme - keep white text */
[data-theme="dark"] .hero-badge {
color: #ffffff !important;
}
[data-theme="dark"] .trust-card.payment-accept .trust-label {
color: #c9d4e5 !important;
}
/* === Light Mode Hero Enhancements for Web Hosting === */
[data-theme="light"] .page-hero h1,
[data-theme="light"] .page-hero .hero-title {
/* Keep the same responsive scale as dark; just nudge weight for perceived parity */
font-weight: 800 !important;
}
[data-theme="light"] .page-hero p {
/* Slightly deeper grey for equal perceived weight vs. dark */
color: #263445 !important;
font-weight: 500;
}
[data-theme="light"] .page-hero .btn-primary {
background: #00AEEF !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 174, 239, 0.3);
border: none !important;
}
[data-theme="light"] .page-hero .btn-primary:hover {
background: #0099d4 !important;
box-shadow: 0 6px 16px rgba(0, 174, 239, 0.4);
transform: translateY(-1px);
}
[data-theme="light"] .page-hero .btn-outline {
background: transparent !important;
color: #4a5568 !important;
border: 2px solid #e2e8f0 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .page-hero .btn-outline:hover {
background: #f7fafc !important;
color: #2d3748 !important;
border-color: #cbd5e0 !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
/* Light mode – Web Hosting hero polish */
:root.light {
--hero-pill-text: #0f172a; /* darker text for pill */
--hero-pill-bg: rgba(255, 255, 255, 0.9);
--hero-pill-ring: rgba(56, 189, 248, 0.35);
--hero-subtitle: #4b5563; /* slightly deeper gray */
--chip-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
--chip-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.05);
}
/* padding already normalized above; no per-theme override needed */
/* Badge pill */
.page-hero.light .badge,
.page-hero.light .pill {
color: var(--hero-pill-text);
background: var(--hero-pill-bg);
box-shadow:
0 0 0 2px rgba(255,255,255,0.9) inset,
0 8px 24px var(--hero-pill-ring);
}
/* Subtitle readability */
.page-hero.light .subtitle {
/* small bump for parity with dark */
color: #3b4759;
line-height: 1.55;
}
/* Secondary button clarity */
.page-hero.light .btn-secondary {
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(15, 23, 42, 0.02);
color: #0f172a;
}
.page-hero.light .btn-secondary:hover {
border-color: rgba(15, 23, 42, 0.14);
background: rgba(15, 23, 42, 0.04);
}
/* Trust chips + payments bar: consistent, softer elevation & spacing */
.page-hero.light .trust-chips .chip {
box-shadow: var(--chip-shadow-soft);
}
.page-hero.light .payments-strip {
margin-top: 14px; /* a bit more breathing room */
box-shadow: var(--chip-shadow);
border: 1px solid rgba(15, 23, 42, 0.06);
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: saturate(140%) blur(6px);
backdrop-filter: saturate(140%) blur(6px);
}
/* ---------- Trust strip (hero) ---------- */
.trust-strip {
display: flex;
flex-direction: column;
gap: 16px; /* space between cards on mobile/tablet */
margin-top: 16px;
}
/* Card normalization (keeps your current styles, but ensures consistent behavior) */
.trust-strip > * {
border-radius: 14px;
background: var(--card-bg, rgba(255,255,255,0.6));
backdrop-filter: saturate(140%) blur(6px);
box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,0.06));
}
/* Payments pill tweaks so its content wraps gracefully */
.trust-strip .payments-pill,
.trust-strip .payment-pill,
.trust-strip .payments {
/* Match whichever class your payments container already uses.
Keep them all here to be safe; the one that exists will apply. */
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
}
.trust-strip .payments-pill .label,
.trust-strip .payment-pill .label,
.trust-strip .payments .label {
white-space: nowrap;
opacity: 0.85;
font-weight: 600;
}
.trust-strip .payment-logos,
.trust-strip .logos,
.trust-strip .payments-list {
display: flex;
flex-wrap: wrap; /* allows logo line to wrap if needed */
align-items: center;
gap: 10px 14px;
}
/* Desktop+ — one row, equal height; let payments pill grow but cap width */
@media (min-width: 1024px) {
.trust-strip {
flex-direction: row;
align-items: stretch;
gap: 18px;
}
.trust-strip > * {
flex: 1 1 0;
}
/* Payments pill can be a bit wider but not too wide */
.trust-strip .payments-pill,
.trust-strip .payment-pill,
.trust-strip .payments {
flex: 0 1 720px;
}
}
/* Dark mode adjustments (if you use data-theme or prefers-color-scheme) */
:root[data-theme="dark"] .trust-strip > * {
background: var(--card-bg-dark, rgba(17,24,39,0.6));
box-shadow: var(--shadow-sm-dark, 0 8px 22px rgba(0,0,0,0.35));
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.trust-strip > * {
transition: none !important;
}
}
/* ======= Trust Row (Hero) ======= */
.trust-row {
display: flex;
justify-content: center; /* center all cards as a group */
align-items: center;
gap: 16px; /* spacing between cards */
margin-top: 28px;
margin-bottom: 40px; /* add space below trust cards */
flex-wrap: wrap; /* allow wrapping on mobile */
}
.trust-card {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
background: rgba(0,0,0,0.05); /* light theme default */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
white-space: nowrap; /* keep text/icons inline */
width: auto; /* shrink to fit content */
min-width: unset; /* remove equal-width behavior */
transition: all 0.2s ease;
}
/* Dark theme */
:root[data-theme="dark"] .trust-card {
background: rgba(255,255,255,0.05);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* Payments pill specifics */
.trust-card.trust-payments {
justify-content: space-between;
gap: 14px;
padding-right: 18px;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.trust-card:last-child img {
height: 22px;
width: auto;
object-fit: contain;
}
/* Optional label before logos */
.trust-card.trust-payments .label {
white-space: nowrap;
font-weight: 600;
opacity: 0.85;
}
/* Logos line */
.trust-card.trust-payments .logos {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
overflow-x: auto; /* if too many logos, they scroll smoothly */
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.trust-card.trust-payments .logos::-webkit-scrollbar { display: none; }
/* Normalize logo height without distorting aspect ratio */
.trust-card.trust-payments .logos img,
.trust-card.trust-payments .logos svg {
height: 22px; /* 20–24px looks best; pick 22px for balance */
width: auto;
flex: 0 0 auto;
filter: var(--logo-filter, none); /* keeps current colors in light, set a faint invert in dark if needed */
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
/* Trust cards within hero section - mobile layout */
.page-hero .trust-row {
gap: 12px;
margin-top: 25px;
margin-bottom: 30px; /* add space below trust cards on mobile */
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
position: relative;
z-index: 2;
}
.page-hero .trust-card {
padding: 12px 20px;
font-size: 14px;
width: 100%;
max-width: 350px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
}
/* Payment card vertical layout */
.page-hero .trust-card.trust-payments {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: center !important;
text-align: center !important;
flex: 1 1 100%;
max-width: 100%;
min-width: 100%;
padding: 16px;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.page-hero .trust-card.trust-payments .label {
margin-bottom: 0 !important;
font-size: 14px;
font-weight: 600;
}
/* Payment logos in 2 rows (4 columns) - properly centered */
.page-hero .trust-card.trust-payments .logos,
.page-hero .trust-card.trust-payments .payment-logos {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
flex-wrap: nowrap !important;
gap: 8px;
justify-items: center !important;
align-items: center !important;
justify-content: center !important;
max-width: 240px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
box-sizing: border-box;
visibility: visible !important;
opacity: 1 !important;
}
.page-hero .trust-card.trust-payments .logos img,
.page-hero .trust-card.trust-payments .payment-logos img,
.page-hero .trust-card.trust-payments .payment-img {
width: 36px;
height: 20px;
object-fit: contain;
display: block !important;
margin: 0 auto !important;
}
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.trust-card { transition: none !important; }
}
/* Font weight normalization */
h1, h2 { font-weight:var(--fw-700); }
.trust-card, .trust-item, .trust-strip .label { font-weight:var(--fw-600); }
/* ---------- Web Hosting page: lock in the intended weights ---------- */
/* Consolidated page-specific hero styles using shared classes */
.page-hero h1,
.page-hero .hero-title {
/* match Home weight for parity */
font-weight: 800 !important;
letter-spacing: -0.02em;
}
.page-hero .hero-subtitle {
font-weight: 500 !important;
}
.page-hero .btn-primary {
font-weight: 600 !important;
}
/* Safety reset: if a wrapper on this page sets a blanket font-weight,
stop it from cascading into headings/buttons. */
.page-hero,
.page-hero * {
font-weight: unset;
}
.page-hero h1,
.page-hero .hero-title,
.page-hero .btn,
.page-hero .btn-primary {
font-weight: revert-layer;
}
/* --- Nav weight lock (single source of truth) --- */
:root{
--nav-weight: var(--fw-700);
--nav-weight-active: var(--fw-700);
}
header .desktop-nav a,
.site-header .nav a,
header .nav a,
header nav a,
.navbar a,
.menu a,
.nav-link{
font-weight: var(--nav-weight) !important;
}
header .desktop-nav a.active,
.site-header .nav a.active,
header .nav a.active,
header nav a.active,
.navbar a.active,
.menu a.active,
.nav-link.active{
font-weight: var(--nav-weight-active) !important;
}
/* ===========================
Web Hosting - Hero Polish
Scoped to this page only
=========================== */
/* Web Hosting hero targeting - rules are nested below */
/* Headline breathing room */
.page-hero h1 {
margin-bottom: 0.9rem;
}
/* Subtitle readability */
.page-hero p {
line-height: 1.6;
max-width: 46rem; /* keeps lines from getting too long */
}
/* CTA group spacing */
.page-hero .cta-group,
.page-hero .hero-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-start;
}
/* Solutions page specific - keep buttons in same row */
.page-solutions .solutions-hero .hero-ctas {
display: flex;
flex-direction: row;
gap: 24px;
justify-content: center;
align-items: flex-start;
}
.page-solutions .solutions-hero .cta-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* Make primary CTA more dominant */
.page-solutions .solutions-hero .cta-group:first-child .btn-primary {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
transform: scale(1.05);
font-weight: 700;
letter-spacing: 0.025em;
}
.page-solutions .solutions-hero .cta-group:first-child .btn-primary:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
transform: scale(1.08);
}
/* Make secondary CTA a true "ghost" so primary stands out */
.page-hero .btn-secondary,
.page-hero .button-secondary,
.page-hero .btn-outline {
background: transparent !important;
border: 1px solid var(--card-border, rgba(255,255,255,0.18));
color: var(--text-secondary, #b8c4d9);
box-shadow: none;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.page-hero .btn-secondary:hover,
.page-hero .button-secondary:hover,
.page-hero .btn-outline:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.28);
color: var(--text, #fff);
}
/* Reduced separation between hero and trust row */
.page-hero + .trust-bar,
.page-hero ~ .trust-row,
.page-hero ~ .payment-bar {
margin-top: 0.5rem;
}
/* Optional: subtle float for the hero illustration/card if present */
.page-hero .hero-graphic,
.page-hero .illustration,
.page-hero .floating-illustration {
animation: hero-float 6s ease-in-out infinite;
will-change: transform;
}
@keyframes hero-float {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
/* === Web Hosting hero – micro polish === */
@media (min-width: 1200px){
.page-hero h1 {
font-size: 3.35rem;
letter-spacing: -0.015em;
}
}
.page-hero p {
max-width: 44rem; /* was 46rem – slightly tighter for readability */
}
.page-hero ~ .trust-row,
.page-hero ~ .payment-bar {
margin-top: 0.3rem; /* minimal spacing before the trust/payout row */
margin-bottom: 0;
}
/* Remove bottom spacing from hero containers */
.page-hero {
margin-bottom: 0;
padding-bottom: 0;
}
/* Remove any bottom spacing from sections after hero */
.page-hero + * {
margin-top: 0;
}
/* Keep payment logos visually consistent across brands */
.trust-card.trust-payments .logos img,
.trust-card.trust-payments .logos svg,
.payment-logos .payment-img{
height: 24px;
}
/* --- Web Hosting Hero font weight fix --- */
.page-hero h1,
.page-hero .hero-title {
font-weight: 800 !important;
font-variation-settings: "wght" 800 !important;
}
/* Subtle divider below hero section */
.page-hero {
border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .page-hero {
border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* =========================
VPS DASHBOARD VISUAL
========================= */
.vps-hero-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* Light theme background enhancement */
[data-theme="light"] .vps-hero-visual {
position: relative;
}
[data-theme="light"] .vps-hero-visual::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(30, 90, 200, 0.03) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
/* Ensure trust/payment elements stay above visual */
.trust-badges, .payment-logos {
position: relative;
z-index: 2;
}
.vps-dashboard {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
}
/* Central VPS Console */
.vps-console {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
}
.console-header {
font-size: 8px;
font-weight: 600;
color: #00d4ff;
text-align: center;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
order: 1;
}
.console-screen {
width: 120px;
height: 90px;
background: linear-gradient(145deg, #1a1a2e, #16213e);
border: 1px solid rgba(30, 168, 255, 0.3);
border-radius: 8px;
padding: 10px;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.3),
0 0 30px rgba(30, 168, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
animation: consoleGlow 3s ease-in-out infinite;
order: 2;
display: flex;
align-items: center;
justify-content: center;
}
.console-metrics {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 0;
width: 100%;
justify-content: center;
}
.metric-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.metric-label {
font-size: 8px;
color: #a0a0a0;
font-weight: 500;
}
.metric-bar {
position: relative;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.metric-fill {
height: 100%;
border-radius: 2px;
position: relative;
animation: metricFill 4s ease-in-out infinite;
}
.cpu-fill {
background: linear-gradient(90deg, #00d4ff, #0099ff);
width: 35%;
animation-delay: 0s;
}
.ram-fill {
background: linear-gradient(90deg, #00ff88, #00cc66);
width: 26%;
animation-delay: 1s;
}
.storage-fill {
background: linear-gradient(90deg, #ff6b6b, #ff4757);
width: 33%;
animation-delay: 2s;
}
.metric-value {
position: absolute;
right: 0;
top: -8px;
font-size: 7px;
color: #ffffff;
font-weight: 600;
}
.console-status {
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
margin-top: 2px;
}
.status-indicator {
width: 4px;
height: 4px;
background: #00ff88;
border-radius: 50%;
animation: statusBlink 2s ease-in-out infinite;
}
.status-text {
font-size: 6px;
color: #00ff88;
font-weight: 500;
}
/* Resource Monitoring Nodes */
.resource-node {
position: absolute;
width: 48px;
height: 48px;
background: linear-gradient(145deg, #1a1a2e, #16213e);
border: 1px solid rgba(30, 168, 255, 0.3);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.2),
0 0 20px rgba(30, 168, 255, 0.1);
animation: nodeFloat 3s ease-in-out infinite;
z-index: 2;
}
.resource-node:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.3),
0 0 25px rgba(30, 168, 255, 0.2);
}
.node-icon {
width: 20px;
height: 20px;
color: #00d4ff;
margin-bottom: 2px;
}
.node-status {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
background: #00ff88;
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
}
.node-label {
font-size: 6px;
color: #a0a0a0;
font-weight: 500;
text-align: center;
margin-top: 2px;
}
/* Node positioning */
.cpu-node {
top: 10px;
left: 50%;
transform: translateX(-50%);
animation-delay: 0s;
}
.ram-node {
top: 50px;
right: 10px;
animation-delay: 0.5s;
}
.storage-node {
bottom: 50px;
right: 10px;
animation-delay: 1s;
}
.network-node {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
animation: nodeFloatSlow 8s ease-in-out infinite;
animation-delay: 3s;
}
.security-node {
bottom: 50px;
left: 10px;
animation-delay: 2s;
}
.scaling-node {
top: 50px;
left: 10px;
animation-delay: 2.5s;
}
/* Connection Lines */
.dashboard-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.connection-line {
stroke: var(--color-accent);
stroke-width: 1.5;
stroke-opacity: 0.4;
stroke-dasharray: 4, 4;
animation: dashFlow 6s linear infinite;
}
.connection-line:nth-child(1) { animation-delay: 0s; }
.connection-line:nth-child(2) { animation-delay: 1s; }
.connection-line:nth-child(3) { animation-delay: 2s; }
.connection-line:nth-child(4) { animation-delay: 3s; }
.connection-line:nth-child(5) { animation-delay: 4s; }
.connection-line:nth-child(6) { animation-delay: 5s; }
/* Data Flow Particles */
.data-particle {
position: absolute;
width: 6px;
height: 6px;
background: rgba(30, 168, 255, 0.9);
border-radius: 50%;
box-shadow: 0 0 8px rgba(30, 168, 255, 0.7);
z-index: 2;
}
.data-particle.p1 {
top: 50%;
left: 50%;
animation: dataFlow1 8s linear infinite;
}
.data-particle.p2 {
top: 50%;
left: 50%;
animation: dataFlow2 8s linear infinite;
animation-delay: 2.5s;
}
.data-particle.p3 {
top: 50%;
left: 50%;
animation: dataFlow3 8s linear infinite;
animation-delay: 5s;
}
/* Animations */
@keyframes consoleGlow {
0%, 100% { box-shadow:
0 4px 20px rgba(0, 0, 0, 0.3),
0 0 30px rgba(30, 168, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1); }
50% { box-shadow:
0 4px 20px rgba(0, 0, 0, 0.3),
0 0 40px rgba(30, 168, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}
@keyframes metricFill {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
@keyframes statusBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes nodeFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
}
@keyframes nodeFloatSlow {
0%, 100% { transform: translateX(-50%) translateY(0px); }
50% { transform: translateX(-50%) translateY(-2px); }
}
@keyframes statusPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
@keyframes dashFlow {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -16; }
}
@keyframes dataFlow1 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
20% { transform: translate(-50%, -50%) translate(0px, -106px); }
40% { transform: translate(-50%, -50%) translate(106px, -66px); }
60% { transform: translate(-50%, -50%) translate(106px, 66px); }
80% { transform: translate(-50%, -50%) translate(-106px, 66px); }
90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes dataFlow2 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
20% { transform: translate(-50%, -50%) translate(106px, -66px); }
40% { transform: translate(-50%, -50%) translate(106px, 66px); }
60% { transform: translate(-50%, -50%) translate(-106px, 66px); }
80% { transform: translate(-50%, -50%) translate(-106px, -66px); }
90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes dataFlow3 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
20% { transform: translate(-50%, -50%) translate(106px, 66px); }
40% { transform: translate(-50%, -50%) translate(-106px, 66px); }
60% { transform: translate(-50%, -50%) translate(-106px, -66px); }
80% { transform: translate(-50%, -50%) translate(0px, -106px); }
90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
/* Light theme adjustments for VPS dashboard */
[data-theme="light"] .console-screen {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border-color: rgba(30, 90, 200, 0.3);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 0 30px rgba(30, 90, 200, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .console-header {
color: #1e5ac8;
}
[data-theme="light"] .metric-label {
color: #64748b;
}
[data-theme="light"] .metric-value {
color: #1e293b;
}
[data-theme="light"] .status-text {
color: #059669;
}
[data-theme="light"] .resource-node {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border-color: rgba(30, 90, 200, 0.3);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.1),
0 0 20px rgba(30, 90, 200, 0.1);
}
[data-theme="light"] .node-icon {
color: #1e5ac8;
}
[data-theme="light"] .node-label {
color: #64748b;
}
[data-theme="light"] .connection-line {
stroke: rgba(30, 90, 200, 0.4);
stroke-opacity: 0.6;
}
/* Mobile responsive scaling - simplified for better UX */
/* =========================
RESELLER HERO NETWORK VISUAL
========================= */
.reseller-hero-visual {
display: grid;
place-items: center;
pointer-events: none;
z-index: 0;
}
.reseller-network {
position: relative;
width: 240px;
height: 240px;
animation: floatY 8s ease-in-out infinite;
}
/* Central WHM Control Panel */
.whm-control-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.whm-screen {
width: 112px;
height: 84px;
background: linear-gradient(135deg, #1a1a2e, #16213e);
border: 2px solid var(--color-accent);
border-radius: 12px;
padding: 12px;
box-shadow: 0 8px 32px rgba(30, 168, 255, 0.3);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.whm-header {
font-size: 10px;
font-weight: 600;
color: var(--color-accent);
text-align: center;
margin-bottom: 0;
opacity: 0.9;
}
.whm-stats {
display: flex;
justify-content: space-between;
gap: 8px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
/* Reseller hosting page specific - smaller text for hero stats */
.page-reseller-hosting .whm-stats .stat-number {
font-size: 1.2rem !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.1 !important;
margin-bottom: 4px !important;
}
.page-reseller-hosting .whm-stats .stat-label {
font-size: 0.7rem !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.8) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.whm-indicator {
position: absolute;
top: -8px;
right: -8px;
width: 16px;
height: 16px;
background: #4ade80;
border-radius: 50%;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
animation: pulse 2s infinite;
}
/* Client Account Nodes */
.client-node {
position: absolute;
width: 44px;
height: 44px;
background: var(--color-box);
border: 2px solid var(--color-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.client-node:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(30, 168, 255, 0.5);
z-index: 20;
}
.node-icon {
width: 22px;
height: 22px;
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
}
.node-status {
position: absolute;
bottom: -2px;
right: -2px;
width: 12px;
height: 12px;
background: #4ade80;
border: 2px solid var(--color-box);
border-radius: 50%;
box-shadow: 0 0 4px rgba(74, 222, 128, 0.6);
}
/* Position client nodes around the WHM panel */
.client-node.c1 { top: 15px; left: 15px; }
.client-node.c2 { top: 15px; right: 15px; }
.client-node.c3 { top: 50%; right: 5px; transform: translateY(-50%); }
.client-node.c4 { bottom: 5px; right: 5px; }
.client-node.c5 { bottom: 15px; left: 15px; }
.client-node.c6 { top: 50%; left: 5px; transform: translateY(-50%); }
/* Connection Lines */
.connection-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.connection-line {
stroke: var(--color-accent);
stroke-width: 2;
stroke-opacity: 0.6;
stroke-dasharray: 5, 5;
animation: dashFlow 3s linear infinite;
}
@keyframes dashFlow {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 20; }
}
/* Data Flow Particles */
.data-particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--color-accent);
border-radius: 50%;
box-shadow: 0 0 8px rgba(30, 168, 255, 0.8);
animation: dataFlow 4s linear infinite;
}
.data-particle.p1 {
animation-name: dataFlow1;
animation-delay: 0s;
}
.data-particle.p2 {
animation-name: dataFlow2;
animation-delay: 1.3s;
}
.data-particle.p3 {
animation-name: dataFlow3;
animation-delay: 2.6s;
}
@keyframes dataFlow1 {
0% { left: 120px; top: 120px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 57px; top: 57px; opacity: 0; }
}
@keyframes dataFlow2 {
0% { left: 120px; top: 120px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 235px; top: 120px; opacity: 0; }
}
@keyframes dataFlow3 {
0% { left: 120px; top: 120px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 57px; top: 183px; opacity: 0; }
}
/* Tooltip styles for client nodes */
.client-node::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 30;
}
.client-node:hover::before {
opacity: 1;
}
/* Light theme adjustments */
[data-theme="light"] .whm-screen {
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-color: rgba(30, 90, 200, 0.3);
box-shadow: 0 8px 32px rgba(30, 90, 200, 0.15);
}
[data-theme="light"] .whm-header {
color: rgba(30, 90, 200, 0.8);
}
[data-theme="light"] .stat-number {
color: #1e293b;
}
[data-theme="light"] .stat-label {
color: rgba(30, 41, 59, 0.6);
}
[data-theme="light"] .client-node {
background: var(--color-box);
border-color: rgba(30, 90, 200, 0.3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .client-node:hover {
box-shadow: 0 0 20px rgba(30, 90, 200, 0.3);
}
[data-theme="light"] .node-icon {
color: rgba(30, 90, 200, 0.7);
}
/* Web Hosting page specific - smaller text for hero stats */
.page-web-hosting .performance-metrics .metric-label {
font-size: 8px !important;
}
.page-web-hosting .performance-metrics .metric-value {
font-size: 7px !important;
}
/* VPS Hosting page specific - smaller text for hero stats */
.page-vps-hosting .console-metrics .metric-label {
font-size: 8px !important;
}
.page-vps-hosting .console-metrics .metric-value {
font-size: 7px !important;
}
/* Mobile responsive for reseller hosting hero stats */
@media (max-width: 768px) {
.page-reseller-hosting .whm-stats .stat-number {
font-size: 1.1rem !important;
}
.page-reseller-hosting .whm-stats .stat-label {
font-size: 0.65rem !important;
}
}
@media (max-width: 480px) {
.page-reseller-hosting .whm-stats .stat-number {
font-size: 1rem !important;
}
.page-reseller-hosting .whm-stats .stat-label {
font-size: 0.6rem !important;
}
}
[data-theme="light"] .connection-line {
stroke: rgba(30, 90, 200, 0.4);
stroke-opacity: 0.6;
}
/* Removed conflicting 420px breakpoint - using the main one instead */
/* DOMAIN SEARCH DASHBOARD */
.domain-search-visual {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.domain-dashboard {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
}
/* Central Search Interface */
.search-interface {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(26, 26, 46, 0.3);
border: 1px solid rgba(30, 168, 255, 0.15);
border-radius: 8px;
padding: 10px;
backdrop-filter: blur(5px);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
0 0 8px rgba(30, 168, 255, 0.03);
animation: searchGlow 4s ease-in-out infinite;
z-index: 10;
}
.search-bar {
display: flex;
gap: 8px;
}
.search-input {
display: flex;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
}
.search-input input {
background: transparent;
border: none;
color: #ffffff;
padding: 6px 8px;
font-size: 11px;
width: 110px;
}
.search-input input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.search-btn {
background: #1ea8ff;
border: none;
border-radius: 4px;
color: #ffffff;
padding: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.search-btn:hover {
background: #0d7ae8;
transform: scale(1.05);
}
/* Domain Suggestions */
.domain-suggestion {
position: absolute;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(30, 168, 255, 0.2);
border-radius: 8px;
padding: 8px 12px;
backdrop-filter: blur(10px);
animation: suggestionFloat 3s ease-in-out infinite;
z-index: 5;
}
.domain-name {
color: #ffffff;
font-size: 13px;
font-weight: 600;
margin-bottom: 2px;
}
.domain-price {
color: #1ea8ff;
font-size: 12px;
font-weight: 500;
}
.availability-dot {
position: absolute;
top: 8px;
right: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
}
.availability-dot.available {
background: #10b981;
box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.availability-dot.premium {
background: #f59e0b;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}
.suggestion-1 {
top: 30px;
left: 30px;
animation-delay: 0s;
}
.suggestion-2 {
top: 30px;
right: 30px;
animation-delay: 0.5s;
}
.suggestion-3 {
top: 50%;
right: 20px;
transform: translateY(-50%);
animation-delay: 1s;
}
.suggestion-4 {
bottom: 30px;
right: 30px;
animation-delay: 1.5s;
}
.suggestion-5 {
bottom: 30px;
left: 30px;
animation-delay: 2s;
}
.suggestion-6 {
top: 50%;
left: 20px;
transform: translateY(-50%);
animation-delay: 2.5s;
}
/* Connection Lines */
.domain-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.connection-line {
stroke: rgba(30, 168, 255, 0.3);
stroke-width: 1;
stroke-opacity: 0.4;
stroke-dasharray: 3, 3;
animation: dashFlow 8s linear infinite;
}
.connection-line:nth-child(1) { animation-delay: 0s; }
.connection-line:nth-child(2) { animation-delay: 1.5s; }
.connection-line:nth-child(3) { animation-delay: 3s; }
.connection-line:nth-child(4) { animation-delay: 4.5s; }
.connection-line:nth-child(5) { animation-delay: 6s; }
.connection-line:nth-child(6) { animation-delay: 7.5s; }
/* Domain Data Particles */
.domain-particle {
position: absolute;
width: 4px;
height: 4px;
background: #1ea8ff;
border-radius: 50%;
box-shadow: 0 0 8px rgba(30, 168, 255, 0.7);
z-index: 3;
}
.domain-particle.p1 {
top: 50%;
left: 50%;
animation: domainMove1 8s linear infinite;
}
.domain-particle.p2 {
top: 50%;
left: 50%;
animation: domainMove2 8s linear infinite;
animation-delay: 2.5s;
}
.domain-particle.p3 {
top: 50%;
left: 50%;
animation: domainMove3 8s linear infinite;
animation-delay: 5s;
}
/* Domain Dashboard Animations */
@keyframes searchGlow {
0%, 100% {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
0 0 8px rgba(30, 168, 255, 0.03);
}
50% {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
0 0 12px rgba(30, 168, 255, 0.06);
}
}
@keyframes suggestionFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-2px); }
}
@keyframes domainMove1 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
25% { transform: translate(-50%, -50%) translate(-70px, -70px); }
37% { transform: translate(-50%, -50%) translate(70px, -70px); }
50% { transform: translate(-50%, -50%) translate(70px, 0px); }
62% { transform: translate(-50%, -50%) translate(-70px, 0px); }
75% { transform: translate(-50%, -50%) translate(-70px, 70px); }
87% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes domainMove2 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
25% { transform: translate(-50%, -50%) translate(70px, -70px); }
37% { transform: translate(-50%, -50%) translate(70px, 0px); }
50% { transform: translate(-50%, -50%) translate(-70px, 0px); }
62% { transform: translate(-50%, -50%) translate(-70px, 70px); }
75% { transform: translate(-50%, -50%) translate(70px, 70px); }
87% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
@keyframes domainMove3 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
25% { transform: translate(-50%, -50%) translate(70px, 0px); }
37% { transform: translate(-50%, -50%) translate(-70px, 0px); }
50% { transform: translate(-50%, -50%) translate(-70px, 70px); }
62% { transform: translate(-50%, -50%) translate(70px, 70px); }
75% { transform: translate(-50%, -50%) translate(-70px, -70px); }
87% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}
/* Light theme adjustments for domain search dashboard */
[data-theme="light"] .search-interface {
background: rgba(255, 255, 255, 0.4);
border-color: rgba(30, 90, 200, 0.2);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.1),
0 0 8px rgba(30, 90, 200, 0.05);
}
[data-theme="light"] .search-input {
background: rgba(30, 90, 200, 0.05);
}
[data-theme="light"] .search-input input {
color: #1a1a2e;
}
[data-theme="light"] .search-input input::placeholder {
color: rgba(26, 26, 46, 0.5);
}
[data-theme="light"] .domain-suggestion {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(30, 90, 200, 0.2);
}
[data-theme="light"] .domain-name {
color: #1a1a2e;
}
[data-theme="light"] .domain-price {
color: #1e5ac8;
}
/* Mobile responsive scaling for domain search dashboard */
@media (max-width: 768px) {
.domain-dashboard {
width: 240px;
height: 240px;
transform: scale(0.8);
}
.search-interface {
padding: 8px;
}
.search-input input {
width: 95px;
font-size: 10px;
}
.domain-suggestion {
padding: 6px 10px;
}
.domain-name {
font-size: 11px;
}
.domain-price {
font-size: 10px;
}
}
/* Mobile responsive scaling for domain dashboard - simplified */
/* ===== Mobile trust chips/payments pill hard reset (all hosting pages) ===== */
@media (max-width: 768px) {
/* Ensure trust row/pill participates in normal flow on mobile */
.trust-row,
.trust-strip,
.trust-bar,
.payment-bar,
.payments-strip {
position: static !important;
inset: auto !important;
transform: none !important;
width: 100%;
max-width: 100%;
margin-top: 16px;
margin-bottom: 16px; /* keep clear of the next section */
z-index: 0; /* never float above content below */
}
/* Let the payments logos wrap (fallback to horizontal scroll if needed) */
.trust-strip .payment-logos,
.trust-strip .logos,
.trust-strip .payments-list,
.trust-card.trust-payments .logos {
display: flex;
flex-wrap: wrap; /* wrap on small screens */
gap: 10px 14px;
max-width: 100%;
overflow-x: auto; /* graceful fallback if still too many logos */
-webkit-overflow-scrolling: touch;
}
/* Slightly tighter card spacing & readable size on mobile (already close) */
.trust-row { gap: 12px; }
.trust-card { padding: 8px 14px; font-size: 14px; }
}
/* Make sure the hero always leaves breathing room before trust row/pill */
.page-web-hosting .hero ~ .trust-row,
.page-web-hosting .hero ~ .payment-bar,
.page-vps-hosting .hero ~ .trust-row,
.page-vps-hosting .hero ~ .payment-bar,
.page-reseller-hosting .hero ~ .trust-row,
.page-reseller-hosting .hero ~ .payment-bar,
.page-register-domain .hero ~ .trust-row,
.page-register-domain .hero ~ .payment-bar {
margin-top: 1.35rem; /* already present in your file; keep or bump to 1.5rem if needed */
}
/* --- Mobile trust-rail fix: make it flow, not overlay --- */
@media (max-width: 768px) {
/* If any of these were sticky/fixed on desktop, reset on mobile */
.trust,
.trust-rail,
.trust-bar-wrap {
position: static !important;
inset: auto !important;
transform: none !important;
width: auto !important;
margin: 16px 0 0;
}
/* Ensure the cards themselves layout cleanly in two columns */
.trust-bar {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* Give the hero a little extra breathing room above the trust cards */
.hero {
padding-bottom: clamp(64px, 7vh, 88px);
}
/* Help anchor links & scroll-to behavior not hide under the header */
.plans,
.compare,
.migration,
.domain-compact,
.dc-inner {
scroll-margin-top: 84px;
}
}
/* --- Mobile hero + trust rail spacing guard (iOS safe-area aware) --- */
@media (max-width: 640px) {
/* Ensure the hero leaves room for trust pills/rails */
.hero{
/* extra space for the two trust rows + iOS home indicator */
padding-bottom: calc(220px + env(safe-area-inset-bottom));
}
/* Trust rail should participate in normal flow; never overlay the next block */
.hero .trust-rail,
.hero .trust-bar-wrap{
position: static !important;
margin-top: 18px;
z-index: 1;
}
}
/* If any page had a sticky/absolute trust row, neutralize it on mobile */
@media (max-width: 640px){
.trust,
.trust-rail,
.trust-bar-wrap{
position: static !important;
}
}
/* Optional: make the section after hero start a bit lower as a safety net */
@media (max-width: 640px){
.plans, .pricing, .plans-section, .choose-plan, .plans-grid{
scroll-margin-top: 80px; /* nicer in-page jumps on mobile */
margin-top: 8px; /* tiny insurance spacing */
}
}
/* --- Mobile: prevent trust-cards from overlapping the next section --- */
@media (max-width: 820px) {
/* Only adjust hero padding if not already set by other rules */
.page-hero {
padding: 20px 0 20px; /* Balanced top and bottom padding */
margin-bottom: 0;
}
/* Ensure hero visual is still displayed */
.hero-visual {
display: flex !important;
justify-content: center;
align-items: center;
order: 2;
margin-top: 5px;
}
}
/* Removed iPhone 12 Pro specific rules - using general mobile breakpoints instead */
/* Removed iPhone 12 Pro specific rules - using general mobile breakpoints instead */
/* Removed iPhone 12 Pro specific rules - using general mobile breakpoints instead */
/* Removed iPhone 14 Pro Max specific rules - using general mobile breakpoints instead */
/* iPhone 12 Pro - vertical layout to fix overflow issues */
/* Removed iPhone 12 Pro specific rules - using general mobile breakpoints instead */
/* Removed iPhone-specific rules - using general mobile breakpoints instead */
/* Apply same fixes to Reseller Hosting page - override general mobile styles */
/* Apply same fixes to Register Domain page - override general mobile styles */
/* Removed iPhone 12 Pro specific rules - using general mobile breakpoints instead */
/* ===== SUPPORT PAGE STYLES ===== */
.page-support {
background: var(--color-bg);
}
/* Support Hero Visual */
.support-hero-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.support-icons-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 400px;
width: 100%;
}
/* Support Card Icons */
.support-card-icon {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.support-card-icon:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: var(--color-primary);
}
.support-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.icon-container {
width: 48px;
height: 48px;
background: var(--color-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.support-card-icon:hover .icon-container {
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}
.icon-container i {
width: 24px;
height: 24px;
color: white;
}
.support-status {
width: 12px;
height: 12px;
border-radius: 50%;
position: relative;
}
.support-status.online {
background: #10b981;
animation: pulse 2s infinite;
}
.support-status.online::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.2);
animation: ripple 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes ripple {
0% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
.support-card-content h3 {
font-size: 18px;
font-weight: 700;
color: var(--color-text);
margin: 0 0 4px 0;
}
.support-card-content p {
font-size: 14px;
color: var(--color-text-muted);
margin: 0;
font-weight: 500;
}
/* Support Departments Section */
.support-departments {
padding: 80px 0;
background: var(--color-bg);
}
.support-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 40px;
}
.support-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.support-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: var(--color-primary);
}
.support-card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.support-icon-large {
width: 48px;
height: 48px;
background: var(--color-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.support-icon-large i {
width: 24px;
height: 24px;
color: white;
}
.support-card h3 {
font-size: 24px;
font-weight: 700;
color: var(--color-text);
margin: 0;
}
.support-description {
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 20px;
}
.support-features {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.support-feature {
display: flex;
align-items: center;
gap: 12px;
}
.support-feature i {
width: 16px;
height: 16px;
color: #10b981;
flex-shrink: 0;
}
.support-feature span {
color: var(--color-text);
font-weight: 500;
}
.support-availability {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding: 16px;
background: var(--color-bg);
border-radius: 8px;
border: 1px solid var(--color-border);
}
.availability-badge {
display: flex;
align-items: center;
gap: 8px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-dot.online {
background: #10b981;
animation: pulse 2s infinite;
}
.response-time {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-text-muted);
font-size: 14px;
}
.response-time i {
width: 14px;
height: 14px;
}
.support-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.support-actions .btn {
flex: 1;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Support Methods Section */
.support-methods {
padding: 80px 0;
background: var(--color-bg-alt);
}
.methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.method-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
}
.method-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: var(--color-primary);
}
.method-icon {
width: 64px;
height: 64px;
background: var(--color-primary);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.method-icon i {
width: 32px;
height: 32px;
color: white;
}
.method-card h3 {
font-size: 20px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 12px;
}
.method-card p {
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 20px;
}
.method-features {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.feature-tag {
background: var(--color-primary);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
/* Support Statistics Section */
.support-stats {
padding: 80px 0;
background: var(--color-bg);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 40px;
}
.stat-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: var(--color-primary);
}
.stat-icon {
width: 48px;
height: 48px;
background: var(--color-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.stat-icon i {
width: 24px;
height: 24px;
color: white;
}
.stat-number {
font-size: 36px;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 8px;
}
.stat-label {
color: var(--color-text-muted);
font-weight: 500;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.support-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.support-card {
padding: 20px;
}
.support-actions {
flex-direction: column;
}
.support-actions .btn {
width: 100%;
}
.methods-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.support-icons-grid {
grid-template-columns: 1fr;
gap: 16px;
max-width: 280px;
}
.support-card-icon {
padding: 16px;
}
.icon-container {
width: 40px;
height: 40px;
}
.icon-container i {
width: 20px;
height: 20px;
}
.support-card-content h3 {
font-size: 16px;
}
.support-card-content p {
font-size: 13px;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.support-icons-grid {
max-width: 240px;
}
.support-card-icon {
padding: 14px;
}
.icon-container {
width: 36px;
height: 36px;
}
.icon-container i {
width: 18px;
height: 18px;
}
.support-card-content h3 {
font-size: 15px;
}
.support-card-content p {
font-size: 12px;
}
}
/* ===== CONTACT PAGE STYLES ===== */
.page-contact {
background: var(--color-bg);
}
/* Contact Hero Visual */
.contact-hero-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.contact-visual-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 400px;
width: 100%;
}
.contact-method-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.contact-method-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
border-color: var(--color-accent);
}
.contact-icon {
width: 48px;
height: 48px;
background: var(--color-accent);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
transition: all 0.3s ease;
}
.contact-method-card:hover .contact-icon {
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}
.contact-icon i {
width: 24px;
height: 24px;
color: white;
}
.contact-label {
font-weight: 600;
color: var(--color-text);
font-size: 14px;
margin-bottom: 8px;
}
.contact-status {
width: 8px;
height: 8px;
border-radius: 50%;
margin: 0 auto;
background: #10b981;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.contact-status.online {
background: #10b981;
animation: pulse 2s infinite;
}
/* Contact Form Section */
.contact-form-section {
padding: 80px 0;
background: var(--color-bg);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: start;
}
.contact-form-container h2,
.contact-info-container h2 {
font-size: 32px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 12px;
}
.section-subtitle {
color: var(--color-text-muted);
margin-bottom: 40px;
line-height: 1.6;
}
/* Contact Form Styles */
.contact-form {
display: flex;
flex-direction: column;
gap: 24px;
background: var(--color-surface-secondary);
padding: 32px;
border-radius: 16px;
border: 1px solid var(--color-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-weight: 600;
color: var(--color-text);
font-size: 14px;
margin-bottom: 8px;
display: block;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.9;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 18px;
border: 2px solid var(--color-border);
border-radius: 12px;
background: var(--color-card);
color: var(--color-text);
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
background: var(--color-surface-secondary);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text);
opacity: 0.6;
font-weight: 400;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
border-color: var(--color-accent);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 48px;
}
.form-group select option {
background: var(--color-card);
color: var(--color-text);
padding: 8px;
}
.checkbox-group {
flex-direction: row;
align-items: flex-start;
gap: 12px;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0;
flex-shrink: 0;
}
.checkbox-label a {
color: var(--color-primary);
text-decoration: none;
}
.checkbox-label a:hover {
text-decoration: underline;
}
.btn-submit {
align-self: flex-start;
display: flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
}
.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Contact Info Styles */
.contact-info-container {
position: sticky;
top: 100px;
}
.contact-info-section {
margin-bottom: 40px;
padding: 24px;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.contact-info-section h3 {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
}
.contact-info-section h3 i {
width: 20px;
height: 20px;
color: var(--color-primary);
}
.contact-emails {
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-email-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.email-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.email-link {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
font-size: 16px;
}
.email-link:hover {
text-decoration: underline;
}
.business-hours {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.day {
font-weight: 600;
color: var(--color-text);
}
.time {
color: var(--color-text-muted);
}
.hours-note {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: var(--color-bg);
border-radius: 8px;
font-size: 14px;
color: var(--color-text-muted);
}
.hours-note i {
width: 16px;
height: 16px;
color: var(--color-primary);
}
.realtime-channels {
display: flex;
flex-direction: column;
gap: 12px;
}
.channel-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
text-decoration: none;
color: var(--color-text);
transition: all 0.3s ease;
}
.channel-link:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.channel-link i {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.channel-link span:first-of-type {
font-weight: 600;
flex: 1;
}
.status {
font-size: 12px;
padding: 4px 8px;
border-radius: 12px;
font-weight: 600;
}
.status.online {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.channel-link:hover .status.online {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.support-redirect {
text-align: center;
}
.support-redirect p {
color: var(--color-text-muted);
margin-bottom: 20px;
line-height: 1.6;
}
/* Company Information Section */
.company-info-section {
padding: 80px 0;
background: var(--color-bg-alt);
}
.company-info-section h2 {
text-align: center;
font-size: 32px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 40px;
}
.company-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 800px;
margin: 0 auto;
}
.company-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 30px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.company-icon {
width: 48px;
height: 48px;
background: var(--color-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.company-icon i {
width: 24px;
height: 24px;
color: white;
}
.company-content h3 {
font-size: 20px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 16px;
}
.company-detail {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding: 4px 0;
}
.company-detail .label {
font-weight: 600;
color: var(--color-text-muted);
}
.company-detail .value {
color: var(--color-text);
font-weight: 500;
}
.company-detail .value.active {
color: #10b981;
font-weight: 600;
}
.compliance-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.compliance-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--color-text);
}
.compliance-item i {
width: 16px;
height: 16px;
color: #10b981;
flex-shrink: 0;
}
/* Contact Page Mobile Responsiveness */
@media (max-width: 1024px) {
.contact-content {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-info-container {
position: static;
}
}
@media (max-width: 768px) {
.contact-form-section {
padding: 60px 0;
}
.contact-content {
gap: 30px;
}
.contact-form {
padding: 24px;
margin: 0 16px;
}
.form-row {
grid-template-columns: 1fr;
gap: 16px;
}
}
.contact-visual-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 320px;
}
.contact-method-card {
padding: 16px;
}
}
@media (max-width: 480px) {
.contact-visual-grid {
grid-template-columns: 1fr;
gap: 12px;
max-width: 280px;
}
.contact-method-card {
padding: 14px;
}
.contact-icon {
width: 40px;
height: 40px;
}
.contact-icon i {
width: 20px;
height: 20px;
}
.contact-label {
font-size: 13px;
}
.company-details {
grid-template-columns: 1fr;
gap: 20px;
}
.company-card {
flex-direction: column;
text-align: center;
gap: 16px;
}
.compliance-items {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.contact-form-container h2,
.contact-info-container h2,
.company-info-section h2 {
font-size: 24px;
}
.contact-info-section {
padding: 20px;
}
.company-card {
padding: 20px;
}
.hours-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}