:root{
    --bg-deep:#0A0E16;
    --bg-surface:#10151F;
    --bg-surface-2:#171F2E;
    --bg-surface-3:#1E2738;
    --hairline: rgba(143,163,199,0.14);
    --hairline-strong: rgba(143,163,199,0.28);
    --text-primary:#EEF2F8;
    --text-secondary:#A9B4C7;
    --text-muted:#6B7690;
    --amber:#F2A93B;
    --amber-soft: rgba(242,169,59,0.12);
    --blue:#5B8DEF;
    --blue-soft: rgba(91,141,239,0.12);
    --mint:#3FD6B5;
    --danger:#E8615A;
    --radius-sm:6px;
    --radius-md:12px;
    --radius-lg:20px;
    --maxw:1240px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-deep);
    color:var(--text-primary);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(var(--hairline) 1px, transparent 1px),
      linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity:0.25;
    pointer-events:none;
    z-index:0;
    mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 30%, transparent 75%);
  }
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-0.01em; color:var(--text-primary);}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .mono{font-family:'JetBrains Mono', monospace;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1;}
  ::selection{background:var(--amber); color:#0A0E16;}

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--amber); outline-offset:3px; border-radius:4px;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--amber); display:flex; align-items:center; gap:10px;
    margin-bottom:16px;
  }
  .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px var(--amber-soft); flex-shrink:0;}

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 26px; border-radius:8px; font-weight:600; font-size:15px;
    border:1px solid transparent; cursor:pointer; transition:all .2s ease; white-space:nowrap;
    font-family:'Inter',sans-serif;
  }
  .btn-primary{ background:var(--amber); color:#1A1206; }
  .btn-primary:hover{ background:#FFC25E; transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--text-primary); border-color:var(--hairline-strong); }
  .btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
  .btn-sm{ padding:10px 18px; font-size:13px; }

  /* ===== Header (two bars) ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(10,14,22,0.92); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hairline);
  }
  .logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; flex-shrink:0; }
  .logo .mark{
    width:30px; height:30px; border-radius:7px;
    background: conic-gradient(from 220deg, var(--amber), var(--blue), var(--mint), var(--amber));
    position:relative; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .logo .mark::after{ content:""; width:13px; height:13px; background:var(--bg-deep); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

  /* -- Top bar: brand + utility actions -- */
  .topbar{ border-bottom:1px solid var(--hairline); }
  .topbar-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 32px; max-width:var(--maxw); margin:0 auto; gap:20px;
  }
  .topbar-actions{ display:flex; align-items:center; gap:22px; }
  .nav-phone{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:7px; white-space:nowrap; }
  .nav-phone .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(63,214,181,0.18); flex-shrink:0; }
  .topbar-link{ font-size:14px; color:var(--text-secondary); font-weight:500; transition:color .2s; white-space:nowrap; }
  .topbar-link:hover{ color:var(--text-primary); }
  .whatsapp-link{
    display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500;
    color:var(--mint); white-space:nowrap;
  }
  .whatsapp-link svg{ flex-shrink:0; }

  /* -- Second bar: focus-area navigation -- */
  .mainnav{ background:var(--bg-surface); }
  .mainnav-inner{
    display:flex; align-items:center; justify-content:center; gap:8px;
    max-width:var(--maxw); margin:0 auto; padding:0 32px;
  }
  .mainnav-link{
    font-size:14px; font-weight:500; color:var(--text-secondary);
    padding:14px 16px; display:flex; align-items:center; gap:6px;
    border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
    white-space:nowrap;
  }
  .mainnav-link:hover{ color:var(--text-primary); border-color:var(--amber); }
  .mainnav-item{ position:relative; }
  .mainnav-item .chev{ width:10px; height:10px; transition:transform .2s; opacity:0.7; }
  .mainnav-item:hover .chev, .mainnav-item:focus-within .chev{ transform:rotate(180deg); }
  .dropdown{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
    background:var(--bg-surface-2); border:1px solid var(--hairline-strong); border-radius:var(--radius-md);
    min-width:240px; padding:10px; box-shadow:0 20px 50px -20px rgba(0,0,0,0.6);
    opacity:0; visibility:hidden; transition:opacity .18s, transform .18s;
    z-index:60;
  }
  .mainnav-item:hover .dropdown, .mainnav-item:focus-within .dropdown{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  .dropdown a{
    display:block; padding:10px 12px; border-radius:7px; font-size:13.5px; color:var(--text-secondary);
  }
  .dropdown a:hover{ background:var(--bg-surface-3); color:var(--text-primary); }

  .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0; }
  .burger span{ width:22px; height:2px; background:var(--text-primary); display:block; transition:transform .2s, opacity .2s; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* -- Mobile drawer -- */
  .mobile-drawer{
    display:none; flex-direction:column; background:var(--bg-surface);
    border-top:1px solid var(--hairline); max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .mobile-drawer.open{ max-height:600px; }
  .mobile-drawer a{
    padding:15px 24px; font-size:15px; color:var(--text-secondary); border-bottom:1px solid var(--hairline);
  }
  .mobile-drawer a:hover{ color:var(--text-primary); }
  .mobile-drawer .drawer-label{
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted); letter-spacing:0.08em;
    text-transform:uppercase; padding:14px 24px 4px;
  }
  .mobile-drawer .drawer-cta{ padding:18px 24px; }

  /* ===== Hero ===== */
  .hero{ padding:88px 0 100px; position:relative; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center; }
  .hero h1{ font-size:54px; line-height:1.06; margin-bottom:22px; letter-spacing:-0.02em; }
  .hero h1 .hl{ color:var(--amber); }
  .hero p.lead{ font-size:18px; color:var(--text-secondary); max-width:480px; margin-bottom:34px; }
  .hero-ctas{ display:flex; gap:14px; margin-bottom:48px; flex-wrap:wrap; }

  .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--hairline); padding-top:28px; max-width:560px;}
  .stat{ padding-right:16px; }
  .stat .num{ font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; color:var(--text-primary); }
  .stat .num span{ color:var(--amber); }
  .stat .lbl{ font-size:12.5px; color:var(--text-muted); margin-top:4px; }

  /* Signature: SOC monitor panel */
  .soc-panel{
    background:linear-gradient(180deg, var(--bg-surface), var(--bg-surface-2));
    border:1px solid var(--hairline-strong);
    border-radius:var(--radius-lg);
    padding:0;
    overflow:hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
  }
  .soc-titlebar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--hairline); }
  .soc-titlebar .t{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); letter-spacing:0.06em; display:flex; align-items:center; gap:8px;}
  .soc-titlebar .live{ display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mint); }
  .soc-titlebar .live .dot{ width:6px;height:6px;border-radius:50%; background:var(--mint); animation:blink 1.6s infinite; }
  @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

  .radar-wrap{ position:relative; height:220px; border-bottom:1px solid var(--hairline); background:radial-gradient(circle at 50% 50%, rgba(91,141,239,0.08), transparent 70%); }
  .radar{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:190px; height:190px; }
  .radar svg{ width:100%; height:100%; }
  .radar-sweep{ transform-origin:95px 95px; animation:spin 4s linear infinite; }
  @keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  .radar-blip{ animation:pulse 2.4s ease-in-out infinite; }
  .radar-blip.b2{ animation-delay:0.8s; }
  .radar-blip.b3{ animation-delay:1.6s; }
  @keyframes pulse{ 0%{opacity:0.2; r:2;} 50%{opacity:1; r:4;} 100%{opacity:0.2; r:2;} }

  .soc-log{ padding:16px 18px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted); display:flex; flex-direction:column; gap:9px; }
  .soc-log .row{ display:flex; gap:10px; align-items:center; }
  .soc-log .tag{ padding:2px 7px; border-radius:4px; font-size:10px; font-weight:600; flex-shrink:0; }
  .tag-ok{ background:rgba(63,214,181,0.14); color:var(--mint); }
  .tag-info{ background:var(--blue-soft); color:var(--blue); }
  .tag-warn{ background:var(--amber-soft); color:var(--amber); }
  .soc-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hairline); }
  .soc-stats div{ padding:16px; border-right:1px solid var(--hairline); }
  .soc-stats div:last-child{ border-right:none; }
  .soc-stats .v{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; }
  .soc-stats .l{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }

  @media(prefers-reduced-motion: reduce){
    .radar-sweep, .radar-blip, .soc-titlebar .live .dot{ animation:none !important; }
  }

  /* ===== Trust strip ===== */
  .trust{ padding:30px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
  .trust-inner{ display:flex; align-items:center; gap:38px; flex-wrap:wrap; justify-content:space-between; }
  .trust-label{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; flex-shrink:0;}
  .trust-logos{ display:flex; gap:36px; flex-wrap:wrap; align-items:center; opacity:0.75; }
  .trust-logos span{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; color:var(--text-secondary); letter-spacing:0.02em;}

  /* ===== Section shared ===== */
  section{ padding:96px 0; position:relative; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:38px; line-height:1.15; margin-bottom:14px; }
  .section-head p{ color:var(--text-secondary); font-size:16.5px; }

  /* ===== Pillars — five focus areas, equal size ===== */
  .pillars{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
  .pillar{
    flex:1 1 340px; max-width:380px;
    background:var(--bg-surface);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:30px 26px;
    transition:border-color .25s, transform .25s, background .25s;
    display:flex; flex-direction:column;
  }
  .pillar:hover{ border-color:var(--hairline-strong); background:var(--bg-surface-2); transform:translateY(-3px); }
  .pillar .pid{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted); margin-bottom:18px; letter-spacing:0.06em; }
  .pillar .icon{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .pillar h3{ font-size:20px; margin-bottom:10px; }
  .pillar p{ color:var(--text-secondary); font-size:14.5px; margin-bottom:18px; flex-grow:1; }
  .pillar .taglist{ display:flex; flex-wrap:wrap; gap:8px; }
  .pillar .taglist span{ font-family:'JetBrains Mono',monospace; font-size:11px; padding:5px 10px; border-radius:5px; background:var(--bg-surface-3); color:var(--text-secondary); border:1px solid var(--hairline); }
  .pillar .more{ margin-top:20px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--text-primary); }
  .pillar .more svg{ width:14px; height:14px; transition:transform .2s; }
  .pillar:hover .more svg{ transform:translateX(3px); }

  .icon-amber{ background:var(--amber-soft); color:var(--amber); }
  .icon-blue{ background:var(--blue-soft); color:var(--blue); }
  .icon-mint{ background:rgba(63,214,181,0.12); color:var(--mint); }
  .icon-slate{ background:rgba(143,163,199,0.12); color:#A9B4C7; }

  /* ===== Full-stack services (equal billing, same card language) ===== */
  .secondary-section{ background:var(--bg-surface); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
  .secondary-grid{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
  .secondary-item{
    flex:1 1 320px; max-width:360px;
    background:var(--bg-surface-2);
    border:1px solid var(--hairline);
    border-radius:var(--radius-md);
    padding:26px 24px;
    display:flex; flex-direction:column; gap:14px;
    transition:border-color .25s, transform .25s, background .25s;
  }
  .secondary-item:hover{ border-color:var(--hairline-strong); background:var(--bg-surface-3); transform:translateY(-3px); }
  .secondary-item .icon{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
  .secondary-item h4{ font-size:16.5px; font-weight:600; }
  .secondary-item p{ color:var(--text-secondary); font-size:13.5px; flex-grow:1; }
  .secondary-item .more{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--text-primary); }
  .secondary-item .more svg{ width:13px; height:13px; transition:transform .2s; }
  .secondary-item:hover .more svg{ transform:translateX(3px); }

  /* ===== Why us ===== */
  .why-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
  .why-list{ display:flex; flex-direction:column; gap:0; }
  .why-row{ display:flex; gap:20px; padding:24px 0; border-top:1px solid var(--hairline); }
  .why-row:last-child{ border-bottom:1px solid var(--hairline); }
  .why-row .n{ font-family:'JetBrains Mono',monospace; color:var(--amber); font-size:13px; flex-shrink:0; padding-top:3px; }
  .why-row h4{ font-size:17px; margin-bottom:6px; }
  .why-row p{ color:var(--text-secondary); font-size:14.5px; }
  .why-visual{ background:var(--bg-surface); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:36px; }
  .why-visual .row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--hairline); }
  .why-visual .row:last-child{ border-bottom:none; }
  .why-visual .row .k{ font-size:14px; color:var(--text-secondary); }
  .why-visual .row .v{ font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--mint); font-weight:600; }

  /* ===== Process ===== */
  .process{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .process-step{ position:relative; padding:32px 26px; border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--bg-surface); }
  .process-step .pn{ font-family:'Space Grotesk',sans-serif; font-size:40px; font-weight:700; color:transparent; -webkit-text-stroke:1.5px var(--hairline-strong); margin-bottom:18px; }
  .process-step h4{ font-size:18px; margin-bottom:10px; }
  .process-step p{ color:var(--text-secondary); font-size:14.5px; }

  /* ===== Testimonials ===== */
  .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .testi-card{ background:var(--bg-surface); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:28px; display:flex; flex-direction:column; }
  .testi-card .stars{ color:var(--amber); font-size:13px; letter-spacing:2px; margin-bottom:16px; }
  .testi-card p{ color:var(--text-secondary); font-size:14.5px; flex-grow:1; margin-bottom:20px; }
  .testi-who{ display:flex; align-items:center; gap:12px; }
  .testi-avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--mint)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:#0A0E16; }
  .testi-who .name{ font-size:14px; font-weight:600; }
  .testi-who .role{ font-size:12.5px; color:var(--text-muted); }

  /* ===== CTA / Contact ===== */
  .contact-section{ background:var(--bg-surface); border-top:1px solid var(--hairline); }
  .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; }
  .contact-info h2{ font-size:34px; margin-bottom:16px; }
  .contact-info > p{ color:var(--text-secondary); margin-bottom:32px; }
  .contact-detail{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--hairline); }
  .contact-detail:last-of-type{ border-bottom:1px solid var(--hairline); }
  .contact-detail .ic{ width:36px; height:36px; border-radius:8px; background:var(--bg-surface-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--amber); }
  .contact-detail .k{ font-size:12px; color:var(--text-muted); margin-bottom:3px; }
  .contact-detail .v{ font-size:14.5px; font-weight:500; }
  .benefits{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
  .benefits span{ font-family:'JetBrains Mono',monospace; font-size:11.5px; padding:7px 12px; border:1px solid var(--hairline-strong); border-radius:20px; color:var(--text-secondary); }

  .form-card{ background:var(--bg-deep); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:36px; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
  .field.full{ grid-column:1/-1; }
  .field label{ font-size:12.5px; color:var(--text-muted); font-weight:500; }
  .field input, .field select, .field textarea{
    background:var(--bg-surface); border:1px solid var(--hairline-strong); border-radius:7px;
    padding:12px 14px; color:var(--text-primary); font-family:'Inter',sans-serif; font-size:14px;
  }
  .field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); outline:none; }
  .form-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:6px; }
  .form-note{ font-size:12px; color:var(--text-muted); max-width:340px; }

  /* ===== Footer ===== */
  footer{ padding:64px 0 28px; }
  .footer-top{ display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:40px; padding-bottom:48px; border-bottom:1px solid var(--hairline); }
  .footer-brand p{ color:var(--text-muted); font-size:14px; margin-top:14px; max-width:280px; }
  .footer-col h5{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px; }
  .footer-col a{ display:block; font-size:14px; color:var(--text-secondary); margin-bottom:12px; }
  .footer-col a:hover{ color:var(--text-primary); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:14px; }
  .footer-bottom p{ font-size:13px; color:var(--text-muted); }
  .social-row{ display:flex; gap:14px; }
  .social-row a{ width:34px; height:34px; border:1px solid var(--hairline-strong); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); }
  .social-row a:hover{ color:var(--amber); border-color:var(--amber); }

  /* ===== Reveal animation ===== */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media(prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ===== Responsive ===== */
  @media(max-width:980px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero h1{ font-size:40px; }
    .why-grid, .contact-grid{ grid-template-columns:1fr; }
    .process{ grid-template-columns:1fr; }
    .testi-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr 1fr; }

    /* collapse both nav bars into the burger drawer */
    .mainnav{ display:none; }
    .nav-phone, .topbar-link{ display:none; }
    .burger{ display:flex; }
    .mobile-drawer{ display:flex; }
  }
  @media(max-width:680px){
    .wrap{ padding:0 20px; }
    .topbar-inner, .mainnav-inner{ padding:0 20px; }
    .hero{ padding:48px 0 64px; }
    .hero h1{ font-size:32px; }
    .stat-row{ grid-template-columns:repeat(2,1fr); row-gap:20px; }
    .pillar, .secondary-item{ flex-basis:100%; max-width:100%; }
    .trust-inner{ flex-direction:column; align-items:flex-start; gap:16px; }
    .form-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr; }
    .section-head h2{ font-size:28px; }
    .whatsapp-link span.label{ display:none; }
  }

