/* ========= ALLXTECHH — Global Styles ========= */

/* Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* CSS variables */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --muted-2:#64748b;
  --line:#e5e7eb;
  --brand:#2563eb;
  --brand-2:#60a5fa;
  --radius:16px;
  --shadow:0 8px 24px rgba(15,23,42,.06);
}

/* Base typography */
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin: 0 0 .8rem; }

/* Layout helpers */
.container{ max-width:1100px; margin:0 auto; padding:0 18px; }
section{ padding:28px 0; }
.soft{ background:#f1f5f9; }

/* Headings */
h1,h2,h3,h4{ margin:0 0 8px; line-height:1.15; color:var(--text); }
h1{ font-size:clamp(28px,4.2vw,44px); font-weight:700; }
h2{ font-size:clamp(22px,3vw,28px); font-weight:700; }
h3{ font-size:18px; font-weight:600; }
.sub{ color:var(--muted); }
.mini-text{ font-size:.9rem; color:var(--muted-2); }
.notice{ font-size:.95rem; color:var(--muted); }

/* ================= Header (logo + responsive nav) ================= */
.allx-nav{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
}
.allx-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
}
.allx-brand img{ display:block; max-width:100%; height:auto; max-height:64px; }

.allx-menu{ display:flex; gap:14px; align-items:center; }
.allx-menu a{
  font-weight:600; color:#0f172a; text-decoration:none;
  padding:.44rem .66rem; border-radius:999px;
}
.allx-menu a:hover{ background:#f1f5f9; }
.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:#0f172a;
  padding:.6rem 1rem; border-radius:999px; font-weight:600; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.btn.primary{ border-color:transparent; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; }
.btn.ghost{ background:transparent; }

/* Burger */
.allx-burger{
  display:none; position:relative; width:40px; height:40px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
.allx-burger span{
  position:absolute; left:9px; right:9px; height:2px; background:#0f172a; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.allx-burger span:nth-child(1){ top:12px; }
.allx-burger span:nth-child(2){ top:19px; }
.allx-burger span:nth-child(3){ top:26px; }
.allx-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.allx-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.allx-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
@media (max-width:900px){
  .allx-burger{ display:block; }
  .allx-menu{
    position:fixed; inset:auto 0 0 0; transform:translateY(100%);
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -12px 24px rgba(2,8,23,.08);
    padding:12px; display:grid; gap:8px; grid-auto-rows:min-content;
    transition:transform .2s ease;
  }
  .allx-menu.open{ transform:translateY(0); }
  .nav-open{ overflow:hidden; } /* prevent body scroll when menu is open */
}

/* ================= Hero ================= */
.hero{ padding:64px 0 40px; }
.hero--rich{
  background:
    radial-gradient(150% 120% at 0% 0%, #eef2ff 0%, #ffffff 55%),
    linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border-bottom:1px solid var(--line);
}
.hero--about{
  background:
    radial-gradient(120% 100% at 100% 0%, #f0f9ff 0%, #ffffff 55%),
    linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border-bottom:1px solid var(--line);
}
.eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-weight:600; font-size:.85rem; color:#334155; margin-bottom:6px; }
.hero-title .accent{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ max-width:720px; margin:.4rem auto 1rem; color:#334155; text-wrap:balance; }
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.trust{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.trust .item{ display:flex; align-items:center; gap:8px; padding:.4rem .7rem; background:#fff; border:1px solid var(--line); border-radius:999px; }
.icon{ width:18px; height:18px; }

/* ================= Grids & Cards ================= */
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.hoverable{ transition:transform .2s ease, box-shadow .2s ease; }
.hoverable:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(2,8,23,.10); }

.section-head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:10px; }
.title-underline{ position:relative; padding-bottom:6px; }
.title-underline:after{
  content:""; position:absolute; left:0; bottom:0; width:44px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* Image tiles (1:1) */
.square{
  aspect-ratio:1/1; background:#f1f5f9; border:1px dashed #e2e8f0; border-radius:12px;
  display:grid; place-items:center; overflow:hidden;
}
.square img{ width:100%; height:100%; object-fit:contain; }

/* Picks on home */
.pick{ padding:14px; }
.pick-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }

/* Newsletter / CTA strip */
.newsletter{ padding:16px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.news-text h3{ margin:0 0 4px; }
.news-form{ display:flex; gap:10px; align-items:center; }

/* Chips & small UI */
.chip{ display:inline-flex; align-items:center; border:1px solid var(--line); background:#fff; border-radius:999px; padding:.25rem .55rem; font-size:.9rem; margin-right:6px; }
.kpis.section{ margin-top:8px; }

/* ================= Product page ================= */
.product-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; }
@media (max-width:880px){ .product-grid{ grid-template-columns:1fr; } }

.heroimg{ border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.heroimg img{ width:100%; height:auto; }
.crumbs{ color:#64748b; font-size:.95rem; }
ul#pBullets{ color:#334155; }

/* Inputs */
.input{
  width:100%; padding:.65rem .85rem; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.input:focus{ outline:2px solid #dbeafe; border-color:#93c5fd; }

/* ================= About page extras ================= */
.about-card{ padding:16px; }
.about-icon{
  width:42px; height:42px; border-radius:12px; background:#eef2ff; color:var(--brand);
  display:grid; place-items:center; margin-bottom:8px;
}
.about-icon svg{ width:22px; height:22px; }

.steps{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; counter-reset:step;
}
.steps li{
  border:1px solid var(--line); background:#fff; border-radius:14px; padding:14px;
}
@media (max-width:880px){ .steps{ grid-template-columns:1fr; } }

.bars .bar{ border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff; }
.bar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#334155; }
.track{ height:8px; background:#eef2ff; border-radius:999px; overflow:hidden; }
.track i{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }

/* ================= Footer & disclosures ================= */
.footer{ border-top:1px solid var(--line); }
.footer .mini-text{ color:#64748b; }

.disclosure.card{
  padding:12px; border:1px solid var(--line); background:#fff; border-radius:12px;
}