/* ============================================================
   HAMZIO — Shared Design System
   Loaded by every page. Page-specific styles live in their
   own stylesheet (home.css, services.css, …).
   Dark · glassy/frosted · neon-cyber glow · input→output motif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- surfaces (deep cool charcoal/navy) --- */
  --bg:        #060810;
  --bg-2:      #0a0d18;
  --bg-3:      #0e1220;

  /* --- glass --- */
  --glass:        rgba(255,255,255,0.035);
  --glass-2:      rgba(255,255,255,0.06);
  --glass-strong: rgba(18,22,38,0.55);
  --border:       rgba(255,255,255,0.09);
  --border-2:     rgba(255,255,255,0.14);
  --hairline:     rgba(255,255,255,0.06);

  /* --- text --- */
  --text:    #eef1f8;
  --text-2:  #aab2c6;
  --text-3:  #6b7388;

  /* --- accents (electric cyan + violet) --- */
  --cyan:    oklch(0.82 0.13 215);
  --cyan-2:  oklch(0.72 0.14 225);
  --violet:  oklch(0.72 0.16 295);
  --mint:    oklch(0.84 0.15 165);
  --cyan-rgb: 92, 214, 255;
  --violet-rgb: 168, 139, 255;

  --glow-cyan:   rgba(var(--cyan-rgb), 0.45);
  --glow-violet: rgba(var(--violet-rgb), 0.40);

  /* --- type --- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- layout --- */
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:rgba(var(--cyan-rgb),0.3); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---- global ambient background ---- */
.bg-field{ position:fixed; inset:0; z-index:-2; background:
  radial-gradient(1100px 700px at 78% -8%, rgba(var(--violet-rgb),0.16), transparent 60%),
  radial-gradient(1000px 800px at 8% 4%, rgba(var(--cyan-rgb),0.13), transparent 58%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
}
.bg-grid{ position:fixed; inset:0; z-index:-2; opacity:0.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}
.bg-grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- shared layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }
.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--cyan);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:linear-gradient(90deg, var(--cyan), transparent); }
.section-head{ max-width:680px; }
.section-head h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem, 4.4vw, 3.25rem); line-height:1.05;
  letter-spacing:-0.03em; margin:18px 0 0;
}
.section-head p{ color:var(--text-2); font-size:1.05rem; margin-top:18px; max-width:560px; }
.muted{ color:var(--text-2); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px;
  border-radius:999px; font-weight:600; font-size:0.95rem; letter-spacing:-0.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s; white-space:nowrap; }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn-primary{ color:#04111a; position:relative;
  background:linear-gradient(180deg, var(--cyan) 0%, var(--cyan-2) 100%);
  box-shadow:0 0 0 1px rgba(var(--cyan-rgb),0.4), 0 12px 40px -12px var(--glow-cyan); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(var(--cyan-rgb),0.6), 0 18px 50px -12px var(--glow-cyan); }
.btn-ghost{ color:var(--text); background:var(--glass); border:1px solid var(--border-2); backdrop-filter:blur(12px); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(var(--cyan-rgb),0.4); background:var(--glass-2); }

/* ---- glass card primitive ---- */
.glass{ position:relative; background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 60px -40px rgba(0,0,0,0.9); }

/* ============================================================
   NAV (shared)
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(8,10,18,0.62); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--hairline); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:1.2rem; letter-spacing:-0.02em; }
.brand .mark{ width:30px; height:30px; flex:none; }
.brand b{ font-weight:600; }
.brand .io{ color:var(--cyan); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:0.92rem; color:var(--text-2); font-weight:500; transition:color .25s; position:relative; }
.nav-links a:hover,.nav-links a.active{ color:var(--text); }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--cyan); transition:width .3s var(--ease); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.menu-btn{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:var(--glass); align-items:center; justify-content:center; }
.menu-btn span{ display:block; width:18px; height:1.5px; background:var(--text); position:relative; transition:.3s; }
.menu-btn span::before,.menu-btn span::after{ content:''; position:absolute; left:0; width:18px; height:1.5px; background:var(--text); transition:.3s; }
.menu-btn span::before{ top:-6px; } .menu-btn span::after{ top:6px; }
.menu-btn.open span{ background:transparent; }
.menu-btn.open span::before{ top:0; transform:rotate(45deg); }
.menu-btn.open span::after{ top:0; transform:rotate(-45deg); }

/* ============================================================
   FOOTER (shared)
   ============================================================ */
