:root { --navy:#071a3a; --navy-2:#0d2858; --blue:#1267ec; --cyan:#25c7f3; --ink:#111827; --muted:#64748b; --paper:#f7faff; --line:#dce6f4; --white:#fff; --shadow:0 18px 50px rgba(12, 43, 91, .11); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:76px; } body { margin:0; color:var(--ink); background:var(--white); font-family:Inter,Arial,sans-serif; line-height:1.6; } a { color:inherit; text-decoration:none; } button { font:inherit; } .container { width:min(1120px, calc(100% - 40px)); margin:auto; } .site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); border-bottom:1px solid rgba(220,230,244,.7); backdrop-filter:blur(15px); } .nav { height:74px; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:9px; line-height:1; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); border-radius:9px; box-shadow:0 6px 12px rgba(18,103,236,.22); } .brand-mark svg { width:19px; } .brand strong { display:block; font:700 18px/1 'Space Grotesk',sans-serif; letter-spacing:-.8px; } .brand strong span { color:var(--blue); } .brand small { display:block; margin-top:3px; color:var(--muted); font-size:7px; font-weight:800; letter-spacing:1.6px; } .nav-links { display:flex; align-items:center; gap:25px; font-size:13px; font-weight:600; color:#34445e; } .nav-links > a:not(.nav-cta):hover { color:var(--blue); } .nav-cta { display:flex; align-items:center; gap:7px; padding:10px 13px; color:#fff; background:var(--navy); border-radius:8px; } .nav-cta svg { width:15px; } .menu-toggle { display:none; width:42px; height:42px; padding:10px; border:0; background:#edf4ff; border-radius:8px; cursor:pointer; } .menu-toggle span { display:block; height:2px; margin:5px 0; background:var(--navy); transition:.25s; }
.hero { overflow:hidden; position:relative; min-height:650px; padding:82px 0 70px; background:linear-gradient(112deg,#fff 0%,#f6faff 68%,#e7f7ff 100%); } .hero:before { content:""; position:absolute; width:530px; height:530px; top:-350px; left:25%; border-radius:50%; background:rgba(37,199,243,.12); filter:blur(30px); } .hero-grid { position:relative; display:grid; align-items:center; gap:55px; } .eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 13px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:1.35px; text-transform:uppercase; } .eyebrow span { width:21px; height:2px; background:var(--cyan); } h1,h2,h3 { font-family:'Space Grotesk',Inter,sans-serif; line-height:1.08; letter-spacing:-1.5px; } h1 { max-width:630px; margin:0; font-size:clamp(40px,8vw,68px); font-weight:700; } h1 em { color:var(--blue); font-style:normal; } .hero-text { max-width:565px; margin:22px 0 28px; color:#52637a; font-size:16px; } .hero-text strong { color:var(--ink); } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 18px; border-radius:9px; font-size:13px; font-weight:700; transition:transform .2s,box-shadow .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button svg { width:17px; } .button-primary { color:#fff; background:linear-gradient(110deg,var(--blue),#1688ec); box-shadow:0 10px 21px rgba(18,103,236,.27); } .button-ghost { border:1px solid var(--line); background:#fff; color:#253752; } .button-dark { color:#fff; background:var(--navy); } .hero-proof { display:flex; align-items:center; gap:11px; margin-top:30px; font-size:11px; color:var(--muted); line-height:1.45; } .hero-proof p { margin:0; } .hero-proof strong { color:#2a3c58; } .avatars { display:flex; padding-left:6px; } .avatars span { display:grid; place-items:center; width:27px; height:27px; margin-left:-6px; color:#fff; background:#7ba2d9; border:2px solid #fff; border-radius:50%; font-size:9px; font-weight:800; } .avatars span:nth-child(2) { background:#1a82b5; } .avatars span:nth-child(3) { background:#34516d; }
.hero-visual { position:relative; display:none; min-height:435px; } .orb { position:absolute; border-radius:50%; filter:blur(1px); } .orb-one { width:350px; height:350px; top:38px; left:54px; background:linear-gradient(145deg,rgba(37,199,243,.3),rgba(18,103,236,.08)); } .orb-two { width:260px; height:260px; right:-50px; bottom:8px; background:rgba(18,103,236,.14); } .tech-card { position:absolute; background:rgba(8,29,65,.97); border:1px solid rgba(148,221,255,.3); box-shadow:0 28px 50px rgba(4,23,61,.27); } .card-main { z-index:2; top:34px; left:45px; width:315px; padding:15px; border-radius:16px; transform:rotate(-4deg); } .card-top { display:flex; align-items:center; gap:7px; color:#a8c4df; font-size:8px; font-weight:800; letter-spacing:1px; } .card-top svg { width:16px; margin-left:auto; } .status-dot { width:7px; height:7px; background:#31df91; border-radius:50%; box-shadow:0 0 9px #31df91; } .screen { position:relative; display:grid; place-items:center; height:220px; margin:15px 0 10px; overflow:hidden; color:#67d9fb; background:radial-gradient(circle,rgba(17,118,216,.45),#09204a 62%); border:1px solid rgba(121,224,255,.22); border-radius:8px; } .screen svg { width:83px; height:83px; stroke-width:1; } .scan-line { position:absolute; width:100%; height:2px; background:#64defd; box-shadow:0 0 15px #2bcaf5; animation:scan 3s ease-in-out infinite; } @keyframes scan { 0%,100% { top:25%; opacity:.1; } 50% { top:72%; opacity:1; } } .metrics { display:flex; gap:8px; } .metrics div { flex:1; padding:8px; background:rgba(109,210,255,.08); border-radius:5px; } .metrics small { display:block; color:#789dbf; font-size:7px; letter-spacing:.8px; } .metrics b { color:#f1fbff; font-size:11px; letter-spacing:.5px; } .floating-card { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:11px; background:rgba(255,255,255,.95); border:1px solid #e1edfa; border-radius:10px; box-shadow:var(--shadow); } .card-rating { right:1px; top:9px; } .google-g { display:grid; place-items:center; width:30px; height:30px; color:#4285f4; background:#fff; border-radius:50%; font-size:20px; font-weight:800; } .card-rating strong { display:flex; align-items:center; gap:3px; font-size:13px; } .card-rating strong svg { width:12px; color:#f9b51b; fill:#f9b51b; } .card-rating small { display:block; color:var(--muted); font-size:9px; } .card-tools { bottom:26px; left:0; color:#53637a; font-size:10px; line-height:1.3; } .card-tools svg { width:27px; height:27px; padding:6px; color:var(--blue); background:#e7f4ff; border-radius:7px; } .card-tools strong { color:var(--ink); font-size:11px; }
.trust-bar { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; } .trust-items { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; padding:15px 0; } .trust-items p { display:flex; align-items:center; gap:7px; margin:0; color:#465a75; font-size:11px; font-weight:700; } .trust-items svg { width:16px; color:var(--blue); } .section { padding:78px 0; } .section-heading { max-width:620px; } h2 { margin:0; font-size:clamp(31px,5vw,47px); } .section-heading > p:last-child,.products-intro > p:not(.eyebrow) { margin:16px 0 0; color:var(--muted); font-size:14px; } .service-grid { display:grid; gap:13px; margin-top:37px; } .service-card { position:relative; min-height:245px; padding:23px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; transition:transform .25s,box-shadow .25s; } .service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); } .service-card.featured { color:#fff; background:linear-gradient(145deg,#0d2b60,#061730); border-color:#0d2b60; } .service-card.featured p { color:#bdcce2; } .icon-box { display:grid; place-items:center; width:42px; height:42px; color:var(--blue); background:#eaf4ff; border-radius:10px; } .featured .icon-box { color:#77dfff; background:rgba(102,215,255,.13); } .icon-box svg { width:21px; } .card-index { position:absolute; top:22px; right:22px; color:#b5c4d6; font:600 12px 'Space Grotesk'; } .featured .card-index { color:#9ec0e5; } .service-card h3 { margin:25px 0 9px; font-size:21px; } .service-card p { margin:0; color:var(--muted); font-size:12px; } .text-link { position:absolute; bottom:21px; display:flex; align-items:center; gap:4px; color:var(--blue); font-size:11px; font-weight:800; } .text-link svg { width:14px; transition:transform .2s; } .text-link:hover svg { transform:translate(2px,-2px); } .featured .text-link { color:#67d9fb; }
.products { background:var(--paper); } .products-layout { display:grid; gap:35px; } .products-intro { max-width:400px; } .products-intro h2 { max-width:330px; } .products-intro .button { margin-top:25px; } .product-grid { display:grid; gap:13px; } .product-card { min-height:183px; padding:20px; border:1px solid #e1eaf5; border-radius:12px; background:#fff; } .product-large { background:linear-gradient(135deg,#e9f9ff,#e4efff); } .product-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:25px; border-radius:8px; } .product-icon svg { width:20px; } .storage { color:#087eb8; background:#c9f4ff; } .ram { color:#6557e6; background:#e7e3ff; } .thermal { color:#ee6c37; background:#fff0e6; } .product-card p { margin:0 0 6px; color:#758aa3; font-size:8px; font-weight:800; letter-spacing:1px; } .product-card h3 { margin:0; font-size:18px; letter-spacing:-.8px; } .product-card span { display:block; margin-top:9px; color:#718096; font-size:10px; }
.reviews { color:#fff; background:var(--navy); } .reviews-head { display:grid; gap:30px; align-items:end; } .eyebrow-light { color:#78ddf9; } .reviews h2 { max-width:500px; } .google-score { display:flex; align-items:center; gap:9px; padding:13px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:10px; } .google-score strong,.google-score span { display:block; } .google-score strong { font-size:12px; } .google-score span { display:flex; align-items:center; margin-top:3px; color:#bbcee8; font-size:9px; } .google-score svg { width:11px; color:#f6bb2e; fill:#f6bb2e; } .review-grid { display:grid; gap:13px; margin-top:35px; } blockquote { position:relative; min-height:205px; margin:0; padding:20px; background:rgba(255,255,255,.055); border:1px solid rgba(215,237,255,.13); border-radius:11px; } .quote-mark { height:25px; color:#58d7fb; font:700 44px/1 Georgia,serif; } blockquote > p { margin:13px 0 17px; color:#e4edf7; font-size:12px; line-height:1.65; } blockquote footer { position:absolute; bottom:19px; display:flex; align-items:center; gap:9px; } .reviewer { display:grid; place-items:center; width:28px; height:28px; color:#d9f6ff; background:#1c5b93; border-radius:50%; font-size:10px; font-weight:800; } blockquote footer strong,blockquote footer small { display:block; } blockquote footer strong { color:#fff; font-size:10px; } blockquote footer small { color:#9fb9d4; font-size:8px; }
.contact { background:linear-gradient(135deg,#fff,#f3f9ff); } .contact-box { display:grid; gap:35px; align-items:center; padding:31px 0; } .contact-copy h2 { max-width:420px; } .contact-copy > p:not(.eyebrow) { margin:14px 0 23px; color:var(--muted); font-size:14px; } .location-note { padding:25px; border:1px solid #bee9f9; border-radius:12px; background:#e8faff; } .location-icon { display:grid; place-items:center; width:38px; height:38px; color:#0787bd; background:#c7f3ff; border-radius:9px; } .location-icon svg { width:21px; } .location-note h3 { margin:16px 0 8px; font-size:20px; } .location-note p { margin:0; color:#4e687d; font-size:12px; } .location-note strong { color:#1f4a68; } .site-footer { padding:25px 0; color:#b7c6d9; background:#06152e; } .footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; } .brand-footer { color:#fff; } .brand-footer small { color:#97b0ce; } .footer-inner p { margin:0; font-size:10px; } .back-top { display:flex; align-items:center; gap:5px; color:#e3f3ff; font-size:10px; font-weight:700; } .back-top svg { width:13px; } .whatsapp-float { position:fixed; z-index:19; right:16px; bottom:16px; display:flex; align-items:center; gap:8px; padding:12px 14px; color:#fff; background:#22c55e; border-radius:50px; box-shadow:0 8px 25px rgba(15,118,57,.3); font-size:11px; font-weight:800; transition:transform .2s; } .whatsapp-float:hover { transform:translateY(-3px); } .whatsapp-float svg { width:21px; }
@media (min-width:600px) { .hero { padding-top:90px; } .service-grid { grid-template-columns:repeat(2,1fr); } .product-grid { grid-template-columns:repeat(2,1fr); } .product-large { grid-row:span 2; } .reviews-head { grid-template-columns:1fr auto; } .review-grid { grid-template-columns:repeat(3,1fr); } .contact-box { grid-template-columns:1fr 1fr; gap:65px; } }
@media (min-width:850px) { .hero-grid { grid-template-columns:1.1fr .9fr; } .hero-visual { display:block; } .products-layout { grid-template-columns:.8fr 1.2fr; align-items:center; gap:70px; } }
@media (max-width:749px) { .nav-links { position:absolute; top:74px; right:0; left:0; display:grid; gap:0; padding:10px 20px 20px; visibility:hidden; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 14px 22px rgba(8,31,67,.09); opacity:0; transform:translateY(-10px); transition:.25s; } .nav-links.is-open { visibility:visible; opacity:1; transform:translateY(0); } .nav-links > a { padding:12px 0; } .nav-cta { justify-content:center; margin-top:7px; padding:12px; } .menu-toggle { display:block; } .menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .menu-toggle.is-open span:nth-child(2) { opacity:0; } .menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } }
@media (min-width:750px) { .hero { min-height:610px; } .section { padding:100px 0; } }
@media (max-width:390px) { .container { width:min(100% - 32px,1120px); } .whatsapp-float span { display:none; } .whatsapp-float { padding:14px; } }
.whatsapp-float .whatsapp-logo { width:21px; height:21px; }
.hero-text .founder-link { display:inline-flex; align-items:center; gap:4px; color:var(--blue); font-weight:800; border-bottom:1px solid currentColor; } .hero-text .founder-link svg { width:13px; height:13px; }
.brand-mark { overflow:hidden; } .brand-mark img { display:block; width:100%; height:100%; }
.pymes-strip { padding:57px 0; color:#fff; background:linear-gradient(105deg,#071a3a,#0e4e9b); } .pymes-strip-inner { display:grid; gap:25px; align-items:center; } .pymes-strip h2 { max-width:700px; font-size:clamp(25px,4vw,37px); } .pymes-strip p:not(.eyebrow) { max-width:760px; margin:12px 0 0; color:#c6ddf3; font-size:13px; } @media (min-width:760px) { .pymes-strip-inner { grid-template-columns:1fr auto; } }
.hero-photo { display:block; z-index:2; top:25px; left:42px; width:315px; height:395px; margin:0; padding:0; overflow:hidden; border-radius:16px; transform:rotate(-4deg); } .hero-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%; } .hero-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(3,19,45,.85)); pointer-events:none; } .hero-photo figcaption { position:absolute; z-index:1; bottom:17px; left:17px; display:flex; align-items:center; gap:7px; color:#fff; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; } .hero-photo figcaption svg { width:15px; color:#6be0ff; } .real-work-gallery { display:grid; gap:13px; margin-top:16px; } .real-work-gallery figure { position:relative; min-height:230px; margin:0; overflow:hidden; border-radius:12px; background:var(--navy); } .real-work-gallery img { display:block; width:100%; height:100%; min-height:230px; object-fit:cover; transition:transform .45s ease; } .real-work-gallery figure:first-child img { object-position:center 54%; } .real-work-gallery figure:last-child img { object-position:center 41%; } .real-work-gallery figure:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(3,20,46,.88)); } .real-work-gallery figure:hover img { transform:scale(1.04); } .real-work-gallery figcaption { position:absolute; z-index:1; right:18px; bottom:17px; left:18px; color:#fff; } .real-work-gallery figcaption span,.real-work-gallery figcaption strong { display:block; } .real-work-gallery figcaption span { margin-bottom:3px; color:#83dffc; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } .real-work-gallery figcaption strong { font:600 17px/1.15 'Space Grotesk',sans-serif; letter-spacing:-.5px; } .stock-photo { position:relative; height:165px; margin:22px 0 0; overflow:hidden; border-radius:10px; background:#0a2247; } .stock-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 45%; } .stock-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,23,52,.7),transparent); } .stock-photo figcaption { position:absolute; z-index:1; bottom:11px; left:12px; max-width:185px; color:#fff; font-size:10px; font-weight:700; line-height:1.3; } @media (min-width:600px) { .real-work-gallery { grid-template-columns:1.2fr .8fr; } .real-work-gallery figure { min-height:270px; } .real-work-gallery img { min-height:270px; } } @media (min-width:850px) { .stock-photo { height:180px; } }
.product-photo-card { position:relative; min-height:205px; margin:0; padding:0; overflow:hidden; background:#071a3a; } .product-photo-card img { display:block; width:100%; height:100%; min-height:205px; object-fit:cover; object-position:center; transition:transform .45s ease; } .product-photo-card:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(3,18,42,.9)); } .product-photo-card:hover img { transform:scale(1.04); } .product-photo-card figcaption { position:absolute; z-index:1; right:16px; bottom:15px; left:16px; color:#fff; } .product-photo-card figcaption span,.product-photo-card figcaption strong { display:block; } .product-photo-card figcaption span { margin-bottom:2px; color:#83dffc; font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } .product-photo-card figcaption strong { font:600 16px/1.15 'Space Grotesk',sans-serif; letter-spacing:-.4px; }
.real-work-gallery figure:last-child:before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(135deg,rgba(2,13,32,.92) 0%,rgba(3,21,49,.68) 22%,rgba(5,26,59,.28) 43%,transparent 66%); pointer-events:none; } .real-work-gallery figure:after { z-index:2; } .real-work-gallery figcaption { z-index:3; }
.reviews-intro { max-width:560px; margin:12px 0 0; color:#bdcee3; font-size:13px; } .reviews-map { margin-top:22px; box-shadow:none; } .reviews-map .map-link { background:#fff; }
.reviewer-image { display:block; object-fit:cover; } blockquote footer a { display:block; margin-top:1px; color:#70daf8; font-size:8px; font-weight:700; } blockquote footer a:hover { color:#fff; text-decoration:underline; }
.services-button { margin-top:25px; } .social-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .social-links a { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; color:#155b85; background:#fff; border:1px solid #b8e6f7; border-radius:7px; font-size:10px; font-weight:800; } .social-links svg { width:14px; } .map-wrap { margin-top:32px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); } .map-wrap iframe { display:block; width:100%; height:330px; border:0; } .map-link { display:flex; align-items:center; justify-content:center; gap:7px; min-height:51px; color:var(--blue); font-size:12px; font-weight:800; } .map-link svg { width:15px; }
.inner-hero { padding:82px 0 65px; color:#fff; background:linear-gradient(135deg,#06152e,#0b3474); } .inner-hero h1 { max-width:760px; font-size:clamp(38px,7vw,62px); } .inner-hero .hero-text { color:#c2d9f0; } .service-list { display:grid; gap:14px; margin-top:38px; } .detail-card { padding:25px; border:1px solid var(--line); border-radius:12px; background:#fff; } .detail-card h2 { margin-bottom:11px; font-size:27px; } .detail-card p { margin:0; color:var(--muted); font-size:13px; } .detail-card ul { display:grid; gap:8px; margin:18px 0 0; padding:0; list-style:none; color:#40546f; font-size:13px; } .detail-card li { position:relative; padding-left:20px; } .detail-card li:before { content:'✓'; position:absolute; left:0; color:var(--blue); font-weight:800; } .detail-card.feature-card { color:#fff; background:var(--navy); border-color:var(--navy); } .detail-card.feature-card p,.detail-card.feature-card ul { color:#c2d7ec; } .detail-card.feature-card li:before { color:#65d8f9; } .service-page-cta { margin-top:35px; text-align:center; } @media (min-width:760px) { .service-list { grid-template-columns:repeat(2,1fr); } .detail-card.wide { grid-column:span 2; } }