/* ============================================================
   DUOMO GROUP — Design System v1.0
   Identity: Cathedral · Gold · Ivory · Timeless
   Font stack: Cormorant Garamond (display) + DM Mono (mono)
   Usage: import this file, then use .duomo-* classes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Cinzel:wght@400..900&display=swap');
/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --duomo-bg-primary:    #282828;
  --duomo-bg-secondary:  #000000;
  --duomo-bg-surface:    #F2EEE9;
  --duomo-bg-cream:      #F0ECE7;

  --duomo-gold-primary:          #988D68;
  --duomo-gold-secondary:    #88763D;


  --duomo-rule:          #2A2010;
  --duomo-rule-light:    #E8E2D4;


  --font-logo: 'Cinzel, serif';
  --font-technical: 'Inter', sans-serif;
  --font-body: 'Cormorant Garamond, serif';
  -font-hero:'Bodoni Moda, serif';

  --duomo-radius-sm:     2px;
  --duomo-radius-md:     4px;
  --duomo-radius-lg:     6px;

  --duomo-shadow:        0 4px 40px rgba(13,27,42,0.18);

/* v2*/
--color-antenna: #FDFCF8; 
            --color-vitrail-bg: #0A0B14; /* Darker for higher contrast */
            --color-minister: #EAE9E4; 
            --color-atrio: #F5F2ED; 
            --color-navel: #1A120B; 
            --color-accent: #D4AF37; 

}

/* ── BASE ────────────────────────────────────────────────── */
.duomo-root {
  font-family: var(--duomo-font-mono);
  background: var(--duomo-bg-primary);
  color: var(--duomo-ivory);
  line-height: 1.6;
}

.duomo-surface {
  background: var(--duomo-bg-primary);
  color: var(--duomo-ink);
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.duomo-display-xl {
  font-family: var(--FONT);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--duomo-gold-primary);
}

.duomo-display-xl em {
  color: var(--duomo-gold);
  font-style: italic;
}

.duomo-display-lg {
  font-family: var(--duomo-font-display);
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--duomo-ivory);
}

.duomo-display-md {
  font-family: var(--duomo-font-display);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 300;
  color: var(--duomo-gold);
  font-style: italic;
}

.duomo-eyebrow {
  font-family: var(--duomo-font-mono);
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--duomo-gold);
}

.duomo-body {
  font-family: var(--duomo-font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--duomo-ivory-muted);
}

.duomo-caption {
  font-family: var(--duomo-font-mono);
  font-size: 10px;
  color: var(--duomo-gold-muted);
  letter-spacing: 1px;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.duomo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

 /* Vitril section */

 .hero-pattern {
            background-color: var(--color-vitrail-bg);
            background-image: 
                radial-gradient(circle at 2px 2px, rgba(212, 175, 55, 0.05) 1px, transparent 0);
            background-size: 40px 40px;
        }

        .geometric-overlay {
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 56c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-2 20c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm34-16c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm40 2c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-4-26c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM14 30c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm8 24c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm60-20c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 36c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23D4AF37' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.6;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tracking-investor { letter-spacing: 0.3em; }
       
      

.duomo-section {
  padding: 80px 0;
  border-top: 1px solid var(--duomo-rule);
}

.duomo-rule {
  border: none;
  border-top: 1px solid var(--duomo-rule);
  margin: 40px 0;
}

.duomo-rule-gold {
  border: none;
  border-top: 1px solid var(--duomo-gold);
  opacity: 0.3;
  margin: 40px 0;
}

/* ── COMPONENTS ──────────────────────────────────────────── */
.duomo-card {
  background: var(--duomo-bg-secondary);
  border: 1px solid var(--duomo-rule);
  border-radius: var(--duomo-radius-lg);
  padding: 32px;
}

.duomo-card-surface {
  background: var(--duomo-bg-surface);
  border: 1px solid var(--duomo-rule-light);
  border-radius: var(--duomo-radius-lg);
  padding: 32px;
}

.duomo-accent-bar {
  width: 4px;
  background: var(--duomo-bg-primary);
  border-radius: 2px;
}

.duomo-tag {
  display: inline-block;
  font-family: var(--duomo-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--duomo-bg-primary);
  color: var(--duomo-bg-primary);
  border-radius: var(--duomo-radius-sm);
}

.duomo-btn {
  display: inline-block;
  font-family: var(--duomo-font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 12px 28px;
  background: transparent;
  border: 1px solid var(--duomo-bg-primary);
  color: var(--duomo-gold);
  cursor: pointer;
  border-radius: var(--duomo-radius-sm);
  transition: all 0.2s;
}

.duomo-btn:hover {
  background: var(--duomo-gold-secondary);
  color: var(--duomo-bg-primary);
}

.duomo-btn-solid {
  background: var(--duomo-gold-secondary);
  color: var(--duomo-bg-primary);
  border: 1px solid var(--duomo-gold);
}

.duomo-btn-solid:hover {
  background: var(--duomo-gold-light);
}

/* ── LOGO PLACEHOLDER ────────────────────────────────────── */
/*
  Usage:
  <div class="duomo-logo">
    <svg class="duomo-logo-mark" ...>...</svg>
    <span class="duomo-logo-text">DUOMO</span>
  </div>

  Replace the SVG content with your final logo mark.
  The text and sizing will adapt automatically.
*/
.duomo-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.duomo-logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.duomo-logo-text {
  font-family: var(--duomo-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--duomo-gold-secondary);
}

.duomo-logo-sub {
  font-family: var(--duomo-font-mono);
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--duomo-gold-secondary);
  text-transform: uppercase;
  display: block;
  margin-top: -2px;
}

/* Placeholder SVG logo mark — replace with final */
.duomo-logo-mark-placeholder {
  /* Cathedral arch geometry */
}

/* ── EMAIL SIGNATURE ─────────────────────────────────────── */
/*
  Usage: copy the .duomo-signature div into your email client
  as HTML signature. Works in Zoho Mail, Gmail, Outlook.
*/
.duomo-signature {
  font-family: 'Georgia', serif;
  border-left: 3px solid #B8962E;
  padding-left: 16px;
  margin-top: 24px;
}

.duomo-signature-name {
  font-size: 14px;
  font-weight: 600;
  color: #0D1B2A;
  margin: 0 0 2px;
}

.duomo-signature-role {
  font-size: 12px;
  color: #B8962E;
  font-style: italic;
  margin: 0 0 8px;
}

.duomo-signature-rule {
  border: none;
  border-top: 1px solid #E8E2D4;
  margin: 8px 0;
}

.duomo-signature-entity {
  font-size: 11px;
  font-weight: 600;
  color: #0D1B2A;
  font-family: 'Georgia', serif;
  letter-spacing: 1px;
  margin: 0 0 2px;
}

.duomo-signature-tagline {
  font-size: 10px;
  color: #8A7A5A;
  font-style: italic;
  margin: 0 0 6px;
}

.duomo-signature-links {
  font-size: 11px;
  color: #64748B;
  margin: 0;
  line-height: 1.8;
}

.duomo-signature-links a {
  color: #B8962E;
  text-decoration: none;
}