.footer{ border-top:1px solid var(--hairline); padding:64px 0 40px; margin-top:40px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.foot-brand .brand{ margin-bottom:18px; }
.foot-brand p{ color:var(--text-2); font-size:0.92rem; max-width:32ch; }
.foot-social{ display:flex; gap:10px; margin-top:22px; }
.foot-social a{ width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--glass); display:flex; align-items:center; justify-content:center; transition:.3s; }
.foot-social a:hover{ border-color:rgba(var(--cyan-rgb),0.4); color:var(--cyan); }
.foot-col h5{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:18px; }
.foot-col a{ display:block; color:var(--text-2); font-size:0.92rem; padding:6px 0; transition:color .25s; }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:54px; padding-top:26px; border-top:1px solid var(--hairline); font-size:0.82rem; color:var(--text-3); flex-wrap:wrap; }
.foot-bottom .mono{ font-family:var(--font-mono); }

/* ============================================================
   REVEAL ANIMATION (shared)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ============================================================
   RESPONSIVE (shared chrome)
   ============================================================ */
@media (max-width:980px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:640px){
  .nav-links{ position:fixed; inset:74px 0 auto; flex-direction:column; gap:0; padding:14px var(--pad) 26px;
    background:rgba(8,10,18,0.95); backdrop-filter:blur(20px); border-bottom:1px solid var(--hairline);
    transform:translateY(-130%); transition:transform .4s var(--ease); align-items:stretch; }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:15px 0; border-bottom:1px solid var(--hairline); font-size:1rem; }
  .nav-links a::after{ display:none; }
  .menu-btn{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
  .foot-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } }

/* ============================================================
   INNER-PAGE SHARED COMPONENTS
   (services / products / blog detail + list pages)
   ============================================================ */

/* breadcrumb */
.breadcrumb{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:0.74rem; color:var(--text-3); flex-wrap:wrap; }
.breadcrumb a{ color:var(--text-3); transition:color .25s; }
.breadcrumb a:hover{ color:var(--cyan); }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb .here{ color:var(--text-2); }

/* inner-page hero */
.page-hero{ padding-top:140px; padding-bottom:54px; position:relative; }
.page-hero::after{ content:''; position:absolute; left:50%; top:90px; width:760px; height:380px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(var(--cyan-rgb),0.12), transparent 65%); pointer-events:none; z-index:-1; filter:blur(10px); }
.page-hero .ph-inner{ max-width:780px; }
.page-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,5.4vw,4rem); line-height:1.04; letter-spacing:-0.035em; margin:22px 0 0; }
.page-hero h1 .grad{ background:linear-gradient(110deg, var(--cyan), var(--violet) 70%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.page-hero .lead{ font-size:1.16rem; color:var(--text-2); margin-top:22px; max-width:62ch; line-height:1.62; }
.page-hero .ph-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; align-items:center; }

/* generic content prose (SEO copy blocks) */
.prose p{ color:var(--text-2); font-size:1.05rem; line-height:1.7; margin-top:18px; max-width:68ch; }
.prose p:first-child{ margin-top:0; }
.prose strong{ color:var(--text); font-weight:600; }

/* FAQ accordion */
.faq-list{ margin-top:40px; max-width:820px; }
.faq-item{ border:1px solid var(--border); border-radius:var(--radius); background:var(--glass); margin-bottom:12px; overflow:hidden; transition:border-color .3s; }
.faq-item[open]{ border-color:var(--border-2); }
.faq-item summary{ list-style:none; cursor:pointer; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:-0.015em; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q-ico{ width:24px; height:24px; flex:none; position:relative; }
.faq-item summary .q-ico::before,.faq-item summary .q-ico::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--cyan); transition:transform .3s var(--ease); }
.faq-item summary .q-ico::before{ width:13px; height:1.6px; }
.faq-item summary .q-ico::after{ width:1.6px; height:13px; }
.faq-item[open] summary .q-ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-item .faq-a{ padding:0 26px 24px; color:var(--text-2); font-size:1rem; line-height:1.65; max-width:64ch; }

/* page-level section rhythm */
.page-section{ padding:64px 0; }
.page-section.tight{ padding:44px 0; }
.page-section + .page-section{ border-top:1px solid var(--hairline); }