/* ============================================================
   HAMZIO — Homepage styles (index.html only)
   Depends on styles.css (shared design system).
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:184px; padding-bottom:120px; overflow:hidden; min-height:80vh; }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:1; }
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:block; }
.hero-copy{ max-width:640px; }
.hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 11px; border-radius:999px;
  background:var(--glass); border:1px solid var(--border); font-family:var(--font-mono); font-size:0.72rem; color:var(--text-2); letter-spacing:0.04em; }
.hero-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.7rem, 6vw, 4.7rem);
  line-height:1.02; letter-spacing:-0.035em; margin:26px 0 0; }
.hero h1 .grad{ background:linear-gradient(110deg, var(--cyan), var(--violet) 70%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub{ font-size:1.18rem; color:var(--text-2); margin-top:26px; max-width:520px; line-height:1.6; }
.hero-cta{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero-tags{ display:flex; gap:10px; margin-top:40px; flex-wrap:wrap; }
.hero-tags .tag{ font-family:var(--font-mono); font-size:0.74rem; color:var(--text-2); padding:7px 13px; border-radius:999px; border:1px solid var(--hairline); background:var(--glass); }
.hero-tags .tag span{ color:var(--cyan); }

/* hero visual — I/O console */
.io-panel{ padding:24px; border-radius:var(--radius-lg); }
.io-panel .io-head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-3); padding-bottom:16px; border-bottom:1px solid var(--hairline); }
.io-dots{ display:flex; gap:6px; }
.io-dots i{ width:9px; height:9px; border-radius:50%; background:var(--border-2); display:block; }
.io-dots i:first-child{ background:rgba(var(--cyan-rgb),0.6); }
.io-row{ display:flex; align-items:center; gap:14px; padding:15px 4px; }
.io-row + .io-row{ border-top:1px solid var(--hairline); }
.io-label{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; width:54px; flex:none; }
.io-label.in{ color:var(--text-3); } .io-label.out{ color:var(--cyan); }
.io-bar{ flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,0.05); overflow:hidden; position:relative; }
.io-bar i{ position:absolute; inset:0; width:0; border-radius:99px; background:linear-gradient(90deg, var(--cyan), var(--violet)); animation:fill 3.4s var(--ease) infinite; }
.io-bar.b2 i{ animation-delay:.4s; } .io-bar.b3 i{ animation-delay:.8s; }
@keyframes fill{ 0%{ width:0; } 45%{ width:var(--w,80%); } 80%{ width:var(--w,80%); } 100%{ width:0; } }
.io-core{ display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 0; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-2); }
.io-core .ring{ width:14px; height:14px; border-radius:50%; border:2px solid var(--cyan); border-top-color:transparent; animation:spin 1.1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.io-foot{ display:flex; gap:8px; padding-top:14px; flex-wrap:wrap; }
.io-chip{ font-family:var(--font-mono); font-size:0.66rem; padding:5px 10px; border-radius:8px; background:rgba(var(--cyan-rgb),0.08); border:1px solid rgba(var(--cyan-rgb),0.2); color:var(--cyan); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{ padding:46px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.trust-label{ text-align:center; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-3); margin-bottom:30px; }
.marquee{ display:flex; gap:64px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track{ display:flex; gap:64px; align-items:center; animation:scroll 26s linear infinite; flex:none; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.logo-ph{ display:flex; align-items:center; gap:10px; opacity:0.5; transition:opacity .3s; flex:none; }
.logo-ph:hover{ opacity:0.9; }
.logo-ph .lph-mark{ width:24px; height:24px; border-radius:6px; border:1px dashed var(--border-2); }
.logo-ph .lph-txt{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--text-2); letter-spacing:-0.01em; }

/* ============================================================
   SERVICES (homepage preview)
   ============================================================ */
.services{ padding:110px 0 90px; }
.svc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:56px; }
.svc-card{ padding:30px; border-radius:var(--radius); overflow:hidden; transition:transform .4s var(--ease), border-color .4s; grid-column:span 2; }
.svc-card:nth-child(1){ grid-column:span 3; } .svc-card:nth-child(2){ grid-column:span 3; }
.svc-card:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.svc-card .glow{ position:absolute; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, var(--glow-cyan), transparent 70%); top:-150px; right:-120px; opacity:0; transition:opacity .45s; pointer-events:none; filter:blur(20px); }
.svc-card:hover .glow{ opacity:0.5; }
.svc-card:nth-child(even) .glow{ background:radial-gradient(circle, var(--glow-violet), transparent 70%); }
.svc-ico{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--glass-2); border:1px solid var(--border); margin-bottom:22px; position:relative; }
.svc-ico svg{ width:24px; height:24px; }
.svc-num{ position:absolute; top:28px; right:30px; font-family:var(--font-mono); font-size:0.7rem; color:var(--text-3); }
.svc-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; letter-spacing:-0.02em; }
.svc-card p{ color:var(--text-2); font-size:0.96rem; margin-top:10px; max-width:42ch; }
.svc-meta{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.svc-meta span{ font-family:var(--font-mono); font-size:0.68rem; color:var(--text-3); padding:4px 9px; border-radius:7px; border:1px solid var(--hairline); }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products{ padding:90px 0; }
.prod-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.prod-card{ display:flex; flex-direction:column; padding:0; border-radius:var(--radius-lg); overflow:hidden; transition:transform .4s var(--ease), border-color .4s; }
.prod-card:hover{ transform:translateY(-5px); border-color:var(--border-2); }
.prod-card.live:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 70px -40px var(--glow-cyan); }
.prod-visual{ height:188px; position:relative; overflow:hidden; border-bottom:1px solid var(--hairline);
  background:linear-gradient(135deg, rgba(var(--cyan-rgb),0.10), rgba(var(--violet-rgb),0.08)); display:flex; align-items:center; justify-content:center; }
