/* ============================================================
   Wearga — company home (home.css)
   ============================================================ */

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 80% 0%,#171535 0%,#0d0c20 45%,#070710 80%); }
#three-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-grid{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 80% at 50% 40%,transparent 45%,rgba(7,7,16,.85) 100%); }
.hero .wrap{ position:relative; z-index:2; }
.hero-content{ max-width:620px; }
.hero h1{ margin:18px 0 0; font-family:'Sora','Oswald',sans-serif; font-weight:800;
  font-size:clamp(40px,7.5vw,82px); line-height:1.02; letter-spacing:-.02em; }
.hero h1 .grad{ background:linear-gradient(110deg,var(--accent),var(--accent2),var(--accent));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s linear infinite; }
.hero p.lead{ color:#c7cbe0; font-size:clamp(16px,2.2vw,20px); max-width:540px; margin:22px 0 32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:30px; margin-top:46px; flex-wrap:wrap; }
.hero-meta .m b{ font-family:'Sora',sans-serif; font-size:30px; display:block;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-meta .m span{ color:var(--muted); font-size:13px; letter-spacing:.04em; }
.scroll-cue{ position:absolute; left:50%; bottom:24px; z-index:2; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted);
  animation:cuebounce 2s ease-in-out infinite; font-size:11px; letter-spacing:.16em; }

/* ---------- SECTION SHELLS ---------- */
.s{ padding:clamp(70px,10vw,120px) 0; }
.s.alt{ background:radial-gradient(120% 80% at 50% 0%,var(--bg2) 0%,var(--bg) 65%); }

/* ---------- WHAT WE DO (services) ---------- */
.services{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.service{ background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.15));
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; transition:.3s; }
.service:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
  box-shadow:0 20px 50px rgba(0,0,0,.5); }
.service .ico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent2) 30%,transparent));
  color:var(--accent2); }
.service h3{ margin:0 0 8px; font-family:'Sora',sans-serif; font-size:20px; }
.service p{ margin:0; color:var(--muted); font-size:15px; }

/* ---------- PRODUCTS ---------- */
.products{ display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.product{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.18));
  border:1px solid var(--line); border-radius:22px; padding:36px 24px 28px; overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s; }
.product::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s; pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 60%); }
.product:hover{ transform:translateY(-10px); border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
  box-shadow:0 30px 64px rgba(0,0,0,.55),0 0 44px color-mix(in srgb,var(--accent) 18%,transparent); }
.product:hover::before{ opacity:1; }
.product .watch{ margin-bottom:22px; }
.product .chip{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent2); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); padding:5px 12px; border-radius:999px; }
.product h3{ margin:12px 0 6px; font-family:'Sora',sans-serif; font-size:24px; }
.product p{ margin:0 0 18px; color:var(--muted); font-size:14.5px; max-width:300px; }
.product .open{ margin-top:auto; font-weight:700; color:var(--accent2); display:inline-flex; align-items:center; gap:7px; }
.product .open svg{ transition:transform .2s; }
.product:hover .open svg{ transform:translateX(4px); }

/* ---------- CONTACT / CTA ---------- */
.cta-band{ text-align:center; background:radial-gradient(120% 120% at 50% 0%,#171535 0%,#0b0a1c 60%,#070710 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cta-band h2{ font-family:'Sora',sans-serif; font-size:clamp(30px,5.4vw,50px); margin:0 0 14px; }
.cta-band p{ color:var(--muted); max-width:520px; margin:0 auto 28px; font-size:17px; }