:root{
  --bg:#0c1218; --card:#111a22; --muted:#bcc6d2; --text:#e8f0f7; --brand1:#0fd; --brand2:#47ff6b; --accent:#00d1ff;
  --stroke:rgba(255,255,255,.08); --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background:radial-gradient(1200px 600px at 80% -10%,rgba(0,209,255,.08),transparent),linear-gradient(180deg, #0b1217 0%, #0c1218 100%);}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:40;background:rgba(12,18,24,.7);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--stroke)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;object-fit:contain}
.brand b{font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:17px}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:-2px}
.menu{display:flex;gap:22px}
.menu a{color:#cfe7ff;font-weight:500;opacity:.9}
.cta{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--stroke);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow)}
.cta span.badge{font-size:11px;color:#061015;background:linear-gradient(90deg,var(--accent),var(--brand2));padding:4px 8px;border-radius:999px}
.burger{display:none;border:1px solid var(--stroke);border-radius:10px;padding:8px}

/* Language switcher */
.lang{display:flex;align-items:center;gap:8px}
.lang select{background:#0f1620;border:1px solid var(--stroke);color:#cfe7ff;border-radius:10px;padding:8px}
.menu-lang{display:none} /* only shown inside mobile menu */

/* HERO */
.hero{position:relative;padding:72px 0 40px;border-bottom:1px solid var(--stroke);overflow:hidden;min-height:400px}
.grid-bg{position:absolute;inset:-10% -10% auto -10%;height:320px;background:linear-gradient(90deg,transparent 50%,rgba(255,255,255,.05) 50%),linear-gradient(0deg,transparent 50%,rgba(255,255,255,.05) 50%);background-size:60px 60px;mask-image:radial-gradient(70% 120% at 30% 10%,black,transparent)}
.hero .container{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.kicker{display:inline-flex;gap:8px;align-items:center;color:#8ad8ff;font-size:13px;background:rgba(0,209,255,.08);border:1px solid rgba(0,209,255,.25);padding:6px 10px;border-radius:999px}
.title{font-size:44px;line-height:1.1;margin:14px 0 10px}
.title .grad{background:linear-gradient(90deg,var(--accent),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:var(--muted);font-size:18px}
.hero-cta{display:flex;gap:12px;margin-top:18px}
.step-desc{color:var(--muted);margin:.5em 0 0;font-size:14px}
.btn{padding:12px 16px;border-radius:12px;border:1px solid var(--stroke);background:#0f1620;cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--brand2));color:#00211a;border:none}

/* SECTIONS */
section{padding:56px 0;border-bottom:1px solid var(--stroke)}
.section-title{font-size:28px;margin:0 0 10px}
.section-sub{color:var(--muted);margin:0 0 22px}

/* Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--stroke);border-radius:16px;padding:18px;position:relative;overflow:hidden}
.card:after{content:"";position:absolute;inset:auto -40% -40% auto;width:160px;height:160px;background:radial-gradient(circle at 30% 30%,rgba(0,209,255,.2),transparent 60%)}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{color:var(--muted);font-size:14px}


.tag{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--stroke);font-size:11px;color:#8ad8ff;margin-right:6px}

/* Process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:st}

/* What We Do */
.wwd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wwd-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--stroke);border-radius:16px;padding:22px;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.wwd-card:hover{transform:translateY(-2px);border-color:rgba(0,209,255,.35)}
.wwd-card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--accent),var(--brand2));opacity:.7}
.wwd-num{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:10px;font-variant-numeric:tabular-nums}
.wwd-card h3{margin:0 0 8px;font-size:17px;line-height:1.3;color:var(--text)}
.wwd-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.step{border:1px solid var(--stroke);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.step b::before{counter-increment:st;content:counter(st) ". ";color:#8ad8ff}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.contact-form-col form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form-col form input, .contact-form-col form textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);background:#0f1620;color:var(--text)}
.contact-form-col form textarea{grid-column:1/-1;min-height:120px;resize:vertical}
.contact-form-col form button{justify-self:start}
.contact-person-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--stroke);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.contact-photo{width:100%;height:260px;object-fit:cover;object-position:center 10%;display:block}
.contact-person-info{padding:20px}
.contact-person-name{margin:0 0 4px;font-size:20px;font-weight:700}
.contact-person-role{color:var(--accent);font-size:13px;margin:0 0 16px}
.contact-details{display:flex;flex-direction:column;gap:10px}
.contact-detail-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted)}
.contact-detail-row a{color:#cfe7ff;text-decoration:none}
.contact-detail-row a:hover{color:var(--accent)}
.contact-icon{font-size:15px;margin-top:1px;flex-shrink:0}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr}}