.prod-visual .pv-grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px); background-size:28px 28px; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%); mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%); }
.prod-visual .pv-icon{ position:relative; width:56px; height:56px; }
.prod-body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.prod-status{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; }
.prod-status .d{ width:7px; height:7px; border-radius:50%; }
.prod-status.live{ color:var(--mint); } .prod-status.live .d{ background:var(--mint); box-shadow:0 0 8px var(--mint); }
.prod-status.soon{ color:var(--text-3); } .prod-status.soon .d{ background:var(--text-3); }
.prod-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; letter-spacing:-0.02em; margin-top:14px; }
.prod-card p{ color:var(--text-2); font-size:0.95rem; margin-top:9px; flex:1; }
.prod-link{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-weight:600; font-size:0.92rem; color:var(--cyan); transition:gap .3s; }
.prod-card:hover .prod-link{ gap:12px; }
.prod-link.disabled{ color:var(--text-3); }

/* ============================================================
   WORK / CASE STUDIES
   ============================================================ */
.work{ padding:90px 0; }
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.case{ border-radius:var(--radius-lg); overflow:hidden; transition:transform .4s var(--ease), border-color .4s; }
.case:hover{ transform:translateY(-5px); border-color:var(--border-2); }
.case-img{ aspect-ratio:4/3; position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 12px, rgba(255,255,255,0.015) 12px 24px); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; }
.case-img .ph-tag{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-3); border:1px dashed var(--border-2); padding:7px 13px; border-radius:9px; background:rgba(6,8,16,0.4); }
.case-body{ padding:22px 24px 26px; }
.case-cat{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); }
.case-body h3{ font-family:var(--font-display); font-weight:600; font-size:1.22rem; letter-spacing:-0.02em; margin-top:12px; color:var(--text-2); }
.case-body .metric{ display:flex; gap:24px; margin-top:18px; }
.case-body .metric b{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--text); display:block; }
.case-body .metric span{ font-size:0.78rem; color:var(--text-3); }

