@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#05080d; --bg-2:#080f1c;
  --card:#ffffff; --ink:#101a2e; --muted:#55617a; --border:#e6eaf1; --iconbg:#f3f6fb;
  --white:#ffffff; --white-70:rgba(255,255,255,0.70); --white-55:rgba(255,255,255,0.55);
  --accent:#3b82f6; --accent-2:#7db2f8; --accent-bg:rgba(59,130,246,0.16); --accent-border:rgba(59,130,246,0.45);
  --hairline:rgba(255,255,255,0.12);
  --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:var(--white); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.heading{font-family:'Unbounded','Inter',sans-serif;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}
img,.ph{display:block;}

/* ===== header ===== */
header.site{padding:22px 0; border-bottom:1px solid var(--hairline); background:var(--bg);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700;}
.brand .mark{width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center;}
.brand .mark svg{width:16px; height:16px;}
.nav-group{display:flex; align-items:center; gap:28px;}
nav.main{display:flex; gap:30px;}
nav.main a{font-size:14px; font-weight:600; color:var(--white-70);}
nav.main a.active{color:var(--white);}
.lang-switch{display:flex; align-items:center; gap:2px; padding:3px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid var(--hairline);}
.lang-switch a{font-size:12px; font-weight:700; padding:5px 9px; border-radius:6px; color:var(--white-55);}
.lang-switch a.active{background:rgba(255,255,255,0.14); color:#fff;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:9px; font-weight:700; font-size:14px; border:none; cursor:pointer;}
.btn-light{background:var(--white); color:var(--bg);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-outline{background:transparent; color:#fff; border:1.5px solid var(--hairline);}

/* ===== mobile burger + dropdown nav ===== */
.burger{display:none; width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); align-items:center; justify-content:center; flex-direction:column; gap:4px; cursor:pointer; flex-shrink:0;}
.burger span{display:block; width:16px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mobile-nav{display:none; flex-direction:column; background:var(--bg-2); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:6px 32px 18px;}
.mobile-nav a{padding:14px 0; font-size:15px; font-weight:600; color:var(--white-70); border-bottom:1px solid var(--hairline);}
.mobile-nav a.active{color:#fff;}
.mobile-nav .mobile-cta{border-bottom:none; margin-top:14px; justify-content:center; color:var(--bg);}
.mobile-nav.open{display:flex;}

/* ===== hero ===== */
.hero{background:linear-gradient(135deg,var(--bg) 0%, var(--bg-2) 55%, #0b1526 100%); padding:90px 0 80px; overflow:hidden;}
.hero .grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.hero.centered .grid{display:block; max-width:720px; margin:0 auto; text-align:center;}
.eyebrow{display:inline-block; padding:7px 15px; border-radius:8px; background:var(--accent-bg); border:1px solid var(--accent-border); color:var(--accent-2); font-size:12px; font-weight:700; letter-spacing:0.3px; margin-bottom:20px;}
.hero h1{font-size:44px; line-height:1.14; font-weight:700; letter-spacing:-0.3px;}
.hero p.lead{font-size:16px; line-height:1.6; color:var(--white-70); max-width:460px; margin:20px 0 30px;}
.hero.centered p.lead{margin-left:auto; margin-right:auto;}
.hero-actions{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.hero.centered .hero-actions{justify-content:center;}
.link-arrow{font-weight:700; font-size:14px; color:var(--white-70);}

.ph{border:1.5px dashed rgba(255,255,255,0.28); background:rgba(255,255,255,0.03); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--white-55); font-size:13px; text-align:center; padding:18px;}
.ph .ico{width:28px; height:28px; opacity:0.6;}
.ph.on-white{border-color:#d7dce4; background:#f7f9fb; color:#8b93a1;}

.hero-illustration{height:420px;}

/* ===== generic section paddings ===== */
.sect{padding:88px 0;}
.sect-tight{padding:64px 0;}
.kicker{font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--accent-2); margin-bottom:14px;}
h2.h2{font-size:30px; font-weight:700; letter-spacing:-0.2px; max-width:640px;}
p.italic-sub{font-style:italic; color:var(--white-55); font-size:15px; margin-top:14px; max-width:520px;}

/* ===== about ===== */
.about .grid{display:grid; grid-template-columns:1fr 0.85fr; gap:56px; align-items:center;}
.about p{color:var(--white-70); font-size:15px; line-height:1.7; margin-top:16px;}
.about-illustration{height:320px;}
.about.reverse .grid{grid-template-columns:0.85fr 1fr;}

/* ===== principles (white cards) ===== */
.principles-wrap{background:var(--bg-2); padding:88px 0;}
.principles-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap;}
.cards-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card-white{background:var(--card); color:var(--ink); border-radius:var(--radius); padding:32px; border:1px solid rgba(255,255,255,0.06);}
.card-white .num{font-family:'Unbounded'; font-size:28px; font-weight:700; color:var(--accent); margin-bottom:14px;}
.card-white p{color:var(--muted); font-size:14px; line-height:1.6;}

/* ===== services grid ===== */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px;}
.svc-card{background:var(--card); color:var(--ink); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:10px;}
.svc-icon{width:42px; height:42px; border-radius:11px; background:var(--iconbg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;}
.svc-icon svg{width:20px; height:20px; stroke:var(--accent);}
.svc-card h3{font-size:15px; font-weight:700;}
.svc-card p{font-size:13px; color:var(--muted); line-height:1.5;}

/* ===== CTA banner ===== */
.cta-banner{background:linear-gradient(120deg,#2f6fe0,#3b82f6); padding:64px 0; text-align:center;}
.cta-banner h2{font-size:28px; font-weight:700; max-width:560px; margin:0 auto;}
.cta-banner p{font-size:15px; color:rgba(255,255,255,0.85); margin:14px auto 26px; max-width:480px;}

/* ===== stats ===== */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:36px;}
.stat .num{font-family:'Unbounded'; font-size:44px; font-weight:800; color:var(--white);}
.stat .label{font-size:14px; color:var(--white-55); margin-top:8px;}

/* ===== testimonials ===== */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;}
.testi-card{background:var(--card); color:var(--ink); border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:18px;}
.testi-card .quote-mark{font-family:'Unbounded'; font-size:32px; color:var(--accent);}
.testi-card p.text{font-size:14px; line-height:1.6; color:var(--ink);}
.testi-card .person{font-size:13px; color:var(--muted); border-top:1px solid var(--border); padding-top:14px;}
.testi-card .person b{color:var(--ink); display:block; font-size:14px; margin-bottom:2px;}

/* ===== footer ===== */
footer.site{padding:40px 0; border-top:1px solid var(--hairline); background:var(--bg);}
footer.site .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
footer.site nav{display:flex; gap:24px;}
footer.site nav a{font-size:13px; color:var(--white-55);}
footer.site .copy{font-size:12px; color:var(--white-55);}

/* ===== portfolio: filters + grid ===== */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}
.filter-pill{padding:9px 18px; border-radius:100px; font-size:13px; font-weight:600; border:1px solid var(--hairline); color:var(--white-70);}
.filter-pill.active{background:var(--white); color:var(--bg); border-color:var(--white);}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:32px;}
.proj-card .thumb{height:190px; border-radius:14px;}
.proj-card .meta{margin-top:12px; display:flex; align-items:center; justify-content:space-between;}
.proj-card h4{font-size:15px; font-weight:700;}
.proj-card .cat{font-size:12px; color:var(--white-55);}

.clients-row{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:32px;}
.client-logo{height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Unbounded'; font-size:13px; font-weight:600; color:var(--white-55); border:1px solid var(--hairline); background:rgba(255,255,255,0.02);}

/* ===== contact page ===== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px;}
.field-col{display:flex; flex-direction:column; gap:16px;}
.field{background:rgba(255,255,255,0.05); border:1px solid var(--hairline); border-radius:11px; padding:15px 16px; font-size:14px; color:#fff;}
.field label{display:block; font-size:12px; color:var(--white-55); margin-bottom:6px;}
.field input, .field textarea{background:none; border:none; outline:none; color:#fff; font-size:14px; width:100%; font-family:inherit;}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,0.32);}
.message-field{height:100%;}
.message-field textarea{height:150px; resize:none;}
.contact-submit{margin-top:20px; width:100%; justify-content:center; padding:15px;}

.contact-info{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:60px;}
.info-card{background:var(--card); color:var(--ink); border-radius:var(--radius); padding:28px;}
.info-card .lbl{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); margin-bottom:10px;}
.info-card .val{font-size:15px; font-weight:600;}
.map-ph{height:340px; margin-top:22px;}

/* ===== reveal-on-scroll + hover animations ===== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal:nth-child(2){transition-delay:.07s;}
.reveal:nth-child(3){transition-delay:.14s;}
.reveal:nth-child(4){transition-delay:.21s;}
.reveal:nth-child(5){transition-delay:.28s;}
.reveal:nth-child(6){transition-delay:.35s;}
.reveal:nth-child(7){transition-delay:.42s;}
.reveal:nth-child(8){transition-delay:.49s;}

.svc-card, .card-white, .testi-card, .proj-card, .info-card{transition:transform .3s ease, box-shadow .3s ease;}
.svc-card:hover, .card-white:hover, .testi-card:hover, .info-card:hover{transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,0.3);}
.svc-card:hover .svc-icon{background:var(--accent-bg); border-color:var(--accent-border);}
.svc-icon{transition:background .25s ease, border-color .25s ease;}
.proj-card{overflow:hidden;}
.proj-card .thumb{transition:transform .4s ease;}
.proj-card:hover .thumb{transform:scale(1.045);}
.stat .num{transition:color .3s ease;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .svc-card, .card-white, .testi-card, .proj-card, .info-card, .proj-card .thumb{transition:none;}
}

/* ===== contact: real map embed ===== */
.map-embed{height:340px; margin-top:22px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline);}
.map-embed iframe{width:100%; height:100%; border:0; display:block;}

@media (max-width:980px){
  .hero .grid, .about .grid, .about.reverse .grid{grid-template-columns:1fr;}
  .hero-illustration{height:280px;}
  .about-illustration{height:240px;}
  .cards-row, .services-grid, .stats-row, .testi-grid, .proj-grid, .clients-row, .contact-grid, .contact-info{grid-template-columns:repeat(2,1fr);}
  nav.main{display:none;}
  .nav-group{gap:14px;}
  .nav-cta{display:none;}
  .burger{display:flex;}
}
@media (max-width:640px){
  .cards-row, .services-grid, .stats-row, .testi-grid, .proj-grid, .clients-row, .contact-grid, .contact-info{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
}