/* Credentials */
#credentials{padding:28px 0}
.cred-row{display:flex;align-items:flex-start;gap:24px;padding:16px 0}
.cred-label{min-width:140px;font-size:13px;font-weight:600;color:var(--muted);padding-top:2px;flex-shrink:0}
.cred-items{display:flex;flex-wrap:wrap;gap:8px 24px}
.cred-item{font-size:13px;color:#cfe7ff;display:flex;flex-direction:column;gap:2px}
.cred-sub{font-size:11px;color:var(--muted)}
.cred-divider{border:none;border-top:1px solid var(--stroke);margin:0}
@media(max-width:640px){.cred-row{flex-direction:column;gap:10px}.cred-label{min-width:unset}}


footer{padding:30px 0;color:#a5b1be}

/* Utilities */
.hide{display:none}

/* ============================================================
   RESPONSIVE — tablet (≤ 980px)
   ============================================================ */
@media (max-width: 980px) {

  /* --- Header --- */
  .menu {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(10,16,22,.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--stroke);
    z-index: 999;
    padding: 8px 0;
  }
  .menu.open {
    display: flex;
  }
  .menu a {
    padding: 14px 24px;
    font-size: 16px;
    border-bottom: 1px solid var(--stroke);
  }
  .menu a:last-child { border-bottom: none; }
  .menu-lang { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--stroke); }
  .menu-lang select { background:#0f1620; border:1px solid var(--stroke); color:#cfe7ff; border-radius:10px; padding:8px 12px; font-size:15px; }

  .burger { display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; }
  .cta .badge { display: none; }
  .cta { padding: 8px 12px; font-size: 13px; }
  .lang { display: none; }

  /* --- Hero --- */
  .hero { padding: 48px 0 32px; }
  .hero .container { grid-template-columns: 1fr; gap: 20px; }
  .title { font-size: 36px; }

  /* --- Grids --- */
  .cards  { grid-template-columns: 1fr 1fr; }
  .steps  { grid-template-columns: 1fr 1fr; }
  .wwd-grid { grid-template-columns: 1fr 1fr; }

  /* --- Contact --- */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-person-card { flex-direction: row; align-items: stretch; }
  .contact-photo { width: 160px; height: auto; flex-shrink: 0; object-position: center 10%; }

  /* --- Sections --- */
  section { padding: 40px 0; }
}

/* ============================================================
   RESPONSIVE — mobile (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* --- Header --- */
  .cta { display: none; }

  /* --- Hero --- */
  .hero { padding: 36px 0 28px; }
  .title { font-size: 28px; line-height: 1.15; }
  .subtitle { font-size: 15px; }
  .kicker { font-size: 12px; }
  .hero-cta .btn { width: 100%; text-align: center; padding: 14px; }
  .hero-cta { flex-direction: column; gap: 10px; }

  /* --- Grids --- */
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .wwd-grid { grid-template-columns: 1fr; }

  /* --- Contact form --- */
  .contact-form-col form { grid-template-columns: 1fr; }
  .contact-person-card { flex-direction: column; }
  .contact-photo { width: 100%; height: 220px; }

  /* --- Credentials --- */
  .cred-row { flex-direction: column; gap: 10px; }
  .cred-label { min-width: unset; }
  .cred-items { gap: 12px 16px; }

  /* --- Sections --- */
  section { padding: 32px 0; }
  #credentials { padding: 16px 0; }
  .section-title { font-size: 22px; }

  /* --- Footer --- */
  footer .container { flex-direction: column; gap: 8px; text-align: center; }
}

/* Small motion */
@keyframes floaty {from{transform:translateY(0)} 50%{transform:translateY(-6px)} to{transform:translateY(0)}}
.floaty{animation:floaty 6s ease-in-out infinite}