/* ═══════════════════════════════════════════════════
   ENHANCED CARD VISUALS — larger illustrated headers
   ═══════════════════════════════════════════════════ */

/* Pillar cards: remove old padding, let visual zone bleed edge-to-edge */
.pillar{ padding:0 !important; overflow:hidden; }

/* Visual header zone */
.card-visual{
  height:152px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--hairline);
  flex-shrink:0;
}
/* colour variants */
.cv-amber{ background:linear-gradient(145deg, rgba(242,169,59,0.13) 0%, var(--bg-surface-2) 75%); }
.cv-blue { background:linear-gradient(145deg, rgba(91,141,239,0.13) 0%, var(--bg-surface-2) 75%); }
.cv-mint { background:linear-gradient(145deg, rgba(63,214,181,0.13) 0%, var(--bg-surface-2) 75%); }
.cv-slate{ background:linear-gradient(145deg, rgba(143,163,199,0.10) 0%, var(--bg-surface-2) 75%); }

/* dot-grid texture */
.card-visual::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(143,163,199,0.13) 1px, transparent 1px);
  background-size:24px 24px;
}
/* decorative SVG layer */
.cv-deco{ position:absolute; inset:0; pointer-events:none; }

/* large icon with glow ring */
.cv-icon{
  width:80px; height:80px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; flex-shrink:0;
}
.ci-amber{
  background:rgba(242,169,59,0.20); color:var(--amber);
  box-shadow:0 0 0 16px rgba(242,169,59,0.07), 0 10px 40px rgba(242,169,59,0.22);
}
.ci-blue{
  background:rgba(91,141,239,0.20); color:var(--blue);
  box-shadow:0 0 0 16px rgba(91,141,239,0.07), 0 10px 40px rgba(91,141,239,0.22);
}
.ci-mint{
  background:rgba(63,214,181,0.20); color:var(--mint);
  box-shadow:0 0 0 16px rgba(63,214,181,0.07), 0 10px 40px rgba(63,214,181,0.22);
}
.ci-slate{
  background:rgba(143,163,199,0.14); color:var(--text-secondary);
  box-shadow:0 0 0 16px rgba(143,163,199,0.05);
}

