/* ============================================================
   IT-SKYLINE — night watch over the skyline
   Display: Space Grotesk · Body: IBM Plex Sans · Mono: IBM Plex Mono
   ============================================================ */

:root{
  --ink:      #0A0E1A;   /* midnight base */
  --ink-2:    #0f1626;   /* raised surface */
  --ink-3:    #141d31;   /* card / band */
  --line:     rgba(124,137,168,0.16);
  --halo:     #EAEEF7;   /* primary text */
  --mute:     #8794b0;   /* secondary text */
  --mute-2:   #5b6786;
  --beacon:   #4ADED6;   /* aqua signal accent */
  --beacon-2: #6E8BFF;   /* indigo sky glow */
  --alert:    #FF7A66;   /* reserved: offensive / stress-test */
  --radius:   14px;
  --maxw:     1160px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--halo);
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:300;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; font-weight:600; line-height:1.08; letter-spacing:-0.02em; margin:0}
.mono{font-family:"IBM Plex Mono",monospace; font-weight:400}
::selection{background:var(--beacon); color:var(--ink)}
:focus-visible{outline:2px solid var(--beacon); outline-offset:3px; border-radius:4px}

/* ambient sky glow */
.sky{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -8%, rgba(110,139,255,0.16), transparent 55%),
    radial-gradient(90% 60% at 12% 4%, rgba(74,222,214,0.10), transparent 50%);
}

/* ---------- eyebrow / shared ---------- */
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--beacon); margin:0 0 18px;
}
.section-lead{color:var(--mute); font-size:19px; max-width:56ch; margin:18px 0 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--beacon); color:#04201e; font-family:"Space Grotesk",sans-serif;
  font-weight:600; font-size:15.5px; padding:14px 24px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  box-shadow:0 0 0 rgba(74,222,214,0);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(74,222,214,.45)}
.btn-ghost{background:transparent; color:var(--halo); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--beacon); box-shadow:none}
.btn-sm{padding:9px 16px; font-size:14px}
.btn-wide{width:100%; justify-content:center; padding:16px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:16px clamp(18px,5vw,48px);
  background:rgba(10,14,26,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--halo)}
.brand-mark{color:var(--beacon); display:flex}
.brand-name{font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.02em; font-size:19px}
.brand-dot{color:var(--beacon)}
.nav-links{display:flex; gap:30px}
.nav-links a{color:var(--mute); font-size:15px; position:relative; transition:color .15s}
.nav-links a:hover{color:var(--halo)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--beacon); transition:width .2s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex; align-items:center; gap:18px}
.lang{display:flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:13px}
.lang-btn{background:none; border:none; color:var(--mute-2); cursor:pointer; padding:2px 2px; font:inherit; transition:color .15s}
.lang-btn[aria-pressed="true"]{color:var(--beacon)}
.lang-sep{color:var(--mute-2)}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px}
.burger span{width:22px; height:2px; background:var(--halo); transition:.2s}

.mobile-menu{display:none; flex-direction:column; gap:4px; padding:8px clamp(18px,5vw,48px) 20px;
  background:var(--ink-2); border-bottom:1px solid var(--line)}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a{padding:12px 0; color:var(--mute); border-bottom:1px solid var(--line)}

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:clamp(48px,9vw,110px) clamp(18px,5vw,48px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero h1{font-size:clamp(38px,5.4vw,68px); margin:0 0 22px; max-width:15ch}
.hero .lead{color:var(--mute); font-size:clamp(17px,1.6vw,20px); max-width:46ch; margin:0}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin:34px 0 44px}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:26px}
.hero-stats strong{display:block; font-family:"Space Grotesk",sans-serif; font-size:18px; color:var(--halo)}
.hero-stats span{font-size:13.5px; color:var(--mute-2)}

