/* Webiksa 2026 / custom hosting visual system inspired by contemporary clean hosting sites */
:root {--primary:#5567e8;--primary-dark:#374bc5;--primary-light:#8090ff;--secondary:#19b8bb;--secondary-dark:#0b9298;--accent:#8192ff;--success:#25bd91;--bg-dark:#f7f9fd;--bg-darker:#fff;--bg-card:#fff;--bg-card-hover:#f4f7ff;--bg-input:#f6f8fc;--border-color:rgba(49,65,110,.12);--border-hover:rgba(85,103,232,.4);--text-primary:#172445;--text-secondary:#53617e;--text-muted:#7d89a4;--text-dim:#a3acc0;--gradient-primary:linear-gradient(125deg,#5368df,#19b8bb);--gradient-glow:radial-gradient(circle,rgba(85,103,232,.10),transparent 70%);--shadow-md:0 12px 35px rgba(34,50,100,.10);--shadow-lg:0 25px 70px rgba(34,50,100,.13);--shadow-glow:0 14px 40px rgba(85,103,232,.16);--radius-lg:22px;--header-height:74px}
[data-theme="light"] {--primary:#5567e8;--primary-dark:#374bc5;--primary-light:#8090ff;--secondary:#19b8bb;--bg-dark:#f7f9fd;--bg-darker:#fff;--bg-card:#fff;--bg-card-hover:#f4f7ff;--bg-input:#f6f8fc;--border-color:rgba(49,65,110,.12);--text-primary:#172445;--text-secondary:#53617e;--text-muted:#7d89a4}
[data-theme="dark"] {--primary:#8493ff;--primary-dark:#6679f2;--primary-light:#a6b1ff;--secondary:#4ed4d3;--accent:#9cafff;--bg-dark:#0e1530;--bg-darker:#111b38;--bg-card:#182445;--bg-card-hover:#202e54;--bg-input:#131f40;--border-color:rgba(179,195,255,.14);--text-primary:#f4f7ff;--text-secondary:#c0cbe4;--text-muted:#96a5c6;--gradient-primary:linear-gradient(125deg,#8594ff,#4ed4d3);--shadow-md:0 10px 30px rgba(0,0,0,.22)}
body {background:var(--bg-dark);color:var(--text-primary)}
.main-header {background:color-mix(in srgb,var(--bg-darker) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border-color)}
.hero {position:relative;isolation:isolate;background:radial-gradient(ellipse at 14% 25%,rgba(85,103,232,.12),transparent 55%),radial-gradient(ellipse at 90% 80%,rgba(25,184,187,.09),transparent 55%)}
.hero-title {line-height:1.35;letter-spacing:-.035em}
.hero .hero-desc {max-width:620px}
.package-card,.feature-card,.stat-card,.admin-card,.dash-card {border:1px solid var(--border-color);box-shadow:var(--shadow-md);transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}
.package-card:hover,.feature-card:hover {transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.btn {transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.btn:hover {transform:translateY(-2px)}
.btn-primary {box-shadow:0 8px 22px rgba(85,103,232,.20)}
.hero-badge {border:1px solid var(--border-color)}
.bg-decoration {opacity:.28;pointer-events:none}
img {max-width:100%;height:auto}
:focus-visible {outline:3px solid var(--primary);outline-offset:3px}
[data-reveal] {opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.2,1)}
[data-reveal].is-visible {opacity:1;transform:none}
@media(max-width:768px){.hero-title {font-size:clamp(29px,7.5vw,44px)!important}.hero {padding:54px 0 65px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-actions .btn{max-width:100%}.main-nav.show {z-index:1000;max-height:70vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.header-inner {gap:8px}.logo-tag {display:none}.package-card:hover,.feature-card:hover {transform:none}}
@media(max-width:480px){.container {padding-left:16px;padding-right:16px}.hero-stats{gap:12px}.hero-visual{max-width:100%}.btn-lg {font-size:14px;padding:12px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}