/* card body below visual zone */
.card-body{ padding:24px 26px; display:flex; flex-direction:column; flex-grow:1; }
.card-body .pid{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted); margin-bottom:14px; letter-spacing:0.06em; }
.card-body h3{ font-size:20px; margin-bottom:10px; }
.card-body p{ color:var(--text-secondary); font-size:14.5px; margin-bottom:18px; flex-grow:1; }
.card-body .taglist{ display:flex; flex-wrap:wrap; gap:8px; }
.card-body .taglist span{ font-family:'JetBrains Mono',monospace; font-size:11px; padding:5px 10px; border-radius:5px; background:var(--bg-surface-3); color:var(--text-secondary); border:1px solid var(--hairline); }
.card-body .more{ margin-top:20px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--text-primary); }
.card-body .more svg{ width:14px; height:14px; transition:transform .2s; }
.pillar:hover .more svg{ transform:translateX(3px); }

/* Feature cards on inner pages */
.feature-card{ padding:0 !important; overflow:hidden; }
.feature-card .fc-visual{
  height:128px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--hairline);
}
.feature-card .fc-visual::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(143,163,199,0.12) 1px, transparent 1px);
  background-size:22px 22px;
}
.feature-card .fc-body{ padding:22px 22px; display:flex; flex-direction:column; flex-grow:1; }
.feature-card .fc-body h3{ font-size:17px; margin-bottom:8px; }
.feature-card .fc-body p{ color:var(--text-secondary); font-size:14px; flex-grow:1; }

/* Secondary service cards */
.secondary-item{ padding:0 !important; overflow:hidden; }
.secondary-item .si-visual{
  height:110px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--hairline);
}
.secondary-item .si-visual::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(143,163,199,0.10) 1px, transparent 1px);
  background-size:20px 20px;
}
.secondary-item .si-body{ padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.secondary-item .si-body h4{ font-size:15.5px; font-weight:600; }
.secondary-item .si-body p{ color:var(--text-secondary); font-size:13.5px; flex-grow:1; }
.secondary-item .si-body .more{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--text-primary); }
.secondary-item .si-body .more svg{ width:13px; height:13px; transition:transform .2s; }
.secondary-item:hover .more svg{ transform:translateX(3px); }