:root {
            --primary:#0f172a;
            --primary-2:#172554;
            --accent:#2563eb;
            --accent-2:#06b6d4;
            --green:#16a34a;
            --bg:#f8fafc;
            --card:#fff;
            --text:#0f172a;
            --muted:#64748b;
            --line:#e2e8f0;
            --soft:#eff6ff;
            --radius:20px;
            --shadow:0 14px 45px rgba(15,23,42,.08);
            --shadow-lg:0 24px 70px rgba(15,23,42,.14);
        }

        * { box-sizing:border-box; margin:0; padding:0; }
        html { scroll-behavior:smooth; }
        body {
            font-family:Inter,system-ui,sans-serif;
            color:var(--text);
            background:var(--bg);
            line-height:1.6;
        }
        a { color:inherit; text-decoration:none; }
        button,input,select { font:inherit; }
        img { max-width:100%; display:block; }
        .container { width:min(1240px,calc(100% - 40px)); margin:auto; }

        /* top bar */
        .topbar {
            background:var(--primary);
            color:#cbd5e1;
            font-size:13px;
        }
        .topbar-inner {
            min-height:38px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .topbar-left,.topbar-right { display:flex; gap:20px; align-items:center; }
        .topbar i { color:#60a5fa; margin-right:6px; }

        /* header */
        .header {
            position:sticky;
            top:0;
            z-index:1000;
            background:rgba(255,255,255,.94);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(226,232,240,.8);
        }
        .nav {
            min-height:78px;
            display:flex;
            align-items:center;
            gap:22px;
        }
        .brand {
            display:flex;
            align-items:center;
            gap:12px;
            min-width:max-content;
        }
        .brand-mark {
            width:45px;height:45px;
            border-radius:14px;
            display:grid;
            place-items:center;
            color:#fff;
            font-weight:800;
            font-family:"Space Grotesk";
            background:linear-gradient(135deg,var(--primary),var(--accent));
            box-shadow:0 8px 20px rgba(37,99,235,.28);
        }
        .brand-text strong {
            display:block;
            font-family:"Space Grotesk";
            font-size:17px;
            line-height:1.1;
        }
        .brand-text span {
            display:block;
            font-size:10px;
            color:var(--muted);
            text-transform:uppercase;
            letter-spacing:.12em;
            margin-top:3px;
        }
        .nav-links {
            display:flex;
            align-items:center;
            gap:3px;
            margin-left:auto;
        }
        .nav-links a {
            padding:10px 13px;
            border-radius:999px;
            color:#334155;
            font-size:14px;
            font-weight:600;
        }
        .nav-links a:hover,.nav-links a.active {
            color:var(--accent);
            background:#eff6ff;
        }
        .nav-actions { display:flex; align-items:center; gap:8px; }
        .icon-btn {
            width:42px;height:42px;border:1px solid var(--line);
            background:#fff;border-radius:50%;cursor:pointer;
            color:#334155;display:grid;place-items:center;
        }
        .cart-btn {
            position:relative;
            background:var(--primary);
            color:#fff;
            border:0;
        }
        .cart-count {
            position:absolute;
            top:-4px;right:-3px;
            min-width:20px;height:20px;
            padding:0 5px;
            border-radius:20px;
            background:#ef4444;color:#fff;
            font-size:11px;font-weight:800;
            display:grid;place-items:center;
        }
        .menu-btn { display:none; }

        /* announcement */
        .announcement {
            background:linear-gradient(90deg,#1d4ed8,#0e7490);
            color:#fff;
            overflow:hidden;
        }
        .announcement-track {
            white-space:nowrap;
            padding:9px 0;
            font-size:13px;
            font-weight:600;
            text-align:center;
        }
        .announcement-track i { margin-right:8px; color:#bfdbfe; }

        /* hero */
        .hero {
            position:relative;
            overflow:hidden;
            background:
                radial-gradient(circle at 82% 25%,rgba(37,99,235,.18),transparent 28%),
                radial-gradient(circle at 15% 90%,rgba(6,182,212,.12),transparent 25%),
                linear-gradient(135deg,#f8fbff,#eef5ff 55%,#f8fafc);
            padding:86px 0 78px;
        }
        .hero::before {
            content:"";
            position:absolute;inset:0;
            opacity:.38;
            background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);
            background-size:42px 42px;
            mask-image:linear-gradient(to bottom,black,transparent);
        }
        .hero-grid {
            position:relative;
            display:grid;
            grid-template-columns:1.05fr .95fr;
            align-items:center;
            gap:70px;
        }
        .eyebrow {
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border:1px solid #bfdbfe;
            background:#eff6ff;
            color:#1d4ed8;
            border-radius:999px;
            font-size:12px;
            font-weight:800;
            letter-spacing:.03em;
        }
        .hero h1 {
            font-family:"Space Grotesk";
            font-size:clamp(42px,5.3vw,74px);
            line-height:1.02;
            letter-spacing:-.055em;
            margin:19px 0;
        }
        .hero h1 span {
            background:linear-gradient(90deg,#0f172a,#2563eb 60%,#0891b2);
            -webkit-background-clip:text;
            color:transparent;
        }
        .hero p {
            max-width:650px;
            color:#526277;
            font-size:18px;
        }
        .hero-buttons {
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:28px;
        }
        .btn {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            border:1px solid transparent;
            border-radius:12px;
            padding:13px 18px;
            font-weight:700;
            cursor:pointer;
            transition:.2s;
        }
        .btn-primary {
            color:#fff;
            background:var(--primary);
            box-shadow:0 12px 25px rgba(15,23,42,.15);
        }
        .btn-primary:hover { transform:translateY(-2px); background:#1e293b; }
        .btn-blue { background:var(--accent);color:#fff;box-shadow:0 12px 25px rgba(37,99,235,.22); }
        .btn-blue:hover { transform:translateY(-2px);background:#1d4ed8; }
        .btn-outline { background:#fff;border-color:var(--line); }
        .btn-outline:hover { border-color:#93c5fd;color:var(--accent); }
        .hero-trust {
            display:flex;flex-wrap:wrap;gap:20px;
            margin-top:26px;color:#64748b;font-size:13px;font-weight:600;
        }
        .hero-trust strong { color:var(--text); }
        .hero-visual {
            position:relative;
            min-height:450px;
            display:grid;
            place-items:center;
        }
        .hero-orb {
            width:370px;height:370px;
            border-radius:50%;
            position:relative;
            background:radial-gradient(circle at 35% 30%,#fff,#dbeafe 45%,#bfdbfe);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 35px 90px rgba(37,99,235,.18);
        }
        .hero-orb::before,.hero-orb::after {
            content:"";position:absolute;inset:24px;border:1px dashed rgba(37,99,235,.3);border-radius:50%;
        }
        .hero-orb::after { inset:78px;border-style:solid;border-color:rgba(6,182,212,.22); }
        .device {
            position:absolute;
            width:230px;height:150px;
            left:50%;top:50%;
            transform:translate(-50%,-55%) rotate(-5deg);
            border-radius:13px 13px 7px 7px;
            background:linear-gradient(145deg,#0f172a,#334155);
            border:7px solid #111827;
            box-shadow:0 24px 45px rgba(15,23,42,.3);
            overflow:hidden;
        }
        .device::before {
            content:"SCT";
            position:absolute;inset:12px;
            display:grid;place-items:center;
            border-radius:5px;
            background:linear-gradient(135deg,#172554,#2563eb);
            color:#fff;font:bold 38px "Space Grotesk";
            letter-spacing:.08em;
        }
        .device-base {
            position:absolute;
            width:270px;height:15px;
            background:#64748b;
            border-radius:50%;
            left:50%;bottom:75px;
            transform:translateX(-50%);
            box-shadow:0 7px 12px rgba(15,23,42,.2);
        }
        .float-card {
            position:absolute;
            background:rgba(255,255,255,.94);
            border:1px solid rgba(255,255,255,.9);
            box-shadow:var(--shadow-lg);
            border-radius:15px;
            padding:13px 15px;
            display:flex;align-items:center;gap:10px;
            font-size:12px;font-weight:800;
        }
        .float-card i {
            width:36px;height:36px;border-radius:10px;
            display:grid;place-items:center;
            color:var(--accent);background:#eff6ff;
            font-size:16px;
        }
        .float-1 { top:42px;right:0; }
        .float-2 { left:-15px;top:180px; }
        .float-3 { right:10px;bottom:60px; }

        /* sections */
        .section { padding:82px 0; }
        .section-head {
            text-align:center;
            max-width:720px;
            margin:0 auto 42px;
        }
        .section-kicker {
            color:var(--accent);
            text-transform:uppercase;
            font-size:12px;
            font-weight:800;
            letter-spacing:.14em;
        }
        .section-head h2 {
            font-family:"Space Grotesk";
            font-size:clamp(30px,4vw,44px);
            letter-spacing:-.04em;
            margin:7px 0 9px;
        }
        .section-head p { color:var(--muted); }

        /* category */
        .category-grid {
            display:grid;
            grid-template-columns:repeat(8,1fr);
            gap:12px;
        }
        .category-card {
            background:#fff;
            border:1px solid var(--line);
            border-radius:16px;
            padding:20px 10px;
            text-align:center;
            transition:.2s;
        }
        .category-card:hover {
            transform:translateY(-5px);
            border-color:#bfdbfe;
            box-shadow:var(--shadow);
        }
        .category-icon {
            width:48px;height:48px;margin:0 auto 10px;
            border-radius:14px;
            display:grid;place-items:center;
            color:var(--accent);background:#eff6ff;
        }
        .category-card strong { font-size:13px; }

        /* product section */
        .products-section { background:#fff; }
        .filter-bar {
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:15px;
            margin-bottom:25px;
        }
        .filter-tabs {
            display:flex;gap:7px;flex-wrap:wrap;
        }
        .filter-tab {
            padding:9px 14px;
            border:1px solid var(--line);
            background:#fff;
            color:#475569;
            border-radius:999px;
            cursor:pointer;
            font-size:13px;font-weight:700;
        }
        .filter-tab.active,.filter-tab:hover {
            background:#eff6ff;color:var(--accent);border-color:#bfdbfe;
        }
        .product-grid {
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:18px;
        }
        .product-card {
            position:relative;
            background:#fff;
            border:1px solid var(--line);
            border-radius:18px;
            overflow:hidden;
            transition:.22s;
        }
        .product-card:hover {
            transform:translateY(-6px);
            box-shadow:var(--shadow-lg);
            border-color:#bfdbfe;
        }
        .product-image {
            position:relative;
            height:225px;
            background:#f8fafc;
            display:grid;place-items:center;
            overflow:hidden;
        }
        .product-image img {
            width:100%;height:100%;object-fit:cover;
            transition:.35s;
        }
        .product-card:hover .product-image img { transform:scale(1.05); }
        .product-badge {
            position:absolute;top:12px;left:12px;
            background:var(--primary);color:#fff;
            border-radius:999px;padding:5px 9px;
            font-size:10px;font-weight:800;
        }
        .product-wish {
            position:absolute;right:12px;top:12px;
            width:35px;height:35px;border:0;border-radius:50%;
            background:#fff;box-shadow:0 5px 15px rgba(15,23,42,.1);
            cursor:pointer;color:#64748b;
        }
        .product-info { padding:17px; }
        .product-brand { color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase; }
        .product-info h3 {
            font-family:"Space Grotesk";
            font-size:17px;
            margin:4px 0 5px;
        }
        .product-spec { color:var(--muted);font-size:12px;min-height:40px; }
        .price-row {
            display:flex;align-items:end;justify-content:space-between;
            gap:10px;margin-top:13px;
        }
        .price strong { font-size:20px;font-family:"Space Grotesk"; }
        .old-price { color:#94a3b8;text-decoration:line-through;font-size:11px;display:block; }
        .add-cart {
            width:40px;height:40px;border:0;border-radius:11px;
            color:#fff;background:var(--accent);cursor:pointer;
        }
        .add-cart:hover { background:#1d4ed8; }

        /* promo */
        .promo {
            padding:75px 0;
            background:linear-gradient(135deg,#0f172a,#172554);
            color:#fff;
            overflow:hidden;
            position:relative;
        }
        .promo::before {
            content:"";
            position:absolute;width:500px;height:500px;border-radius:50%;
            right:-150px;top:-220px;
            background:rgba(37,99,235,.3);
            filter:blur(10px);
        }
        .promo-grid {
            position:relative;
            display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;
        }
        .promo h2 { font:700 clamp(30px,4vw,45px) "Space Grotesk";letter-spacing:-.04em; }
        .promo p { color:#cbd5e1;margin-top:8px;max-width:700px; }

        /* services */
        .service-grid {
            display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
        }
        .service-card {
            padding:28px;
            background:#fff;border:1px solid var(--line);
            border-radius:18px;
            box-shadow:0 7px 25px rgba(15,23,42,.04);
        }
        .service-icon {
            width:52px;height:52px;border-radius:15px;
            display:grid;place-items:center;
            color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));
            font-size:20px;margin-bottom:18px;
        }
        .service-card h3 { font:700 20px "Space Grotesk";margin-bottom:7px; }
        .service-card p { color:var(--muted);font-size:14px; }

        /* why us */
        .why { background:#f1f5f9; }
        .why-grid {
            display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;
        }
        .why-list { display:grid;gap:15px;margin-top:25px; }
        .why-item {
            display:flex;gap:13px;align-items:flex-start;
            background:#fff;border:1px solid var(--line);
            padding:15px;border-radius:14px;
        }
        .why-item i {
            width:38px;height:38px;flex:0 0 38px;
            border-radius:10px;display:grid;place-items:center;
            background:#ecfdf5;color:var(--green);
        }
        .why-item strong { display:block;font-size:14px; }
        .why-item span { display:block;color:var(--muted);font-size:12px;margin-top:2px; }
        .stats-card {
            background:linear-gradient(145deg,#0f172a,#1e3a8a);
            border-radius:25px;padding:35px;color:#fff;
            box-shadow:var(--shadow-lg);
        }
        .stats-card h3 { font:700 26px "Space Grotesk"; }
        .stats-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px; }
        .stat {
            padding:20px;background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.1);border-radius:15px;
        }
        .stat strong { display:block;font:700 31px "Space Grotesk"; }
        .stat span { color:#bfdbfe;font-size:12px; }

        /* brands */
        .brands { background:#fff; }
        .brand-row {
            display:grid;grid-template-columns:repeat(6,1fr);
            gap:15px;
        }
        .brand-box {
            height:90px;border:1px solid var(--line);border-radius:15px;
            display:grid;place-items:center;color:#475569;
            background:#fff;font:700 20px "Space Grotesk";
        }

        /* CTA */
        .contact-cta {
            background:linear-gradient(135deg,#eff6ff,#ecfeff);
            border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;
        }
        .cta-card {
            display:grid;grid-template-columns:1fr auto;
            gap:30px;align-items:center;
        }
        .cta-card h2 { font:700 clamp(28px,4vw,42px) "Space Grotesk";letter-spacing:-.04em; }
        .cta-card p { color:var(--muted);margin-top:5px; }

        /* footer */
        footer {
            background:#0b1220;color:#cbd5e1;
            padding:60px 0 25px;
        }
        .footer-grid {
            display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
            gap:40px;
        }
        .footer-brand { color:#fff;font:700 21px "Space Grotesk"; }
        footer p { color:#94a3b8;font-size:13px;margin-top:10px; }
        footer h4 { color:#fff;font-size:14px;margin-bottom:14px; }
        footer ul { list-style:none;display:grid;gap:8px;font-size:13px; }
        footer li a:hover { color:#60a5fa; }
        .footer-bottom {
            border-top:1px solid #1e293b;margin-top:42px;padding-top:20px;
            display:flex;justify-content:space-between;gap:15px;
            font-size:12px;color:#64748b;
        }
        .socials { display:flex;gap:8px; }
        .social {
            width:35px;height:35px;border:1px solid #334155;border-radius:50%;
            display:grid;place-items:center;
        }
        .social:hover { color:#60a5fa;border-color:#60a5fa; }

        /* search overlay */
        .search-overlay {
            position:fixed;inset:0;background:rgba(15,23,42,.6);
            backdrop-filter:blur(8px);z-index:2000;
            display:none;align-items:flex-start;justify-content:center;
            padding:100px 20px;
        }
        .search-overlay.open { display:flex; }
        .search-box {
            width:min(700px,100%);
            background:#fff;border-radius:20px;padding:20px;
            box-shadow:var(--shadow-lg);
        }
        .search-box form { display:flex;gap:8px; }
        .search-box input {
            flex:1;border:1px solid var(--line);border-radius:12px;
            padding:14px;outline:none;
        }
        .search-box input:focus { border-color:#93c5fd;box-shadow:0 0 0 4px #eff6ff; }
        .close-search {
            width:44px;border:0;border-radius:12px;background:#f1f5f9;cursor:pointer;
        }

        /* cart drawer */
        .cart-drawer {
            position:fixed;top:0;right:0;width:min(430px,100%);
            height:100vh;background:#fff;z-index:2100;
            box-shadow:-20px 0 60px rgba(15,23,42,.18);
            transform:translateX(105%);transition:.3s;
            display:flex;flex-direction:column;
        }
        .cart-drawer.open { transform:translateX(0); }
        .cart-head {
            padding:20px;border-bottom:1px solid var(--line);
            display:flex;justify-content:space-between;align-items:center;
        }
        .cart-head h3 { font:700 20px "Space Grotesk"; }
        .cart-close { border:0;background:#f1f5f9;width:38px;height:38px;border-radius:50%;cursor:pointer; }
        .cart-items { padding:15px;overflow:auto;flex:1; }
        .cart-item {
            display:grid;grid-template-columns:60px 1fr auto;
            gap:10px;padding:12px 0;border-bottom:1px solid var(--line);
        }
        .cart-item img { width:60px;height:55px;object-fit:cover;border-radius:9px; }
        .cart-item strong { font-size:13px;display:block; }
        .cart-item small { color:var(--muted); }
        .remove-item { border:0;background:none;color:#ef4444;cursor:pointer; }
        .cart-empty { text-align:center;padding:70px 20px;color:var(--muted); }
        .cart-empty i { font-size:42px;color:#cbd5e1;margin-bottom:12px; }
        .cart-footer { border-top:1px solid var(--line);padding:18px; }
        .cart-total { display:flex;justify-content:space-between;font-weight:800;margin-bottom:13px; }
        .cart-footer .btn { width:100%; }

        /* toast */
        .toast {
            position:fixed;right:20px;bottom:20px;z-index:3000;
            background:#0f172a;color:#fff;padding:13px 17px;border-radius:12px;
            box-shadow:var(--shadow-lg);transform:translateY(120px);opacity:0;
            transition:.3s;font-size:13px;
        }
        .toast.show { transform:translateY(0);opacity:1; }

        /* reveal */
        .reveal { opacity:0;transform:translateY(20px);transition:.65s ease; }
        .reveal.visible { opacity:1;transform:none; }

        @media (max-width:1100px) {
            .category-grid { grid-template-columns:repeat(4,1fr); }
            .product-grid { grid-template-columns:repeat(3,1fr); }
            .nav-links { display:none; }
            .menu-btn { display:grid; }
        }
        @media (max-width:850px) {
            .topbar-left span:nth-child(2),.topbar-right span { display:none; }
            .hero-grid,.why-grid { grid-template-columns:1fr; }
            .hero { padding:60px 0; }
            .hero-visual { min-height:390px; }
            .service-grid { grid-template-columns:1fr 1fr; }
            .brand-row { grid-template-columns:repeat(3,1fr); }
            .footer-grid { grid-template-columns:1fr 1fr; }
            .cta-card,.promo-grid { grid-template-columns:1fr; }
        }
        @media (max-width:620px) {
            .container { width:min(100% - 28px,1240px); }
            .topbar { display:none; }
            .nav { min-height:68px; }
            .brand-text span { display:none; }
            .brand-text strong { font-size:15px; }
            .brand-mark { width:40px;height:40px; }
            .nav-actions .icon-btn:first-child { display:none; }
            .hero h1 { font-size:43px; }
            .hero p { font-size:15px; }
            .hero-buttons .btn { width:100%; }
            .hero-orb { width:290px;height:290px; }
            .device { width:190px;height:125px; }
            .device-base { width:220px;bottom:53px; }
            .float-1 { right:-5px;top:35px; }
            .float-2 { left:-5px;top:155px; }
            .float-3 { right:0;bottom:30px; }
            .category-grid { grid-template-columns:repeat(4,1fr);gap:8px; }
            .category-card { padding:13px 5px; }
            .category-icon { width:40px;height:40px;font-size:14px; }
            .category-card strong { font-size:10px; }
            .section { padding:60px 0; }
            .filter-bar { align-items:flex-start;flex-direction:column; }
            .product-grid { grid-template-columns:1fr 1fr;gap:11px; }
            .product-image { height:155px; }
            .product-info { padding:12px; }
            .product-info h3 { font-size:14px; }
            .product-spec { font-size:10px;min-height:48px; }
            .price strong { font-size:15px; }
            .add-cart { width:35px;height:35px; }
            .service-grid { grid-template-columns:1fr; }
            .brand-row { grid-template-columns:repeat(2,1fr); }
            .footer-grid { grid-template-columns:1fr;gap:25px; }
            .footer-bottom { flex-direction:column; }
        }