/* signature: skyline radar */
.skyline-wrap{position:relative; align-self:stretch; min-height:340px; display:flex; align-items:flex-end}
.radar{
  position:relative; width:100%; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,22,38,.6), rgba(10,14,26,.9));
  overflow:hidden; padding:22px 22px 0;
  box-shadow:inset 0 0 60px -20px rgba(74,222,214,.18);
}
.radar::before{ /* grid lines */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(124,137,168,.06) 1px, transparent 1px);
  background-size:100% 34px;
}
.skyline-svg{display:block; width:100%; height:auto; position:relative}
.sweep-g{transform-origin:240px 300px; animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:rotate(-42deg)} to{transform:rotate(42deg)}}
.beacon{fill:var(--beacon); filter:drop-shadow(0 0 6px rgba(74,222,214,.9)); animation:pulse 2.6s ease-in-out infinite}
.beacon.b2{animation-delay:.5s} .beacon.b3{animation-delay:1s} .beacon.b4{animation-delay:1.5s} .beacon.b5{animation-delay:2s}
@keyframes pulse{0%,100%{opacity:.35; r:3} 50%{opacity:1; r:4.5}}
.radar-readout{display:flex; align-items:center; gap:8px; padding:12px 4px 14px; font-size:12.5px; color:var(--beacon)}
.radar-readout .dot{width:8px; height:8px; border-radius:50%; background:var(--beacon); box-shadow:0 0 8px var(--beacon); animation:pulse 2s infinite}

/* ---------- sections ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,104px) clamp(18px,5vw,48px)}
.band{max-width:none; background:
    linear-gradient(180deg, rgba(20,29,49,.5), rgba(15,22,38,.25));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band > *{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.section-head h2{font-size:clamp(28px,3.6vw,42px); max-width:18ch}

/* ---------- services (interactive selector) ---------- */
.svc{display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; margin-top:44px; align-items:start}
.svc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.svc-item{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer;
  background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; color:var(--halo); font:inherit; transition:.2s var(--ease);
}
.svc-item:hover{border-color:rgba(74,222,214,.4); transform:translateX(3px)}
.svc-item .num{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--mute-2); min-width:24px}
.svc-item .txt{display:flex; flex-direction:column}
.svc-item .txt b{font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:16px}
.svc-item .txt small{color:var(--mute-2); font-size:12px; font-family:"IBM Plex Mono",monospace; letter-spacing:.04em; text-transform:uppercase}
.svc-item[aria-selected="true"]{
  border-color:var(--beacon); background:linear-gradient(90deg, rgba(74,222,214,.10), rgba(15,22,38,.4));
}
.svc-item[aria-selected="true"] .num{color:var(--beacon)}
.svc-item.is-alert[aria-selected="true"]{border-color:var(--alert); background:linear-gradient(90deg, rgba(255,122,102,.10), rgba(15,22,38,.4))}
.svc-item.is-alert[aria-selected="true"] .num{color:var(--alert)}

