:root{ --blue:#0b4ea2; --blue2:#0a3572; --sky:#d7ecff; --ink:#0b1220; --text:#0f172a; --muted:#5b6b82; --card:#ffffff; --line:rgba(15,23,42,.12); --shadow: 0 18px 60px rgba(2, 12, 27, .18); --shadow2: 0 10px 30px rgba(2, 12, 27, .12); --radius:22px; --radius2:16px; --accent:#f57c00; --green:#1db954; --glass: rgba(255,255,255,.72); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:linear-gradient(180deg,#f7fbff 0%, #ffffff 40%, #f7fbff 100%); } a{color:inherit; text-decoration:none} .container{width:min(1180px, calc(100% - 40px)); margin:0 auto} /* Topbar */ .topbar{ background:linear-gradient(90deg, var(--blue2), var(--blue)); color:white; font-size:13px; } .topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; } .topbar-left{display:flex; align-items:center; gap:10px} .dot{width:8px;height:8px;border-radius:99px;background:#55d6ff; box-shadow:0 0 0 4px rgba(85,214,255,.18)} .topbar-right{display:flex; align-items:center; gap:10px} .toplink{opacity:.95} .toplink:hover{opacity:1; text-decoration:underline} .sep{opacity:.5} /* Language menu */ .lang{position:relative} .lang-btn{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; padding:7px 10px; border-radius:12px; cursor:pointer; } .lang-menu{ list-style:none; margin:10px 0 0; padding:8px; position:absolute; right:0; width:160px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow2); display:none; z-index:30; } .lang-menu li{ padding:10px 10px; border-radius:10px; cursor:pointer; color:var(--text); } .lang-menu li:hover{background:#f2f7ff} /* Header */ .header{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.84); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; } .brand{display:flex; align-items:center; gap:12px} .logo{width:130px; height:130px; object-fit:contain} .brand-name{font-weight:800; letter-spacing:.5px} .brand-sub{font-size:12px; color:var(--muted); margin-top:-2px} .nav{display:flex; gap:18px; align-items:center} .nav a{ font-size:14px; color:var(--ink); opacity:.9; } .nav a:hover{opacity:1; text-decoration:underline} .header-cta{display:flex; gap:10px; align-items:center} .btn{ border:none; border-radius:14px; padding:11px 14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease; } .btn:active{transform:translateY(1px)} .btn-primary{ background:linear-gradient(180deg, var(--blue), var(--blue2)); color:white; box-shadow: 0 10px 18px rgba(11,78,162,.22); } .btn-primary:hover{box-shadow: 0 16px 30px rgba(11,78,162,.26)} .btn-ghost{ background:transparent; border:1px solid rgba(11,78,162,.25); color:var(--blue2); } .btn-ghost:hover{background:rgba(11,78,162,.06)} .btn-accent{ background:linear-gradient(180deg, #ff9a3c, var(--accent)); color:white; box-shadow: 0 12px 22px rgba(245,124,0,.25); } /* Burger */ .burger{ width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:white; display:none; cursor:pointer; } .burger span{display:block; height:2px; background:var(--ink); margin:7px 10px; border-radius:2px} /* Drawer */ .drawer{ display:none; border-top:1px solid var(--line); padding:12px 0 18px; } .drawer-link{ display:block; padding:10px 0; color:var(--ink); } .drawer-actions{display:flex; gap:10px; margin-top:10px} /* Hero */ .hero{ position:relative; overflow:hidden; } .hero-bg{ position:absolute; inset:0; background: radial-gradient(1200px 420px at 70% 30%, rgba(85,214,255,.35), transparent 60%), radial-gradient(900px 420px at 20% 10%, rgba(11,78,162,.22), transparent 58%), linear-gradient(180deg, rgba(11,78,162,.08), transparent 55%); pointer-events:none; } .hero-grid{ position:relative; display:grid; grid-template-columns: 420px 1fr; gap:26px; padding:38px 0 48px; align-items:stretch; } .panel{ background:var(--glass); border:1px solid rgba(255,255,255,.55); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; } .panel-title{ font-weight:800; letter-spacing:.2px; color:var(--blue2); margin-bottom:6px; } .panel-sub{margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.6} .form{display:flex; flex-direction:column; gap:12px} .field span{display:block; font-size:12px; color:var(--muted); margin-bottom:6px} .field input, .field select, .field textarea{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(15,23,42,.15); outline:none; background:white; } .field input:focus, .field select:focus, .field textarea:focus{ border-color: rgba(11,78,162,.45); box-shadow: 0 0 0 4px rgba(11,78,162,.12); } .panel-links{ display:flex; justify-content:space-between; font-size:13px; margin-top:8px; } .panel-links a{color:var(--blue2)} .panel-links a:hover{text-decoration:underline} .panel-note{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(15,23,42,.18); color:var(--muted); font-size:12px; } .hero-content{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.62)), url("assets/hero.jpg"); background-size: cover; background-position:center; border-radius:var(--radius); border:1px solid rgba(255,255,255,.55); box-shadow:var(--shadow); padding:26px; overflow:hidden; } .kicker{ display:inline-flex; gap:10px; align-items:center; background:rgba(255,255,255,.82); border:1px solid rgba(15,23,42,.12); padding:8px 12px; border-radius:999px; font-size:12px; color:var(--blue2); font-weight:700; } .h1{ font-size:36px; line-height:1.12; margin:14px 0 10px; color:var(--ink); max-width:740px; } .lead{ margin:0 0 18px; color:rgba(15,23,42,.78); font-size:15px; line-height:1.75; max-width:740px; } .hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px} .proof{ display:flex; gap:12px; flex-wrap:wrap; } .proof-item{ background:rgba(255,255,255,.78); border:1px solid rgba(15,23,42,.12); border-radius:16px; padding:10px 12px; min-width:140px; } .proof-big{font-weight:800; color:var(--blue2)} .proof-small{font-size:12px; color:var(--muted)} /* Assistance badge */ .assist{ position:absolute; right:18px; bottom:18px; width:min(420px, 92%); border-radius:16px; overflow:hidden; box-shadow:var(--shadow2); border:1px solid rgba(255,255,255,.55); } .assist-top{ background:linear-gradient(90deg, #67d66d, #2dbb57); color:#07340f; font-weight:900; letter-spacing:.5px; text-align:center; padding:8px 10px; } .assist-body{ display:grid; grid-template-columns: 120px 1fr; background:linear-gradient(90deg, #0b4ea2, #0a3572); color:white; align-items:center; } .assist-left{ padding:14px 12px; opacity:.95; font-weight:700; } .assist-right{ padding:14px 12px; display:flex; flex-direction:column; gap:6px; } .assist-phone{font-weight:900; font-size:20px} .assist-mail{opacity:.95} /* Sections */ .section{padding:64px 0} .section.alt{background:linear-gradient(180deg,#ffffff 0%, #f6fbff 100%)} .section-head{margin-bottom:20px} .h2{font-size:28px; margin:0 0 6px; color:var(--ink)} .muted{margin:0; color:var(--muted); line-height:1.7} .cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:18px; } .card{ background:white; border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow: 0 10px 30px rgba(2,12,27,.06); } .icon{font-size:22px} .card h3{margin:10px 0 8px; font-size:16px} .card p{margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.7} .card-link{color:var(--blue2); font-weight:700} .card-link:hover{text-decoration:underline} /* Portfolio grid */ .grid-portfolio{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px; } .work{ background:white; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow: 0 10px 30px rgba(2,12,27,.06); } .work-thumb{height:190px; background-size:cover; background-position:center} .work-meta{padding:14px} .work-title{font-weight:800} .work-tags{color:var(--muted); font-size:13px; margin-top:4px} /* Steps */ .steps{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; } .steps li{ display:flex; gap:12px; background:white; border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow: 0 10px 30px rgba(2,12,27,.06); } .step-n{ width:42px; height:42px; border-radius:16px; display:grid; place-items:center; font-weight:900; color:white; background:linear-gradient(180deg, var(--blue), var(--blue2)); } .steps h3{margin:2px 0 6px; font-size:16px} .steps p{margin:0; color:var(--muted); font-size:14px; line-height:1.7} /* Pricing */ .pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px; } .price{ background:white; border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow: 0 10px 30px rgba(2,12,27,.06); position:relative; } .price-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px} .price-tag{ font-size:12px; color:var(--blue2); font-weight:800; background:rgba(11,78,162,.10); border:1px solid rgba(11,78,162,.18); padding:6px 10px; border-radius:999px; } .price ul{margin:12px 0 16px; padding-left:18px; color:var(--muted); line-height:1.9} .featured{ border-color: rgba(245,124,0,.30); box-shadow: 0 18px 60px rgba(245,124,0,.12); } .badge{ position:absolute; top:12px; right:12px; font-size:11px; font-weight:900; color:#5a2e00; background:rgba(245,124,0,.18); border:1px solid rgba(245,124,0,.26); padding:6px 10px; border-radius:999px; } /* FAQ */ .faq details{ background:white; border:1px solid var(--line); border-radius:18px; padding:14px 14px; box-shadow: 0 10px 30px rgba(2,12,27,.06); margin-top:10px; } .faq summary{cursor:pointer; font-weight:800} .faq p{color:var(--muted); line-height:1.8} /* Contact */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; } .contact-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:14px; } .mini{ background:white; border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow: 0 10px 30px rgba(2,12,27,.06); } .mini-k{font-size:12px; color:var(--muted); margin-bottom:6px} .contact-form{ background:white; border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow: 0 10px 30px rgba(2,12,27,.06); } .two{display:grid; grid-template-columns: 1fr 1fr; gap:12px} .tiny{color:var(--muted); font-size:12px; line-height:1.6; margin:10px 0 0} /* Footer */ .footer{ border-top:1px solid var(--line); padding:28px 0; background:#fff; } .footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; } .foot-brand{font-weight:900; color:var(--ink)} .foot-muted{color:var(--muted); font-size:13px; margin-top:4px} .foot-links{display:flex; gap:14px} .foot-links a{color:var(--blue2); font-weight:700} .foot-links a:hover{text-decoration:underline} .foot-copy{color:var(--muted); font-size:13px} /* Modal */ .modal{position:fixed; inset:0; display:none; z-index:50} .modal-card{ position:relative; width:min(540px, calc(100% - 40px)); margin:8vh auto; background:white; border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow); padding:18px; z-index:2; } .modal-head{display:flex; align-items:center; justify-content:space-between} .modal-title{font-weight:900; color:var(--ink)} .modal-close{ width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:white; cursor:pointer; } .modal-backdrop{ position:absolute; inset:0; background:rgba(2,12,27,.55); backdrop-filter: blur(4px); } .modal-form{margin-top:12px; display:flex; flex-direction:column; gap:12px} /* Responsive */ @media (max-width: 980px){ .hero-grid{grid-template-columns: 1fr; padding:22px 0 40px} .cards{grid-template-columns: repeat(2, 1fr)} .grid-portfolio{grid-template-columns: repeat(2, 1fr)} .steps{grid-template-columns: 1fr} .pricing{grid-template-columns: 1fr} .contact-grid{grid-template-columns: 1fr} .contact-cards{grid-template-columns: 1fr} .assist{position:static; margin-top:16px} } @media (max-width: 820px){ .nav{display:none} .burger{display:block} .drawer{display:none} }