/* Intact Cyber — rebuilt static site. Dark cyber-law aesthetic. */
:root{
  --bg:#0a1126;
  --bg-2:#0d1730;
  --panel:#131c36;
  --panel-2:#182240;
  --border:#243150;
  --text:#e9eef1;
  --muted:#9fb0c8;
  --accent:#2dd4bf;
  --accent-dim:#1aa394;
  --danger:#e5564e;
  --danger-2:#c0392b;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Heebo","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,17,38,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:#fff;flex:0 0 auto}
.brand .mark{font-size:24px;font-weight:300;letter-spacing:.42em;padding-left:.42em}
.brand .sub{font-size:8.5px;font-weight:400;letter-spacing:.28em;color:#c7d0d4;margin-top:6px;padding-left:.28em}
.nav{display:flex;align-items:center;gap:3px;margin-left:auto;flex-wrap:wrap}
.nav>li{list-style:none;position:relative}
.nav a.top{display:block;padding:8px 10px;color:#dfe6e9;font-size:14px;font-weight:500;border-radius:6px;white-space:nowrap}
.nav a.top:hover,.nav .has-menu:hover>a.top{color:#fff;background:rgba(45,212,191,.08)}
.nav a.active{color:var(--accent)}
.menu{position:absolute;top:100%;left:0;min-width:288px;background:var(--panel);
  border:1px solid var(--border);border-radius:10px;padding:8px;display:none;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.has-menu:hover>.menu{display:block}
.menu li{list-style:none}
.menu a{display:block;padding:9px 12px;color:#cdd6da;font-size:14.5px;border-radius:6px;line-height:1.35}
.menu a:hover{background:rgba(45,212,191,.1);color:#fff}
.lang{padding:7px 14px;border:1px solid var(--border);border-radius:7px;color:#cdd6da;
  font-size:14px;font-weight:600;background:var(--panel-2)}
.lang:hover{border-color:var(--accent);color:#fff}
.emergency{display:inline-block;padding:8px 13px;border-radius:24px;color:#fff !important;
  font-weight:600;font-size:13px;background:linear-gradient(135deg,#f07167,#c0392b);
  box-shadow:0 6px 18px rgba(192,57,43,.35)}
.emergency:hover{filter:brightness(1.08);color:#fff}
.subbar{border-bottom:1px solid var(--border);background:var(--bg-2)}
.subbar .wrap{display:flex;align-items:center;justify-content:space-between;height:48px}
.breadcrumb{color:var(--muted);font-size:13px}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--accent)}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border);
  color:#fff;font-size:22px;border-radius:7px;padding:4px 11px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% 42%,rgba(45,212,191,.18),transparent 60%),
    radial-gradient(800px 420px at 12% 78%,rgba(45,212,191,.10),transparent 55%),
    linear-gradient(160deg,#0a1126 0%,#0d1730 45%,#0a1126 100%);
}
.hero video.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.92}
.hero .hero-veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(900px 460px at 75% 45%,rgba(10,17,38,.15),rgba(10,17,38,.78) 78%),
  linear-gradient(180deg,rgba(10,17,38,.35),rgba(10,17,38,.2) 40%,rgba(10,17,38,.55))}
.hero::after{content:"";position:absolute;inset:0;opacity:.28;z-index:1;
  background-image:radial-gradient(rgba(120,200,190,.18) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(900px 500px at 75% 45%,#000,transparent 70%);
  mask-image:radial-gradient(900px 500px at 75% 45%,#000,transparent 70%)}
.hero-content{position:relative;z-index:2;padding:60px 24px;max-width:900px}
.hero .logo-lockup{display:inline-block;border:1px solid rgba(255,255,255,.12);
  padding:30px 46px;margin-bottom:34px;background:rgba(0,0,0,.35)}
.hero .logo-lockup .mark{font-size:54px;font-weight:300;letter-spacing:.36em;color:#fff;padding-left:.36em}
.hero .logo-lockup .sub{font-size:13px;letter-spacing:.34em;color:#d7dee1;margin-top:14px;padding-left:.34em}
.hero h1{font-size:25px;font-weight:400;color:#d4dde0;max-width:680px;margin:0 auto;line-height:1.5}

/* ---------- Sections ---------- */
main{display:block}
.section{padding:74px 0}
.section.alt{background:var(--bg-2)}
.page-head{padding:64px 0 10px}
.page-title{font-size:34px;font-weight:600;margin:0 0 6px;color:#fff;letter-spacing:.01em}
.section h2{font-size:28px;font-weight:600;color:#fff;margin:0 0 8px}
.section-intro{color:var(--muted);max-width:760px;margin:0 0 40px}
.content p{margin:0 0 18px;color:#d2dadd}
.content h2,.content h3{color:#fff}
.content h3{font-size:21px;margin:30px 0 12px;font-weight:600}
.content ul{margin:0 0 20px;padding-left:22px}
.content li{margin:6px 0;color:#d2dadd}
.lead{font-size:19px;color:#dfe6e9}
.narrow{max-width:820px}

/* service / card grids */
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:26px;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.card h3{margin:0 0 10px;font-size:18px;color:#fff}
.card p{margin:0;color:var(--muted);font-size:15px}
.card a.more{display:inline-block;margin-top:14px;font-size:14px;font-weight:600}
.icon-badge{width:54px;height:54px;border-radius:12px;background:rgba(45,212,191,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  border:1px solid rgba(45,212,191,.25)}
.icon-badge img{width:30px;height:30px;object-fit:contain}
.icon-badge svg{width:30px;height:30px;color:#5eead4}
.service-icon{width:74px;height:74px;object-fit:contain;margin:0 0 18px}

/* service card: icon + title always shown; description snippet reveals on hover */
.card.has-icon{position:relative;text-align:center;min-height:210px;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.card.has-icon .icon-badge{margin:0 0 16px}
.card.has-icon .svc-body{display:grid;width:100%}
.card.has-icon .svc-body>h3,.card.has-icon .svc-body>.svc-pop{grid-area:1/1;align-self:center}
.card.has-icon .svc-body>h3{margin:0;transition:opacity .25s ease}
.card.has-icon .svc-pop{opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
.card.has-icon:hover .svc-body>h3,
.card.has-icon:focus-within .svc-body>h3{opacity:0}
.card.has-icon:hover .svc-pop,
.card.has-icon:focus-within .svc-pop{opacity:1;transform:none;pointer-events:auto}
.card.has-icon .svc-pop p{margin:0;color:var(--text);font-size:14.5px;line-height:1.55}
.card.has-icon .svc-pop a.more{display:inline-block;margin-top:12px;font-size:14px;font-weight:600}
@media (hover:none){
  .card.has-icon{min-height:auto}
  .card.has-icon .svc-body{display:block}
  .card.has-icon .svc-body>h3{opacity:1!important;margin-bottom:8px}
  .card.has-icon .svc-pop{position:static;opacity:1!important;transform:none!important;pointer-events:auto}
}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;text-align:center;transition:transform .18s,border-color .18s}
.member:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.5)}
.member img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0f1730}
.member .body{padding:18px}
.member h3{margin:0 0 4px;font-size:17px;color:#fff}
.member span{color:var(--accent);font-size:13.5px}
.headshot{width:240px;height:240px;object-fit:cover;border-radius:14px;border:1px solid var(--border);
  float:right;margin:0 0 18px 28px}
.role{color:var(--accent);font-weight:600;font-size:18px;margin:0 0 18px}

/* media gallery */
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.media-grid img{width:100%;border-radius:10px;border:1px solid var(--border);background:#0f1730}

/* buttons */
.btn{display:inline-block;padding:12px 26px;border-radius:26px;font-weight:600;font-size:15px;
  background:var(--accent);color:#04201c !important;border:none;cursor:pointer}
.btn:hover{background:#5fe6d4;color:#04201c !important}
.btn-outline{background:transparent;color:var(--accent) !important;border:1px solid var(--accent)}
.btn-outline:hover{background:rgba(45,212,191,.12);color:#fff !important}
.btn-back{display:inline-block;margin-top:24px;color:var(--accent);font-weight:600}
.btn-danger{background:linear-gradient(135deg,#f07167,#c0392b);color:#fff !important}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info p{margin:6px 0;color:#d2dadd}
.contact-info .label{color:var(--muted);font-size:13px;text-transform:uppercase;
  letter-spacing:.12em;margin-top:22px;margin-bottom:2px}
form .field{margin-bottom:16px}
form label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
form input,form textarea{width:100%;padding:12px 14px;background:var(--panel);
  border:1px solid var(--border);border-radius:9px;color:#fff;font-size:15px;font-family:inherit}
form input:focus,form textarea:focus{outline:none;border-color:var(--accent)}
form textarea{min-height:130px;resize:vertical}

/* emergency page */
.emergency-hero{text-align:center;padding:96px 0;
  background:radial-gradient(800px 400px at 50% 30%,rgba(192,57,43,.22),transparent 60%),var(--bg)}
.emergency-hero h1{font-size:34px;color:#fff;margin:0 0 18px;font-weight:600}
.emergency-hero .num{font-size:40px;font-weight:700;color:var(--danger);letter-spacing:.02em}
.emergency-hero p{color:var(--muted);max-width:560px;margin:22px auto 30px}

/* quiz */
.quiz-embed{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:48px;text-align:center;color:var(--muted)}
.quiz-embed .quiz-hint{margin:14px 0 0;font-size:13px;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);background:#080f22;padding:40px 0;text-align:center}
.site-footer .contact-line{color:#dfe6e9;font-size:15px;margin:0 0 10px}
.site-footer .contact-line a{color:var(--accent)}
.site-footer .copy{color:var(--muted);font-size:13px;line-height:1.7}
.site-footer .copy a{color:var(--muted)}.site-footer .copy a:hover{color:var(--accent)}

/* ---------- Scroll reveal & hover motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  .hero video.hero-bg{display:none}}
.icon-badge img,.icon-badge svg,.service-icon{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .icon-badge img,.card:hover .icon-badge svg,.card:hover .service-icon,
.member:hover img{transform:rotateY(360deg)}
.member img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hero .logo-lockup{animation:fadeUp 1s ease both}
.hero h1{animation:fadeUp 1s ease .25s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- RTL ---------- */
[dir="rtl"] .brand .mark,[dir="rtl"] .brand .sub{padding-left:0;padding-right:.42em}
[dir="rtl"] .nav{margin-left:0;margin-right:auto}
[dir="rtl"] .menu{left:auto;right:0}
[dir="rtl"] .content ul{padding-left:0;padding-right:22px}
[dir="rtl"] .headshot{float:left;margin:0 28px 18px 0}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--panel);border-bottom:1px solid var(--border);padding:10px;gap:2px}
  .nav.open{display:flex}
  .nav>li{width:100%}
  .menu{position:static;display:block;border:none;box-shadow:none;background:transparent;
    padding:0 0 0 14px;min-width:0}
  .grid.cols-3,.grid.cols-2,.team-grid{grid-template-columns:1fr}
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .hero .logo-lockup .mark{font-size:34px}
  .headshot{float:none;margin:0 0 18px}
}