.svc-panel{
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; min-height:340px; position:relative; overflow:hidden;
}
.svc-panel::after{content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--beacon),var(--beacon-2))}
.svc-panel.is-alert::after{background:linear-gradient(90deg,var(--alert),#ffb199)}
.svc-panel .p-tag{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--beacon)}
.svc-panel.is-alert .p-tag{color:var(--alert)}
.svc-panel h3{font-size:26px; margin:12px 0 6px}
.svc-panel .p-short{color:var(--halo); font-size:18px; margin:0 0 18px; opacity:.9}
.svc-panel .p-body{color:var(--mute); margin:0 0 22px}
.svc-panel ul{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px}
.svc-panel ul li{position:relative; padding-left:26px; font-size:15px; color:var(--halo)}
.svc-panel ul li::before{content:""; position:absolute; left:0; top:8px; width:11px; height:11px;
  border:1.6px solid var(--beacon); border-radius:3px; transform:rotate(45deg)}
.svc-panel.is-alert ul li::before{border-color:var(--alert)}
.svc-panel .p-deliver{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:13px;
  color:var(--mute); border:1px dashed var(--line); border-radius:8px; padding:8px 14px}
.fade{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- approach steps ---------- */
.steps{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:none}
.steps li{position:relative; padding:26px 22px 26px 0}
.steps li:not(:last-child)::after{content:""; position:absolute; top:34px; right:14px; width:calc(100% - 44px); height:1px;
  background:linear-gradient(90deg,var(--beacon),transparent)}
.steps .s-n{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--beacon)}
.steps .s-dot{width:12px; height:12px; border-radius:50%; border:2px solid var(--beacon); background:var(--ink); margin:10px 0 16px}
.steps h3{font-size:18px; margin:0 0 8px}
.steps p{color:var(--mute); font-size:14.5px; margin:0}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
.about-grid h2{font-size:clamp(26px,3.2vw,38px); max-width:16ch; margin-bottom:22px}
.about-p{color:var(--mute); margin:0 0 18px; max-width:52ch}
.values{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.values li{background:var(--ink-2); border:1px solid var(--line); border-left:3px solid var(--beacon);
  border-radius:10px; padding:20px 22px}
.values h3{font-size:17px; margin:0 0 6px}
.values p{color:var(--mute); font-size:14.5px; margin:0}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.contact-intro h2{font-size:clamp(28px,3.6vw,42px); max-width:14ch}
.contact-details{margin:34px 0 0; display:grid; gap:18px}
.contact-details div{display:grid; grid-template-columns:130px 1fr; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.contact-details dt{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-2)}
.contact-details dd{margin:0; color:var(--halo); font-size:15px}
.contact-details a:hover{color:var(--beacon)}

.contact-form{background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius); padding:32px}
.field{margin-bottom:18px}
.field label{display:block; font-size:13.5px; color:var(--mute); margin-bottom:8px; font-family:"IBM Plex Mono",monospace; letter-spacing:.03em}
.field input, .field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:9px;
  color:var(--halo); font:inherit; font-weight:300; padding:13px 15px; transition:border-color .15s, box-shadow .15s;
}
.field textarea{resize:vertical; min-height:110px}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--beacon); box-shadow:0 0 0 3px rgba(74,222,214,.12)}
.field.invalid input, .field.invalid textarea{border-color:var(--alert)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--mute); margin:4px 0 20px; cursor:pointer}
.consent input{margin-top:3px; accent-color:var(--beacon); width:16px; height:16px; flex:none}
.form-status{margin:16px 0 0; font-size:14.5px; min-height:1.2em}
.form-status.ok{color:var(--beacon)} .form-status.bad{color:var(--alert)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); background:var(--ink-2)}
.footer-in{max-width:var(--maxw); margin:0 auto; padding:38px clamp(18px,5vw,48px);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.foot-brand p{color:var(--mute-2); font-size:14px; margin:6px 0 0}
.foot-meta{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.foot-meta a:hover{color:var(--beacon)}
.foot-meta .mono{color:var(--mute-2); font-size:12.5px}

/* ---------- privacy page ---------- */
.doc{max-width:760px; margin:0 auto; padding:clamp(48px,8vw,90px) clamp(18px,5vw,48px)}
.doc a.back{color:var(--beacon); font-family:"IBM Plex Mono",monospace; font-size:14px}
.doc h1{font-size:clamp(30px,4vw,44px); margin:22px 0 8px}
.doc .updated{color:var(--mute-2); font-family:"IBM Plex Mono",monospace; font-size:13px; margin-bottom:32px}
.doc .intro{color:var(--mute); font-size:18px; margin-bottom:34px}
.doc section{margin-bottom:28px}
.doc h2{font-size:20px; margin:0 0 10px}
.doc p{color:var(--mute); margin:0}
.doc .policy-links{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.doc .policy-links li{padding-left:22px; position:relative}
.doc .policy-links li::before{content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border:1.6px solid var(--beacon); border-radius:3px; transform:rotate(45deg)}
.doc .policy-links a{color:var(--beacon); word-break:break-word}
.doc .policy-links a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{grid-template-columns:1fr; gap:40px}
  .skyline-wrap{min-height:280px; order:-1}
  .svc{grid-template-columns:1fr}
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:36px}
  .steps{grid-template-columns:1fr 1fr; gap:10px}
  .steps li:not(:last-child)::after{display:none}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav .btn-sm{display:none}
  .burger{display:flex}
  .steps{grid-template-columns:1fr}
  .contact-details div{grid-template-columns:1fr; gap:4px}
  .foot-meta{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
  .sweep-g{transform:rotate(0deg)}
}