/* ───────────────────── RESET & VARIABLES ───────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:   #041F3C;
      --navy2:  #2A3D61;
      --gold:   #C0A067;
      --gold2:  #e8c56d;
      --light:  #f5f7fa;
      --white:  #ffffff;
      --gray:   #8a9bb5;
      --black: #000000;
      --text:   #c8d6e8;
      --radius: 14px;
      --shadow: 0 8px 40px rgba(0,0,0,.35);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--navy);
      color: var(--text);
      overflow-x: hidden;
    }

    /* ───────────────────── UTILITY ───────────────────── */
    .container { width: min(1140px, 92%); margin-inline: auto; }
    .section    { padding: 90px 0; }
    .tag        { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);}
    .h2         { font-family: 'Playfair Display', serif; font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--black); line-height: 1.2;}
    .h3         { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--white); }
    .body-text  { font-size: .95rem; line-height: 1.75; color: var(--text); text-align: justify;}
    .btn-primary {
      display: inline-block; padding: .75rem 2rem;
      background: var(--gold); color: var(--navy); font-weight: 600;
      font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
      border: none; border-radius: 4px; cursor: pointer; text-decoration: none;
      transition: background .25s, transform .2s;
    }
    .btn-primary:hover { background: var(--gold2); transform: translateY(-2px); }
    .logo_nav { max-width: 150px;}

    /* ───────────────────── NAVBAR ───────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      background: rgba(13,27,46,.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(201,168,76,.15);
      height: 98px; display: flex; align-items: center;
    }
    .nav-inner {
      width: min(1140px, 92%); margin-inline: auto;
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
    .nav-links a {
      text-decoration: none; color: var(--text); font-size: .88rem;
      transition: color .2s; position: relative;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
      height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { transform: scaleX(1); }

    .nav-right { display: flex; align-items: center; gap: 1rem; }

    /* Language toggle */
    .lang-toggle {
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(201,168,76,.25);
      border-radius: 100px; padding: 4px 6px; cursor: pointer;
    }
    .lang-btn {
      padding: 3px 10px; border-radius: 100px; font-size: .75rem;
      font-weight: 600; letter-spacing: .05em; border: none; cursor: pointer;
      transition: background .2s, color .2s;
    }
    .lang-btn.active { background: var(--gold); color: var(--navy); }
    .lang-btn:not(.active) { background: transparent; color: var(--gray); }

    /* Hamburger */
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
    .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: .3s; }

    /* Mobile nav */
    .mobile-nav {
      display: none; position: fixed; inset: 68px 0 0 0; background: rgba(13,27,46,.97);
      backdrop-filter: blur(16px); z-index: 999; flex-direction: column;
      align-items: center; justify-content: center; gap: 2.5rem;
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a { font-size: 1.4rem; color: var(--white); text-decoration: none; }

    @media(max-width:768px) {
      .nav-links, .nav-right .btn-primary { display: none; }
      .hamburger { display: flex; }
    }
    /* BANNER */
    .banner-image { width: 100%; height: 400px; object-fit: cover; }
    .banner-about { width: 100%; height: 400px; object-fit: cover; opacity: .40;}
    .banner{background-color: var(--black);}
     /* ───────────────────── HERO ───────────────────── */
    .hero {
      min-height: 100vh; display: flex; flex-direction: column;
      justify-content: center;
      position: relative; overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 70% 40%, rgba(201,168,76,.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 20% 80%, rgba(19,37,64,.9) 0%, transparent 60%),
        linear-gradient(160deg, #0a1520 0%, #0d1b2e 50%, #111f35 100%);
    }
    .hero-grid {
      position: absolute; inset: 0; opacity: .04;
      background-image:
        linear-gradient(rgba(201,168,76,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,1) 1px, transparent 1px);
      background-size: 60px 60px;
    }
    .hero-content {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1rem; align-items: center; padding: 1rem 0;
    }
    .hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
    .hero-eyebrow::before {
      content: ''; display: block; width: 32px; height: 2px; background: var(--gold);
    }
    .hero-title {
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      color: var(--white); line-height: 1.1; margin-bottom: 1.5rem;
      max-width: 600px;
    }
    .hero-title span { color: var(--gold); }
    .hero-desc { margin-bottom: 2.5rem; max-width: 600px; }
    .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
    .btn-outline {
      display: inline-block; padding: .75rem 2rem;
      background: transparent; color: var(--white);
      font-weight: 500; font-size: .85rem; letter-spacing: .08em;
      text-transform: uppercase; border: 1px solid rgba(255,255,255,.3);
      border-radius: 4px; cursor: pointer; text-decoration: none;
      transition: border-color .25s, color .25s;
    }
    .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

    .hero-image {
      position: relative; display: flex; align-items: center; justify-content: center;
    }
    .hero-card {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(201,168,76,.2);
      border-radius: var(--radius);
      padding: 2.5rem; width: 100%; max-width: 400px;
      backdrop-filter: blur(8px);
      animation: float 6s ease-in-out infinite;
    }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
    .hero-card-inner {
      background: rgba(255,255,255,.03);
      border: 1px dashed rgba(201,168,76,.3);
      border-radius: 8px; height: 350px;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-image-card{
        width: 100%; height: 350px; object-fit: cover; border-radius: 6px;
    }
    .hero-card-inner svg { width: 60px; opacity: .15; }
    .hero-dots {
      position: absolute; bottom: -20px; left: -20px;
      width: 100px; height: 100px; opacity: .2;
      background-image: radial-gradient(var(--gold) 1.5px, transparent 1.5px);
      background-size: 14px 14px;
    }

    @media(max-width:768px) {
      .hero-content { grid-template-columns: 1fr; gap: 3rem; }
      .hero-image { display: none; }
    }

    /* ───────────────────── WHY CHOOSE ───────────────────── */
    .why { background: var(--white); text-align: center; }
    .why .h2 { margin-bottom: 4rem; }
    .why .subtitle { margin-bottom: 3.5rem; max-width: 560px; margin-inline: auto; }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.5rem;
    }
    .tag_why{ margin-bottom: 30px; }
    .card {
      background: var(--navy);
      border: 1px solid rgba(201,168,76,.12);
      border-radius: var(--radius); padding: 2rem 1.5rem;
      transition: border-color .3s, transform .3s;
      text-align: center;
    }
    .card:hover { border-color: var(--gold); transform: translateY(-6px); }
    .card-icon {
      width: 56px; height: 56px; border-radius: 12px;
      background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.2);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem;
    }
    .card-icon img { width: 38px; stroke: var(--gold); fill: none; stroke-width: 1.8; }
    .card .h3 { margin-bottom: .75rem; font-size: 1.05rem; }
    .card .body-text { font-size: .88rem; }

    /* ───────────────────── PROCESS ───────────────────── */
    .process { background: var(--navy); }
    .process-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; align-items: start; }
    .process-left .h2  { margin-bottom: 1rem; color: var(--white);}
    .process-left .body-text { margin-bottom: 2rem; }
    .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .step {
      background: var(--navy2);
      border: 1px solid rgba(201,168,76,.1);
      border-radius: var(--radius); padding: 1.75rem;
      transition: border-color .3s;
    }
    .step:hover { border-color: var(--gold); }
    .step-num {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem; color: var(--white); font-weight: 700;
      line-height: 1; margin-bottom: .75rem;
    }
    .step .h3 { font-size: 1rem; margin-bottom: .6rem; }
    .step .body-text { font-size: .86rem; }

    @media(max-width:900px) {
      .process-inner { grid-template-columns: 1fr; }
    }
    @media(max-width:600px) {
      .steps { grid-template-columns: 1fr; }
    }

    /* ───────────────────── SERVICES ───────────────────── */
    .services { background: var(--white); }
    .services .h2 { text-align: center; margin-bottom: 3rem;}
    .services-sub { text-align: center; margin-bottom: 3.5rem; }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(240px, 1fr));
      gap: 3rem;
    }
    .services .tag { margin-bottom: 30px; }
    .services-grid a { display: block; text-decoration: none; color: inherit; }
    .service-item {
      background: var(--white);
      border: 2px solid rgba(201,168,76,.1);
      border-radius: var(--radius); padding: 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer; transition: border-color .25s, background .25s;
    }
    .services-grid a:hover .service-item { border-color: var(--gold); background: rgba(201,168,76,.04); }
    .service-item-left { display: flex; align-items: center; gap: 14px; }
    .service-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.2);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .service-icon img { width: 32px; stroke: var(--gold); fill: none; stroke-width: 1.8; }
    .service-name { font-size: .9rem; font-weight: 500; color: var(--black); }
    .arrow { color: var(--gold); font-size: 1.2rem; }

    /* ───────────────────── FOOTER ───────────────────── */
    #site-footer{
      background:#080f1a;border-top:1px solid var(--border);
      padding:2.5rem 0
    }
    .footer-inner{
      display:flex;flex-wrap:wrap;align-items:center;
      justify-content:space-between;gap:1.5rem
    }
    .footer-contact-items{
      display:flex;flex-wrap:wrap;gap:1.75rem;align-items:center
    }
    .fci{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
    .fci svg{width:16px;stroke:var(--gold);fill:none;stroke-width:1.8;flex-shrink:0}
    .fci a{color:var(--muted);transition:color .2s}
    .fci a:hover{color:var(--gold)}
    .footer-copy{
      width:100%;text-align:center;font-size:.76rem;
      color:var(--muted);padding-top:1.5rem;padding-bottom: 30px;
      border-top:1px solid rgba(255,255,255,.06);margin-top:.5rem
    }

    /* ───────────────────── SCROLL REVEAL ───────────────────── */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    /* ───────────────────── DIVIDER ───────────────────── */
    .gold-divider {
      width: 48px; height: 3px; background: var(--gold);
      margin-bottom: 1.5rem; border-radius: 2px;
    }

    /* ───────────────────── NAV CONTACT BUTTON ───────────────────── */
    .nav-contact {
      background: var(--gold); color: var(--navy);
      font-weight: 600; font-size: .8rem; letter-spacing: .06em;
      text-transform: uppercase; border: none; border-radius: 4px;
      padding: .55rem 1.2rem; cursor: pointer; text-decoration: none;
      transition: background .2s;
    }
    .nav-contact:hover { background: var(--gold2); }


    /* ═══════════════ PAGE: ABOUT ═══════════════ */
    /* About section */
    .about-section{padding:80px 0;background:var(--navy)}
    .about-grid{
      display:grid;grid-template-columns:1fr 1.5fr;gap:5rem;align-items:center
    }
    .logo-about{
      position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);
      height:250px;
    }
    .about-img-placeholder{
      aspect-ratio:4/5;border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      border:1px dashed var(--border);
      display:flex;align-items:center;justify-content:center
    }
    .about-img{
      width:100%;height:100%;object-fit:cover;border-radius:var(--radius);
      transition:transform .3s
    }
    .about-text .tag{margin-bottom:30px}
    .about-name{
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(1.8rem,3.5vw,2.8rem);
      color:var(--white);line-height:1.1;margin-bottom:30px
    }
    .about-name span{color:var(--gold)}
    .about-text .body{margin:1.5rem 0 2rem; text-align: justify;}
    @media(max-width:768px){
      .about-grid{grid-template-columns:1fr;gap:2.5rem}
    }
 
    /* Pillars section */
    .pillars{padding:80px 0;background:var(--white)}
    .pillars-head{text-align:center;margin-bottom:3.5rem}
    .pillars-head .h2{margin-top:.6rem}
    .pillars .tag{margin-bottom:30px}
    .pillars-grid{
      display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem
    }
    .pillar-card{
      background:var(--navy);border:1px solid var(--border);
      border-radius:var(--radius);padding:2rem;
      display:flex;gap:1.25rem;align-items:flex-start;
      transition:border-color .3s,transform .3s
    }
    .pillar-card .body{text-align: justify;}
    .pillar-card:hover{border-color:var(--gold);transform:translateY(-4px)}
    .pillar-icon{
      width:48px;height:48px;flex-shrink:0;border-radius:10px;
      background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.22);
      display:flex;align-items:center;justify-content:center
    }
    .pillar-icon img{width:32px;stroke:var(--gold);fill:none;stroke-width:1.8}
    .pillar-card .h3{margin-bottom:.5rem;font-size:1rem}
    .pillar-card .body{font-size:.87rem}
    @media(max-width:600px){
      .pillars-grid{grid-template-columns:1fr}
    }

    /* ═══════════════ PAGE: CONTACT ═══════════════ */
    .contact-section{padding:80px 0;background:var(--white)}
    .contact-grid{
      display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;align-items:start
    }
    /* Left info */
    .rv .tag{margin-bottom:20px}
    .rv .h2{margin-bottom:40px}
    .contact-rows{display:flex;flex-direction:column;gap:1.1rem}
    .contact-row{
      display:flex;align-items:center;gap:1rem;
      padding:.9rem 1.2rem;
      background:var(--white);border:1.5px solid var(--gold2);
      border-radius:10px;transition:border-color .25s;
      cursor:pointer
    }
    .contact-row:hover{border-color:var(--gold)}
    .crow-icon{
      width:38px;height:38px;flex-shrink:0;border-radius:8px;
      background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.2);
      display:flex;align-items:center;justify-content:center
    }
    .crow-icon svg{width:18px;stroke:var(--gold);fill:none;stroke-width:1.8}
    .contact-row a,.contact-row span{
      font-size:.88rem;color:var(--black);transition:color .2s
    }
    .contact-row a:hover{color:var(--gold)}
    /* Right form */
    .form-card{
      background:var(--navy);border:1px solid var(--border);
      border-radius:var(--radius);padding:2.5rem;
    }
    .form-card-title{
      font-family:'Cormorant Garamond',serif;
      font-size:1.7rem;color:var(--white);margin-bottom:1.75rem;text-align:center
    }
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
    .form-field{
      display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem
    }
    .form-field label{font-size:.75rem;color:var(--muted);letter-spacing:.05em}
    .form-field input,
    .form-field textarea{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.1);
      border-radius:6px;padding:.75rem 1rem;
      color:var(--white);font-family:'Outfit',sans-serif;font-size:.88rem;
      transition:border-color .2s;outline:none;width:100%;resize:none
    }
    .form-field input::placeholder,
    .form-field textarea::placeholder{color:var(--muted)}
    .form-field input:focus,
    .form-field textarea:focus{border-color:var(--gold)}
    .form-field textarea{height:110px}
    .btn-send{
      width:100%;padding:.85rem;background:var(--gold);
      color:var(--navy);font-family:'Outfit',sans-serif;font-weight:700;
      font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
      border:none;border-radius:6px;cursor:pointer;transition:.25s;margin-top:.5rem
    }
    .btn-send:hover{background:var(--gold2)}
    @media(max-width:768px){
      .contact-grid{grid-template-columns:1fr}
      .form-row{grid-template-columns:1fr}
    }
 
    /* Services strip (on contact page) */
    .services-strip{padding-bottom:100px;background:var(--white)}
    .services-strip-head{text-align:center;margin-bottom:3rem}
    .services-strip-head .tag{margin-bottom:.4rem}
    .services-strip-head .h2{margin-top:.4rem}
    .svc-cards{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1.2rem
    }
    .svc-cards a { display: block; text-decoration: none; color: inherit; }
    .svc-card{
      background:var(--navy);border:1px solid var(--border);
      border-radius:var(--radius);padding:2rem 1.25rem;
      text-align:center;cursor:pointer;
      transition:border-color .3s,transform .3s
    }
    .svc-cards a:hover .svc-card{border-color:var(--gold);transform:translateY(-6px)}
    .svc-card-icon{
      width:60px;height:60px;border-radius:50%;
      background:var(--white);border:2px solid rgba(201,168,76,.25);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 1.25rem
    }
    .svc-card-icon img{width:36px;stroke:var(--gold);fill:none;stroke-width:2.5}
    .svc-card .body{font-size:.85rem;font-weight:500;color:var(--white)}
    @media(max-width:768px){
      .svc-cards{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:480px){
      .svc-cards{grid-template-columns:1fr 1fr}
    }

    /* ═══════════════════════════════════════
       PAGE HERO  (services intro)
    ═══════════════════════════════════════ */
    .page-hero {
      padding-top: 80px; padding-bottom: 80px;
      position: relative; overflow: hidden;
      background-color: var(--white);
    }
    .page-hero-inner {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start;
    }
 
    /* Sidebar nav */
    .services-sidebar {
      display: flex; flex-direction: column; gap: .75rem;
    }
    .sidebar-link {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.35rem;
      background: var(--navy2);
      border: 1px solid rgba(201,168,76,.12);
      border-radius: var(--r); text-decoration: none;
      color: var(--white); font-size: .9rem; font-weight: 500;
      transition: background .25s, border-color .25s, transform .25s;
    }
    .sidebar-link:hover {
      background: rgba(201,168,76,.12);
      border-color: var(--gold);
      color: var(--black);
      transform: translateX(4px);
    }
    .sidebar-link.active {
      background: rgba(201,168,76,.08);
      border-color: rgba(201,168,76,.5);
    }
    .sidebar-link .arr { color: var(--gold); font-size: 1rem; transition: transform .25s; }
    .sidebar-link:hover .arr { transform: translateX(4px); }
    .sidebar-img {
      background: rgba(255,255,255,.03);
      border: 1px dashed rgba(201,168,76,.22);
      border-radius: var(--r); height: 200px;
      display: flex; align-items: center; justify-content: center;
      margin-top: .75rem;
    }
    .sidebar-img img {width: 448px; height: 200px; stroke: var(--gold); fill: none; }
 
    /* Hero right */
    .page-hero-right .tag { margin-bottom: 30px; }
    .page-hero-right .h2 { margin-bottom: 1.5rem; }
    .page-hero-right .body-text { margin-bottom: 0; color: var(--black);}
 
    @media(max-width: 820px) {
      .page-hero-inner { grid-template-columns: 1fr; }
      .sidebar-img { display: none; }
    }
 
    /* ═══════════════════════════════════════
       SERVICE SECTION TEMPLATE
    ═══════════════════════════════════════ */
    .svc-section { padding: 40px 0; }
    .svc-section.alt { background: var(--white); }
 
    .svc-header {
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center;
      margin-bottom: 3.5rem;
    }
    .svc-header.reversed { direction: rtl; }
    .svc-header.reversed > * { direction: ltr; }
 
    .svc-text .tag   { margin-bottom: .4rem; }
    .svc-text .gold-bar { margin-top: .6rem; }
    .svc-text .h3    { margin-bottom: 1.1rem; }
    .svc-text .body-text { font-size: .91rem; }
    .svc-text .secundario { color: var(--black); }
    .svc-text .legales {color: var(--black);}
    .svc-image-box {
      background: rgba(255,255,255,.03);
      border: 1px dashed var(--gold2);
      border-radius: var(--r); height: 280px;
      display: flex; align-items: center; justify-content: center;
    }
    .svc-image-box img { width: 512px; height: 279px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
 
    /* Sub-cards grid */
    .subcards {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    }
    .subcard {
      background: var(--navy);
      border: 1px solid var(--gold2);
      border-radius: var(--r); padding: 1.4rem 1.25rem;
      transition: border-color .28s, transform .28s;
    }
    .svc-section.alt .subcard { background: var(--navy3); }
    .subcard:hover { border-color: var(--gold); transform: translateY(-5px); }
    .subcard-title {
      font-size: .88rem; font-weight: 600; color: var(--white);
      margin-bottom: .5rem; display: flex; align-items: center; gap: 8px;
    }
    .subcard-title::before {
      content: ''; display: inline-block; width: 6px; height: 6px;
      background: var(--gold); border-radius: 50%; flex-shrink: 0;
    }
    .subcard .body-text { font-size: .83rem; line-height: 1.65; }
    .subcard .legales { color: var(--black);}
 
    @media(max-width: 900px) {
      .svc-header          { grid-template-columns: 1fr; gap: 2.5rem; }
      .svc-header.reversed { direction: ltr; }
      .subcards            { grid-template-columns: 1fr 1fr; }
    }
    @media(max-width: 580px) {
      .subcards { grid-template-columns: 1fr; }
    }
 
    /* ═══════════════════════════════════════
       REVEAL ANIMATION
    ═══════════════════════════════════════ */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
    .reveal.in { opacity: 1; transform: none; }