/* Hispania Legacy — styles.css */

:root {
      --bg:          #121d23;
      --bg-deep:     #0c1519;
      --bg-mid:      #1a2830;
      --gold:        #c8a96e;
      --gold-dim:    #9a8060;
      --gold-line:   rgba(200,169,110,0.25);
      --blood:       #8b1a14;
      --blood-bright:#a93226;
      --white:       #f0ebe0;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: 'Roboto', sans-serif;
      overflow-x: hidden;
    }

    /* ── GRAIN OVERLAY ── */
    body::after {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 999; opacity: 0.4;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 56px;
      background: linear-gradient(to bottom, rgba(12,21,25,0.97), transparent);
      transition: border-color 0.3s, background 0.3s;
    }
    nav.scrolled { border-bottom: 1px solid var(--gold-line); background: rgba(12,21,25,0.97); }
    .nav-brand { display:flex; flex-direction:column; }
    .nav-logo { font-family:'Cinzel',serif; font-weight:700; font-size:13px; letter-spacing:.35em; color:var(--gold); display:block; }
    .nav-handle { font-family:'Roboto',sans-serif; font-size:11px; letter-spacing:.15em; color:var(--gold-dim); display:block; margin-top:2px; }
    .nav-links { display:flex; gap:36px; list-style:none; }
    .nav-links a { font-family:'Roboto',sans-serif; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold-dim); text-decoration:none; transition:color .2s; }
    .nav-links a:hover { color:var(--gold); }
    .hamburger { display:none; background:transparent; border:none; color:var(--gold); cursor:pointer; padding:8px; z-index:102; }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 700px;
      gap: 60px;
      align-items: center;
      padding: 120px 56px 80px;
      position: relative;
      overflow: hidden;
    }

    /* Blood diagonal slash */
    .hero-slash {
      position: absolute; top: -10%; right: -5%; width: 52%; height: 130%;
      background: linear-gradient(165deg, var(--blood) 0%, #3a0a08 100%);
      clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
      opacity: .15; pointer-events: none;
    }


    /* LEFT side */
    .hero-left {
      position: relative; z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      opacity: 0;
      animation: fadeUp .8s ease .2s forwards;
    }

    /* ── HERO LOGO ── */
    .hero-logo {
      width: 420px;
      max-width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 4px 32px rgba(200,169,110,0.22));
      margin-bottom: 20px;
    }

    .hero-eyebrow {
      font-family:'Roboto',sans-serif; font-size:10px; font-weight:700;
      letter-spacing:.45em; text-transform:uppercase; color:var(--gold-dim);
      margin-bottom:20px; display:flex; align-items:center; gap:12px; justify-content:center;
    }
    .hero-eyebrow::before { content:''; display:block; width:28px; height:1px; background:var(--gold-dim); }

    .hero-desc {
      font-family:'Roboto',sans-serif; font-weight:300; font-size:15px;
      line-height:1.9; color:rgba(240,235,224,.6);
      max-width:400px; margin-bottom:36px;
    }

    .hero-cta-group { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:32px; justify-content:center; }

    .cta-primary {
      font-family:'Roboto',sans-serif; font-weight:700; font-size:11px;
      letter-spacing:.3em; text-transform:uppercase;
      color:var(--bg); background:var(--gold); text-decoration:none;
      padding:14px 32px; border:1px solid var(--gold);
      transition:background .25s, color .25s;
    }
    .cta-primary:hover { background:transparent; color:var(--gold); }

    .cta-secondary {
      font-family:'Roboto',sans-serif; font-weight:400; font-size:11px;
      letter-spacing:.3em; text-transform:uppercase;
      color:var(--gold-dim); background:transparent; text-decoration:none;
      padding:14px 32px; border:1px solid var(--gold-line);
      transition:border-color .25s, color .25s; display:inline-block;
    }
    .cta-secondary:hover { border-color:var(--gold-dim); color:var(--gold); }

    /* Brand card FOLLOW box */
    .hero-brand-cta {
      display:inline-flex; align-items:center; gap:24px;
      border:1.5px solid var(--gold); padding:12px 24px;
    }
    .brand-cta-text { font-family:'Roboto',sans-serif; font-weight:700; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); opacity:.8; }
    .brand-cta-dot  { width:6px; height:6px; background:var(--gold); border-radius:50%; opacity:.8; flex-shrink:0; }

    /* RIGHT side */
    .hero-right { position:relative; z-index:2; width:700px; flex-shrink:0; }

    .hero-card {
      background:var(--bg-mid); border:1px solid var(--gold-line);
      padding:36px 36px 20px; position:relative;
      opacity:0; overflow:hidden;
      animation:fadeUp .8s ease .5s forwards, float 7s ease-in-out 1.5s infinite;
    }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

    .hero-card::before {
      content:'"'; font-family:'Cinzel',serif; font-size:90px;
      color:var(--blood); opacity:.18; position:absolute;
      top:-8px; left:18px; line-height:1; pointer-events:none;
    }
    .hero-card::after {
      content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
      background:linear-gradient(to bottom, var(--blood), var(--gold));
    }

    .card-tag {
      display:inline-block; font-family:'Roboto',sans-serif; font-size:9px;
      letter-spacing:.25em; text-transform:uppercase;
      background:rgba(139,26,20,.15); color:var(--gold);
      border:1px solid rgba(139,26,20,.3); padding:4px 10px; margin-bottom:12px;
    }
    .card-label { font-family:'Roboto',sans-serif; font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:16px; }

    .slides { position:relative; min-height:160px; }
    .slide { position:absolute; top:0; left:0; right:0; opacity:0; transition:opacity .6s ease; pointer-events:none; }
    .slide.active { opacity:1; position:relative; pointer-events:auto; }
    .card-fact { font-family:'Cinzel',serif; font-weight:600; font-size:clamp(14px,2vw,17px); line-height:1.6; color:var(--gold); margin-bottom:20px; }
    .card-divider { height:1px; background:linear-gradient(to right, var(--gold-line), transparent); margin-bottom:14px; }
    .card-source { font-family:'Roboto',sans-serif; font-size:12px; color:var(--gold-dim); line-height:1.6; }
    .card-source a { color:var(--gold-dim); text-decoration:underline; text-decoration-color:var(--gold-line); }
    .card-year { font-family:'Cinzel',serif; font-weight:900; font-size:56px; color:var(--blood-bright); opacity:.13; position:absolute; bottom:10px; right:18px; line-height:1; letter-spacing:-.02em; pointer-events:none; }

    .slide-controls { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
    .slide-btn { background:transparent; border:1px solid var(--gold-line); color:var(--gold-dim); width:30px; height:30px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s; flex-shrink:0; }
    .slide-btn:hover { border-color:var(--gold); color:var(--gold); }
    .slide-dots { display:flex; gap:8px; align-items:center; }
    .dot { width:5px; height:5px; border-radius:50%; background:var(--gold-dim); opacity:.3; cursor:pointer; transition:opacity .2s, background .2s; }
    .dot.active { background:var(--gold); opacity:1; }
    .slide-progress { height:2px; background:rgba(200,169,110,.1); margin-top:14px; overflow:hidden; }
    .slide-progress-bar { height:100%; background:linear-gradient(to right, var(--blood-bright), var(--gold)); width:0%; transition:width linear; }

    /* ── STATS BAR ── */
    .stats-bar { background:var(--bg-deep); border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); padding:36px 56px; }
    .stats-inner { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gold-line); }
    .stat { background:var(--bg-deep); padding:28px 32px; text-align:center; }
    .stat-number { font-family:'Cinzel',serif; font-weight:900; font-size:40px; color:var(--gold); line-height:1; display:block; }
    .stat-label { font-family:'Roboto',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim); margin-top:8px; display:block; }

    /* ── SECTIONS ── */
    .mission, .sources, .contact { padding:100px 56px; position:relative; }
    .pillars { padding:100px 56px; position:relative; background:var(--bg-deep); }
    .section-inner { max-width:1140px; margin:0 auto; }
    .section-header { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:start; margin-bottom:56px; }
    .section-roman { font-family:'Cinzel',serif; font-weight:900; font-size:96px; color:var(--gold); opacity:.08; line-height:.85; }
    .section-label { font-family:'Roboto',sans-serif; font-size:10px; font-weight:700; letter-spacing:.4em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:16px; display:flex; align-items:center; gap:14px; }
    .section-label::after { content:''; width:48px; height:1px; background:var(--gold-dim); }
    h2 { font-family:'Cinzel',serif; font-weight:700; font-size:clamp(26px,3.5vw,40px); letter-spacing:.06em; color:var(--gold); line-height:1.2; }
    .body-text { font-family:'Roboto',sans-serif; font-weight:300; font-size:17px; line-height:1.9; color:rgba(240,235,224,.65); margin-bottom:20px; }
    .body-text strong { color:var(--gold); font-weight:400; }

    .pillars::before, .sources::before, .contact::before {
      content:''; position:absolute; top:0; left:56px; right:56px; height:1px;
      background:linear-gradient(to right, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent);
    }
    .pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--gold-line); margin-top:56px; }
    .pillar { background:var(--bg-deep); padding:48px 36px; position:relative; overflow:hidden; transition:background .3s; }
    .pillar:hover { background:var(--bg-mid); }
    .pillar::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(to right, var(--blood), var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
    .pillar:hover::after { transform:scaleX(1); }
    .pillar-roman { font-family:'Cinzel',serif; font-size:10px; letter-spacing:.3em; color:var(--gold-dim); margin-bottom:20px; }
    .pillar h3 { font-family:'Cinzel',serif; font-weight:600; font-size:17px; letter-spacing:.1em; color:var(--gold); margin-bottom:16px; }
    .pillar p { font-family:'Roboto',sans-serif; font-weight:300; font-size:14px; line-height:1.85; color:rgba(200,169,110,.52); }

    .sources-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:48px; }
    .source-tag { font-family:'Roboto',sans-serif; font-size:11px; letter-spacing:.1em; color:var(--gold-dim); border:1px solid var(--gold-line); padding:10px 18px; display:flex; align-items:center; gap:8px; transition:border-color .2s, color .2s; cursor:default; }
    .source-tag:hover { border-color:var(--gold-dim); color:var(--gold); }
    .source-tag.featured { border-color:rgba(200,169,110,.4); color:var(--gold); }
    .source-tag::before { content:'◆'; font-size:5px; opacity:.5; }
    .source-note { margin-top:40px; padding:24px 28px; border:1px solid var(--gold-line); border-left:3px solid var(--gold); font-family:'Roboto',sans-serif; font-weight:300; font-size:14px; line-height:1.75; color:var(--gold-dim); }

    .contact { background:var(--bg-deep); text-align:center; }
    .contact h2 { margin-bottom:20px; }
    .contact-desc { font-family:'Roboto',sans-serif; font-weight:300; font-size:16px; color:rgba(240,235,224,.5); max-width:500px; margin:0 auto 40px; line-height:1.8; }
    .contact-email { font-family:'Cinzel',serif; font-size:17px; letter-spacing:.12em; color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-line); padding-bottom:4px; display:inline-block; transition:border-color .2s; }
    .contact-email:hover { border-color:var(--gold); }

    /* ── SOCIAL LINKS ── */
    .social-bar {
      display: flex;
      gap: 20px;
      margin-top: 28px;
      align-items: center;
      justify-content: center;
    }
    .social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid var(--gold-line);
      border-radius: 4px;
      transition: border-color .2s, background .2s, transform .2s;
      text-decoration: none;
      flex-shrink: 0;
    }
    .social-link:hover {
      border-color: var(--gold);
      background: rgba(200,169,110,0.08);
      transform: translateY(-2px);
    }
    .social-link svg { display:block; }

    /* ── CONTACT FORM ── */
    .contact-form {
      max-width: 560px;
      margin: 40px auto 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      text-align: left;
    }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .form-field { display:flex; flex-direction:column; gap:6px; }
    .form-field label {
      font-family:'Roboto',sans-serif; font-size:10px; font-weight:700;
      letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dim);
    }
    .form-field input,
    .form-field textarea,
    .form-field select {
      background: var(--bg-mid);
      border: 1px solid var(--gold-line);
      color: var(--white);
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      font-weight: 300;
      padding: 12px 16px;
      outline: none;
      transition: border-color .2s;
      width: 100%;
      resize: none;
      appearance: none;
      -webkit-appearance: none;
    }
    .form-field input:focus,
    .form-field textarea:focus,
    .form-field select:focus { border-color: var(--gold); }
    .form-field input::placeholder,
    .form-field textarea::placeholder { color: rgba(200,169,110,.3); }
    .form-field textarea { min-height: 120px; }
    .form-submit {
      font-family:'Roboto',sans-serif; font-weight:700; font-size:11px;
      letter-spacing:.3em; text-transform:uppercase;
      color:var(--bg); background:var(--gold);
      border:1px solid var(--gold); padding:15px 36px;
      cursor:pointer; transition:background .25s, color .25s;
      align-self: center;
      min-width: 200px;
    }
    .form-submit:hover { background:transparent; color:var(--gold); }
    .form-msg {
      font-family:'Roboto',sans-serif; font-size:13px; text-align:center;
      padding:12px; margin-top:8px; display:none;
    }
    .form-msg.success { color:var(--gold); border:1px solid var(--gold-line); }
    .form-msg.error   { color:#e74c3c; border:1px solid rgba(231,76,60,.3); }

    /* ── CAPTCHA ── */
    .captcha-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .captcha-question {
      font-family: 'Cinzel', serif;
      font-size: 15px;
      color: var(--gold);
      letter-spacing: .05em;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .captcha-input {
      width: 80px !important;
      text-align: center;
      font-family: 'Cinzel', serif !important;
      font-size: 16px !important;
      letter-spacing: .1em;
    }
    .captcha-hint {
      font-family: 'Roboto', sans-serif;
      font-size: 11px;
      color: var(--gold-dim);
      letter-spacing: .1em;
    }

    @media(max-width:480px){
      .form-row { grid-template-columns:1fr; }
      .social-bar { gap:14px; }
      .social-link { width:40px; height:40px; }
      .captcha-row { flex-direction:column; align-items:flex-start; gap:10px; }
      .captcha-input { width:70px !important; }
    }

        footer { background:var(--bg-deep); padding:36px 56px; border-top:1px solid var(--gold-line); }
    .footer-inner { max-width:1140px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
    .footer-brand-name { font-family:'Cinzel',serif; font-weight:700; font-size:13px; letter-spacing:.35em; color:var(--gold); }
    .footer-handle { font-family:'Roboto',sans-serif; font-size:11px; letter-spacing:.15em; color:var(--gold-dim); margin-top:4px; }
    .footer-copy { font-family:'Roboto',sans-serif; font-size:11px; letter-spacing:.06em; color:rgba(200,169,110,.28); text-align:right; }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    body.no-scroll { overflow:hidden; }

    /* ── TABLET (max 900px) ── */
    @media(max-width:900px){
      nav { padding:16px 24px; }
      .hamburger { display:block; }
      .nav-links {
        position:fixed; top:0; left:0; right:0; bottom:0;
        background:rgba(12,21,25,.98); backdrop-filter:blur(10px);
        flex-direction:column; justify-content:center; align-items:center;
        gap:40px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:101;
      }
      .nav-links.active { opacity:1; pointer-events:auto; }
      .nav-links a { font-size:16px; }

      /* Hero: single column, centered */
      .hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 100px 24px 60px;
        text-align: center;
      }
      .hero-right { width:100%; }
      .hero-slash { display:none; }

      .hero-logo { width:260px; }
      .hero-brand-cta { display:none; }
      .hero-desc { max-width:100%; }

      /* Float animation off — causes layout jumps */
      .hero-card { animation:fadeUp .8s ease .5s forwards !important; }

      /* Stats */
      .stats-bar { padding:24px 16px; }
      .stats-inner { grid-template-columns:repeat(2,1fr); }
      .stat { padding:20px 16px; }
      .stat-number { font-size:32px; }

      /* Sections */
      .mission, .sources, .contact { padding:60px 24px; }
      .pillars { padding:60px 24px; }
      .pillars::before, .sources::before, .contact::before { left:24px; right:24px; }
      .pillars-grid { grid-template-columns:1fr; }
      .section-header { grid-template-columns:1fr; gap:12px; }
      .section-roman { display:none; }
      .body-text { font-size:15px; }

      /* Footer */
      footer { padding:28px 24px; }
      .footer-inner { flex-direction:column; gap:12px; text-align:center; }
      .footer-copy { text-align:center; }
    }

    /* ── SMALL PHONES (max 480px) ── */
    @media(max-width:480px){
      .hero { padding:90px 16px 48px; gap:24px; }
      .hero-logo { width:180px; }
      .hero-desc { font-size:14px; }
      .cta-primary, .cta-secondary { padding:12px 24px; font-size:10px; }

      .hero-card { padding:24px 20px 16px; }
      .card-fact { font-size:14px; line-height:1.55; }
      .card-year { font-size:40px; }
      .slides { min-height:140px; }
      .card-source { font-size:11px; }

      .stats-inner { grid-template-columns:1fr 1fr; }
      .stat { padding:16px 12px; }
      .stat-number { font-size:28px; }
      .stat-label { font-size:9px; letter-spacing:.1em; }

      .mission, .sources, .contact { padding:48px 16px; }
      .pillars { padding:48px 16px; }
      .pillars::before, .sources::before, .contact::before { left:16px; right:16px; }
      .pillar { padding:32px 24px; }
      h2 { font-size:22px; }
      .section-label { font-size:9px; }
      .body-text { font-size:14px; }
      .source-tag { font-size:10px; padding:8px 12px; }
      .contact-email { font-size:14px; letter-spacing:.06em; }
      footer { padding:20px 16px; }
      .footer-brand-name { font-size:11px; }
    }