:root {
  --navy: #09101f;
  --navy-2: #0f1729;
  --navy-3: #151f35;
  --paper: #f5f6f8;
  --white: #ffffff;
  --ink: #101725;
  --muted: #6d7688;
  --accent: #f6b93b;
  --accent-2: #ffd06a;
  --green: #22c76f;
  --line: rgba(255,255,255,.09);
  --line-dark: rgba(16,23,37,.10);
  --shadow: 0 24px 70px rgba(0,0,0,.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  color: var(--white);
  background: var(--navy);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }
.container { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }

/* HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 82px;
  display: flex;
  align-items: center;
  transition: .25s ease;
}
.site-header.scrolled {
  background: rgba(9,16,31,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.035);
}
.brand-logo svg { width: 27px; height: 27px; }
.brand-logo path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-copy strong { display:block; font-size: 17px; letter-spacing: .08em; line-height:1; }
.brand-copy small { display:block; margin-top:6px; font-size:8px; letter-spacing:.30em; color:#95a0b5; }
.main-nav { display:flex; align-items:center; gap:30px; }
.main-nav > a:not(.nav-cta) { font-size:13px; font-weight:700; color:#c6cedd; transition:.2s ease; }
.main-nav > a:not(.nav-cta):hover { color:#fff; }
.nav-cta {
  padding: 12px 17px; border-radius: 12px; background: var(--accent); color:#151a24;
  font-size:12px; font-weight:800; box-shadow:0 10px 26px rgba(246,185,59,.15);
}
.menu-toggle { display:none; border:0; background:transparent; padding:9px 0 9px 10px; }
.menu-toggle span { display:block; width:26px; height:2px; margin:5px 0; border-radius:99px; background:#fff; transition:.25s ease; }

/* HERO */
.hero {
  position: relative;
  min-height: 900px;
  padding: 150px 0 58px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 23%, rgba(246,185,59,.08), transparent 22%),
    linear-gradient(180deg, #09101f 0%, #0a1122 72%, #0b1325 100%);
}
.hero-grid-overlay {
  position:absolute; inset:0; z-index:-3; opacity:.52;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 70%, transparent 100%);
}
.hero-orbit {
  position:absolute; z-index:-2; width:620px; height:620px; border-radius:50%;
  border:1px solid rgba(255,255,255,.045); right:-175px; top:75px;
  box-shadow:0 0 0 72px rgba(255,255,255,.018), 0 0 0 144px rgba(255,255,255,.012);
}
.hero-inner { display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(420px,.98fr); gap:76px; align-items:center; position:relative; z-index:2; }
.hero-copy { min-width:0; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color:#a9b3c6; font-size:10px; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(246,185,59,.10); }
.eyebrow.dark { color:#6e7788; }
.hero h1 {
  margin: 24px 0 24px;
  max-width: 700px;
  font-size: clamp(52px, 4.4vw, 72px);
  line-height: 1.00;
  letter-spacing: -.055em;
  font-weight: 830;
}
.hero h1 em { color:var(--accent); font-style:normal; }
.hero-copy > p { max-width:650px; color:#a9b3c5; font-size:16px; line-height:1.8; margin:0 0 30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.btn { min-height:52px; padding:0 22px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:13px; font-weight:800; transition:.2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width:18px; height:18px; }
.btn svg path { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.btn-primary { background:var(--accent); color:#121722; box-shadow:0 14px 34px rgba(246,185,59,.15); }
.btn-primary:hover { background:var(--accent-2); }
.btn-secondary { border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.025); color:#fff; }
.btn-light { background:#fff; color:#111725; }
.hero-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; max-width:650px; margin-top:46px; padding-top:28px; border-top:1px solid rgba(255,255,255,.08); }
.hero-points div { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.hero-points b { font-size:10px; color:var(--accent); letter-spacing:.08em; padding-top:3px; }
.hero-points span { color:#7d899e; font-size:11px; line-height:1.45; }

.hero-visual { min-width:0; }
.visual-frame {
  position:relative; height:585px; border-radius:30px; overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 75% 15%, rgba(246,185,59,.16), transparent 28%),
    linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.016));
  box-shadow:0 35px 90px rgba(0,0,0,.24);
}
.visual-frame::before { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.055); border-radius:21px; }
.visual-topline { position:absolute; left:32px; right:32px; top:28px; display:flex; align-items:center; gap:10px; z-index:3; color:#d4dbea; font-size:9px; font-weight:800; letter-spacing:.14em; }
.visual-topline small { margin-left:auto; color:#68758b; font-size:8px; letter-spacing:.13em; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(34,199,111,.09); }
.blueprint { position:absolute; inset:72px 5px 35px; display:grid; place-items:center; }
.blueprint svg { width:94%; height:94%; }
.blueprint path { fill:none; stroke:rgba(223,230,241,.40); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.blueprint .bp-main { stroke:rgba(246,185,59,.56); }
.visual-badge { position:absolute; z-index:4; display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:15px; border:1px solid rgba(255,255,255,.10); background:rgba(9,16,31,.76); backdrop-filter:blur(13px); box-shadow:0 14px 35px rgba(0,0,0,.18); }
.badge-top { top:78px; left:26px; }
.badge-bottom { right:24px; bottom:28px; }
.badge-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent); }
.badge-icon svg { width:21px; height:21px; }
.badge-icon path { fill:none; stroke:#171b23; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.visual-badge small { display:block; color:#738096; font-size:8px; letter-spacing:.10em; margin-bottom:3px; }
.visual-badge strong { display:block; font-size:12px; color:#fff; }
.pulse { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 6px rgba(34,199,111,.10); }
.visual-monogram { position:absolute; right:20px; bottom:-42px; font-size:185px; line-height:1; font-weight:900; letter-spacing:-.09em; color:rgba(255,255,255,.027); }
.service-strip { position:relative; z-index:2; margin-top:64px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; color:#738096; font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.service-strip i { width:4px; height:4px; border-radius:50%; background:var(--accent); }

/* COMMON SECTIONS */
.section { padding:110px 0; }
.section-light { background:var(--paper); color:var(--ink); }
.about-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:95px; align-items:start; }
.section-intro h2, .section-head h2, .commitment-main h2, .contact-copy h2 { margin:18px 0 0; font-size:clamp(36px, 4vw, 56px); line-height:1.06; letter-spacing:-.045em; }
.about-content { color:#60697a; font-size:14px; }
.about-content .lead { color:#242d3c; font-size:16px; line-height:1.8; margin-top:0; }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
.feature-list div { padding:14px 15px; border:1px solid var(--line-dark); border-radius:14px; background:#fff; font-size:12px; color:#273041; }
.feature-list span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:8px; margin-right:8px; background:rgba(246,185,59,.16); color:#a46b00; }

.services { background:#0d1526; }
.section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.70fr); gap:80px; align-items:end; margin-bottom:48px; }
.section-head p { max-width:480px; margin:0; color:#8f9aaf; font-size:14px; line-height:1.8; }
.dark-head p { color:#687183; }
.services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { position:relative; min-height:305px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.008); transition:.22s ease; }
.service-card:hover { background:rgba(255,255,255,.032); }
.service-card.featured { background:var(--accent); color:#171d27; }
.service-card.featured:hover { background:var(--accent-2); }
.service-index { position:absolute; right:26px; top:24px; color:#59657a; font-size:10px; letter-spacing:.12em; }
.featured .service-index { color:rgba(0,0,0,.42); }
.service-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(255,255,255,.03); margin-bottom:50px; }
.featured .service-icon { border-color:rgba(0,0,0,.11); background:rgba(255,255,255,.26); }
.service-icon svg { width:24px; height:24px; }
.service-icon path { fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.service-card h3 { margin:0 0 11px; font-size:20px; }
.service-card p { max-width:290px; margin:0; color:#8c97aa; font-size:12px; line-height:1.75; }
.featured p { color:rgba(17,23,33,.68); }

.process-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.process-card { position:relative; min-height:220px; padding:28px 22px; border:1px solid var(--line-dark); border-radius:18px; background:#fff; box-shadow:0 14px 40px rgba(30,40,60,.035); }
.process-card span { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#101827; color:var(--accent); font-size:10px; font-weight:850; }
.process-card h3 { margin:38px 0 9px; font-size:18px; }
.process-card p { margin:0; color:#727b8c; font-size:11px; line-height:1.7; }

.commitment { background:#080e1a; }
.commitment-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:22px; }
.commitment-main { position:relative; min-height:560px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:46px; background:linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); }
.commitment-main h2 { max-width:650px; }
.commitment-main > p { max-width:560px; color:#95a0b4; font-size:13px; line-height:1.8; }
.architectural-shape { position:absolute; right:24px; bottom:0; width:42%; height:72%; }
.architectural-shape span { position:absolute; bottom:-20px; width:62px; border-radius:18px 18px 0 0; transform:skewX(-18deg); background:linear-gradient(to top, rgba(246,185,59,.88), rgba(246,185,59,.05)); border:1px solid rgba(246,185,59,.20); }
.architectural-shape span:nth-child(1) { right:22px; height:60%; }
.architectural-shape span:nth-child(2) { right:104px; height:84%; opacity:.55; }
.architectural-shape span:nth-child(3) { right:186px; height:44%; opacity:.24; }
.commitment-list { display:grid; gap:14px; }
.commitment-item { display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:start; min-height:170px; padding:28px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(255,255,255,.022); }
.commitment-item b { color:var(--accent); font-size:10px; letter-spacing:.12em; }
.commitment-item h3 { margin:0 0 8px; font-size:20px; }
.commitment-item p { margin:0; color:#8a96aa; font-size:11px; line-height:1.7; }

.contact-section { background:var(--paper); padding:0 0 100px; }
.contact-panel { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:60px; padding:58px; border-radius:30px; background:#111a2d; color:#fff; box-shadow:var(--shadow); }
.contact-copy p { max-width:600px; color:#a3aec2; font-size:13px; line-height:1.8; margin:18px 0 30px; }
.contact-details { display:grid; align-content:center; gap:13px; }
.contact-row { display:flex; align-items:flex-start; gap:15px; padding:17px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.025); transition:.2s ease; }
.contact-row:hover { transform:translateX(3px); background:rgba(255,255,255,.045); }
.contact-icon { flex:0 0 43px; width:43px; height:43px; display:grid; place-items:center; border-radius:13px; background:rgba(246,185,59,.12); }
.contact-icon svg { width:21px; height:21px; }
.contact-icon path, .contact-icon circle { fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-row small { display:block; color:#7b879b; font-size:8px; letter-spacing:.12em; margin-bottom:4px; }
.contact-row strong { display:block; font-size:12px; line-height:1.55; }

.site-footer { padding:48px 0; border-top:1px solid rgba(255,255,255,.06); background:#070c16; }
.footer-inner { display:grid; grid-template-columns:1fr auto auto; gap:45px; align-items:end; }
.footer-brand p { margin:16px 0 0; color:#667288; font-size:11px; }
.footer-links { display:flex; gap:18px; color:#8f9aaf; font-size:10px; }
.footer-copy { color:#596578; font-size:9px; text-align:right; }

.floating-wa { position:fixed; z-index:90; right:22px; bottom:22px; width:56px; height:56px; display:grid; place-items:center; border-radius:18px; background:#25D366; box-shadow:0 16px 36px rgba(37,211,102,.24); transition:.2s ease; }
.floating-wa:hover { transform:translateY(-3px) scale(1.03); }
.floating-wa svg { width:27px; height:27px; }
.floating-wa path { fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.10s; }

@media (max-width: 1080px) {
  .container { width:min(100% - 48px, 1240px); }
  .main-nav { gap:20px; }
  .hero { min-height:auto; padding-top:135px; }
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(380px,.85fr); gap:44px; }
  .hero h1 { font-size:clamp(48px,5vw,64px); }
  .visual-frame { height:520px; }
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .site-header { height:72px; }
  .container { width:min(100% - 36px, 1240px); }
  .menu-toggle { display:block; z-index:102; }
  .menu-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .main-nav {
    position:fixed; inset:0; z-index:101; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:26px;
    background:rgba(7,12,24,.985); opacity:0; visibility:hidden; transform:translateY(-8px); transition:.25s ease;
  }
  .main-nav.open { opacity:1; visibility:visible; transform:none; }
  .main-nav > a:not(.nav-cta) { font-size:20px; }
  .nav-cta { margin-top:6px; font-size:14px; padding:14px 20px; }

  .hero { padding:118px 0 44px; }
  .hero-inner { grid-template-columns:1fr; gap:48px; }
  .hero-copy { max-width:720px; }
  .hero h1 { max-width:730px; font-size:clamp(46px,8vw,66px); }
  .hero-visual { width:min(100%,640px); margin:0 auto; }
  .visual-frame { height:550px; }
  .service-strip { margin-top:50px; }

  .section { padding:88px 0; }
  .about-grid, .section-head, .commitment-grid, .contact-panel { grid-template-columns:1fr; gap:38px; }
  .section-head { align-items:start; }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .commitment-main { min-height:500px; }
  .commitment-list { grid-template-columns:1fr; }
  .contact-panel { padding:42px; }
  .footer-inner { grid-template-columns:1fr; align-items:start; gap:26px; }
  .footer-copy { text-align:left; }
}

@media (max-width: 600px) {
  .container { width:min(100% - 28px,1240px); }
  .brand-logo { width:39px; height:39px; border-radius:11px; }
  .brand-copy strong { font-size:15px; }
  .brand-copy small { font-size:7px; }

  .hero { padding-top:108px; }
  .hero h1 { font-size:clamp(40px,12.5vw,54px); line-height:1.02; margin-top:20px; }
  .hero-copy > p { font-size:14px; line-height:1.75; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .btn { width:100%; }
  .hero-points { grid-template-columns:1fr; gap:14px; padding-top:22px; margin-top:32px; }
  .hero-points div { display:grid; grid-template-columns:32px 1fr; }
  .hero-points span br { display:none; }

  .visual-frame { height:410px; border-radius:23px; }
  .visual-frame::before { inset:12px; border-radius:16px; }
  .visual-topline { left:20px; right:20px; top:20px; font-size:8px; }
  .visual-topline small { display:none; }
  .blueprint { inset:62px -5px 22px; }
  .badge-top { top:58px; left:16px; }
  .badge-bottom { right:16px; bottom:18px; }
  .visual-badge { padding:11px 12px; border-radius:13px; }
  .badge-icon { width:34px; height:34px; }
  .visual-monogram { font-size:118px; right:12px; bottom:-25px; }
  .service-strip { justify-content:flex-start; gap:10px 12px; font-size:8px; }

  .section { padding:72px 0; }
  .section-intro h2, .section-head h2, .commitment-main h2, .contact-copy h2 { font-size:36px; }
  .about-grid { gap:28px; }
  .feature-list { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .service-card { min-height:260px; padding:26px; }
  .service-icon { margin-bottom:34px; }
  .process-grid { grid-template-columns:1fr; }
  .process-card { min-height:auto; padding:24px; }
  .process-card h3 { margin-top:24px; }
  .commitment-main { min-height:470px; padding:28px; border-radius:22px; }
  .architectural-shape { width:65%; opacity:.72; }
  .commitment-item { min-height:auto; padding:24px; }
  .contact-section { padding-bottom:70px; }
  .contact-panel { padding:28px 22px; border-radius:22px; }
  .contact-row { padding:15px; }
  .contact-row strong { font-size:11px; }
  .footer-links { flex-wrap:wrap; }
  .floating-wa { width:52px; height:52px; right:15px; bottom:15px; border-radius:16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}