/* ============================================================
   ABOUT / WHY
   ============================================================ */
.about{ padding:90px 0; }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-text h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4vw,3rem); line-height:1.08; letter-spacing:-0.03em; margin-top:18px; }
.about-text p{ color:var(--text-2); font-size:1.06rem; margin-top:22px; line-height:1.65; }
.about-values{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.value{ padding:24px; border-radius:var(--radius); }
.value .vn{ font-family:var(--font-mono); font-size:0.72rem; color:var(--cyan); }
.value h4{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin-top:14px; letter-spacing:-0.01em; }
.value p{ color:var(--text-2); font-size:0.9rem; margin-top:8px; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:64px; }
.stat{ text-align:center; padding:28px 16px; border-radius:var(--radius); }
.stat b{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,3.6vw,2.8rem); letter-spacing:-0.03em;
  background:linear-gradient(180deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; }
.stat span{ font-size:0.84rem; color:var(--text-2); margin-top:6px; display:block; }
.stat em{ font-style:normal; font-family:var(--font-mono); font-size:0.62rem; color:var(--text-3); display:block; margin-top:8px; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-section{ padding:90px 0; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.post{ border-radius:var(--radius-lg); overflow:hidden; transition:transform .4s var(--ease), border-color .4s; }
.post:hover{ transform:translateY(-5px); border-color:var(--border-2); }
.post-img{ aspect-ratio:16/10; position:relative; border-bottom:1px solid var(--hairline);
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 12px, rgba(255,255,255,0.015) 12px 24px);
  display:flex; align-items:center; justify-content:center; }
.post-img .ph-tag{ font-family:var(--font-mono); font-size:0.68rem; color:var(--text-3); border:1px dashed var(--border-2); padding:6px 12px; border-radius:9px; background:rgba(6,8,16,0.4); }
.post-img .sched{ position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet); padding:5px 10px; border-radius:7px; background:rgba(var(--violet-rgb),0.1); border:1px solid rgba(var(--violet-rgb),0.25); }
.post-body{ padding:22px 24px 26px; }
.post-meta{ display:flex; gap:12px; font-family:var(--font-mono); font-size:0.68rem; color:var(--text-3); }
.post-meta .cat{ color:var(--cyan); }
.post-body h3{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; line-height:1.25; letter-spacing:-0.02em; margin-top:14px; color:var(--text-2); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{ padding:60px 0 110px; }
.cta-box{ position:relative; padding:clamp(40px,7vw,80px); border-radius:var(--radius-lg); overflow:hidden; text-align:center; }
.cta-box::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(700px 360px at 50% 0%, rgba(var(--cyan-rgb),0.18), transparent 65%),
             radial-gradient(600px 360px at 80% 120%, rgba(var(--violet-rgb),0.16), transparent 65%); }
.cta-box h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.04; letter-spacing:-0.035em; max-width:16ch; margin:0 auto; }
.cta-box p{ color:var(--text-2); font-size:1.1rem; margin:22px auto 0; max-width:50ch; }
.cta-actions{ display:flex; gap:14px; justify-content:center; margin-top:38px; flex-wrap:wrap; }
.cta-mail{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-family:var(--font-mono); font-size:0.85rem; color:var(--text-2); }
.cta-mail a{ color:var(--cyan); }

/* ============================================================
   RESPONSIVE (homepage)
   ============================================================ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .io-panel{ max-width:460px; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .svc-card,.svc-card:nth-child(1),.svc-card:nth-child(2){ grid-column:span 1; }
  .prod-grid,.work-grid,.blog-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:640px){
  .svc-grid,.prod-grid,.work-grid,.blog-grid,.about-values,.stats{ grid-template-columns:1fr; }
  .about-values{ gap:14px; }
  .prod-head{ align-items:flex-start; }
}