/* ============================================================
   SAN GLOBAL TRADERS — Design System
   Palette: Navy (brand) + Bronze (salt/leather/brass accent) + Salt White
   Type: Fraunces (display) / Inter (body) / IBM Plex Mono (trade data)
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

   :root{
     --ink:        #0B1626;
     --navy:       #142A4D;
     --navy-soft:  #1D3A66;
     --bronze:     #B8863C;
     --bronze-soft:#D9B173;
     --salt:       #FAF7F1;
     --paper:      #FFFFFF;
     --line:       #E4DFD3;
     --line-dark:  rgba(255,255,255,0.14);
     --stone:      #5B6472;
     --stone-light:#8A93A0;
   
     --display: 'Fraunces', Georgia, serif;
     --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --mono: 'IBM Plex Mono', 'Courier New', monospace;
   
     --container: 1180px;
     --radius: 2px;
   }
   
   *{ box-sizing:border-box; margin:0; padding:0; }
   html{ scroll-behavior:smooth; overflow-x:hidden;}
   body{
     font-family:var(--body);
     color:var(--ink);
     background:var(--salt);
     line-height:1.6;
     font-size:16px;
     -webkit-font-smoothing:antialiased;
     width: 100%;
     overflow-x:hidden;
   }
   img{ max-width:100%; display:block; }
   a{ color:inherit; text-decoration:none; }
   ul{ list-style:none; }
   
   .wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }
   
   h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
   h1{ font-size:clamp(2.4rem, 5vw, 4.1rem); line-height:1.05; }
   h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.15; }
   h3{ font-size:1.25rem; line-height:1.3; }
   p{ color:var(--stone); }
   
   .eyebrow{
     font-family:var(--mono);
     font-size:0.72rem;
     letter-spacing:0.14em;
     text-transform:uppercase;
     color:var(--bronze);
     display:flex;
     align-items:center;
     gap:10px;
     margin-bottom:16px;
   }
   .eyebrow::before{
     content:'';
     width:22px; height:1px;
     background:var(--bronze);
     display:inline-block;
   }
   .eyebrow.on-dark{ color:var(--bronze-soft); }
   
   /* ---------- Buttons ---------- */
   .btn{
     display:inline-flex;
     align-items:center;
     gap:10px;
     font-family:var(--mono);
     font-size:0.82rem;
     letter-spacing:0.05em;
     text-transform:uppercase;
     padding:14px 26px;
     border:1px solid var(--navy);
     border-radius:var(--radius);
     transition:all 0.25s ease;
     white-space:nowrap;
   }
   .btn-primary{ background:var(--navy); color:var(--salt); }
   .btn-primary:hover{ background:var(--ink); border-color:var(--ink); }
   .btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
   .btn-outline:hover{ background:var(--navy); color:var(--salt); }
   .btn-bronze{ background:var(--bronze); border-color:var(--bronze); color:var(--ink); }
   .btn-bronze:hover{ background:var(--bronze-soft); border-color:var(--bronze-soft); }
   .btn-on-dark.btn-outline{ color:var(--salt); border-color:var(--line-dark); }
   .btn-on-dark.btn-outline:hover{ background:var(--salt); color:var(--ink); }
   .btn svg{ width:14px; height:14px; }
   
   /* ---------- Header ---------- */
   .site-header{
     position:sticky; top:0; z-index:100;
     background:rgba(250,247,241,0.94);
     backdrop-filter:blur(8px);
     border-bottom:1px solid var(--line);
   }
   .site-header .wrap{
     display:flex; align-items:center; justify-content:space-between;
     height:82px;
   }
   .brand{ display:flex; align-items:center; gap:12px; }
   .brand img{ height:38px; width:auto; }
   .brand-text{ font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-0.01em; }
   .brand-text span{ display:block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.16em; color:var(--stone); text-transform:uppercase; font-weight:400; margin-top:2px; }
   
   .main-nav{ display:flex; align-items:center; gap:36px; }
   .main-nav a{
     font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
     color:var(--ink); position:relative; padding:6px 0;
   }
   .main-nav a::after{
     content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--bronze);
     transition:width 0.25s ease;
   }
   .main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
   .main-nav a.active{ color:var(--bronze); }
   
   .nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
   .nav-toggle span{ width:24px; height:2px; background:var(--ink); display:block; }
   
   /* ---------- Hero ---------- */
   .hero{
     background:linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
     color:var(--salt);
     padding:110px 0 90px;
     position:relative;
     overflow:hidden;
   }
   .hero .wrap{ position:relative; z-index:2; }
   .hero-content{ max-width:680px; }
   .hero h1{ color:var(--salt); }
   .hero h1 em{ font-style:italic; font-weight:400; color:var(--bronze-soft); }
   .hero p.lead{ color:rgba(250,247,241,0.72); font-size:1.08rem; max-width:520px; margin:22px 0 34px; }
   .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
   
   .route-map{ position:absolute; right:-40px; top:0; width:60%; height:100%; opacity:0.9; z-index:1; pointer-events:none; }
   .route-map svg{ width:100%; height:100%; }
   .route-line{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 2.4s ease forwards 0.3s; }
   .route-dot{ opacity:0; animation:fadeIn 0.6s ease forwards; }
   @keyframes draw{ to{ stroke-dashoffset:0; } }
   @keyframes fadeIn{ to{ opacity:1; } }
   @media (prefers-reduced-motion: reduce){
     .route-line{ animation:none; stroke-dashoffset:0; }
     .route-dot{ animation:none; opacity:1; }
   }
   
   .hero-manifest{
     display:flex; gap:0; margin-top:64px; border-top:1px solid var(--line-dark); padding-top:22px;
     flex-wrap:wrap;
   }
   .hero-manifest div{ flex:1; min-width:140px; padding-right:24px; }
   .hero-manifest .k{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bronze-soft); display:block; margin-bottom:6px; }
   .hero-manifest .v{ font-family:var(--display); font-size:1.3rem; color:var(--salt); }
   
   /* ---------- Section scaffolding ---------- */
   section{ padding:96px 0; }
   .section-head{ max-width:640px; margin-bottom:56px; }
   .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
   .section-head.center .eyebrow{ justify-content:center; }
   .section-head.center .eyebrow::before{ display:none; }
   
   .bg-navy{ background:var(--navy); color:var(--salt); }
   .bg-navy h2, .bg-navy h3{ color:var(--salt); }
   .bg-navy p{ color:rgba(250,247,241,0.68); }
   .bg-ink{ background:var(--ink); color:var(--salt); }
   .bg-paper{ background:var(--paper); }
   
   /* ---------- Category / Product Grid ---------- */
   .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
   .cat-card{ background:var(--paper); padding:34px 26px; transition:background 0.25s ease; }
   .cat-card:hover{ background:var(--salt); }
   .cat-card .hs{ font-family:var(--mono); font-size:0.68rem; color:var(--bronze); letter-spacing:0.08em; }
   .cat-card h3{ margin:14px 0 10px; }
   .cat-card p{ font-size:0.92rem; margin-bottom:18px; }
   .cat-card a.more{ font-family:var(--mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--navy); border-bottom:1px solid var(--bronze); padding-bottom:2px; }
   
   /* ---------- Placeholder product image tile ---------- */
   .pic-tile{
     aspect-ratio:4/3; width:100%; position:relative; overflow:hidden;
     background:
       linear-gradient(135deg, var(--navy) 0%, var(--ink) 100%);
     display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
     border:1px solid var(--line);
   }
   .pic-tile::before{
     content:''; position:absolute; inset:0;
     background-image:
       repeating-linear-gradient(45deg, transparent, transparent 26px, rgba(184,134,60,0.09) 26px, rgba(184,134,60,0.09) 27px);
   }
   .pic-tile .mark{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bronze-soft); z-index:1; text-align:center; padding:0 16px; }
   .pic-tile .mark strong{ display:block; color:var(--salt); font-family:var(--display); font-size:1.05rem; font-weight:500; margin-bottom:6px; }
   .pic-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
   
   /* ---------- Why / feature list ---------- */
   .feature-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
   .feature{ border-top:1px solid var(--line); padding-top:22px; }
   .bg-navy .feature{ border-top:1px solid var(--line-dark); }
   .feature .code{ font-family:var(--mono); font-size:0.72rem; color:var(--bronze); letter-spacing:0.1em; }
   .feature h3{ margin:12px 0 10px; }
   .feature p{ font-size:0.94rem; }
   
   /* ---------- CEO teaser ---------- */
   .ceo-teaser{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; }
   .ceo-photo{ aspect-ratio:3/4; background:linear-gradient(160deg,var(--navy-soft),var(--ink)); position:relative; overflow:hidden; }
   .ceo-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
   .ceo-photo .mark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.7rem; color:var(--bronze-soft); text-align:center; padding:0 20px; letter-spacing:0.08em; text-transform:uppercase; }
   blockquote{ font-family:var(--display); font-style:italic; font-size:1.5rem; line-height:1.4; color:var(--ink); font-weight:400; }
   .ceo-name{ margin-top:22px; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); }
   .ceo-name strong{ display:block; font-family:var(--display); font-style:normal; font-size:1.05rem; color:var(--ink); text-transform:none; letter-spacing:0; margin-bottom:2px; }
   
   /* ---------- Footer ---------- */
   .site-footer{ background:var(--ink); color:rgba(250,247,241,0.66); padding:72px 0 28px; }
   .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid var(--line-dark); }
   .footer-grid h4{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bronze-soft); margin-bottom:18px; }
   .footer-grid li{ margin-bottom:10px; font-size:0.9rem; }
   .footer-grid a:hover{ color:var(--salt); }
   .footer-brand .brand-text{ color:var(--salt); }
   .footer-brand p{ margin-top:16px; font-size:0.88rem; max-width:280px; color:rgba(250,247,241,0.5); }
   .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:rgba(250,247,241,0.42); flex-wrap:wrap; gap:12px; }
   
   /* ---------- Page hero (interior pages) ---------- */
   .page-hero{ background:var(--navy); color:var(--salt); padding:150px 0 70px; }
   .page-hero h1{ color:var(--salt); }
   .page-hero p{ color:rgba(250,247,241,0.7); max-width:560px; margin-top:18px; }
   .breadcrumb{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--bronze-soft); margin-bottom:18px; }
   
   /* ---------- Product detail sections ---------- */
   .product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; padding:90px 0; border-bottom:1px solid var(--line); }
   .product-detail:last-child{ border-bottom:none; }
   .product-detail.reverse{ direction:rtl; }
   .product-detail.reverse > *{ direction:ltr; }
   .product-media{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
   .product-media .pic-tile:first-child{ grid-column:1/-1; aspect-ratio:16/10; }
   .specs{ margin:26px 0; border-top:1px solid var(--line); }
   .specs div{ display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
   .specs .k{ font-family:var(--mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--stone); }
   .specs .v{ color:var(--ink); font-weight:500; text-align:right; }
   
   /* ---------- About page ---------- */
   .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
   .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:70px 0; }
   .stat-row div{ padding:28px 24px; border-right:1px solid var(--line); }
   .stat-row div:last-child{ border-right:none; }
   .stat-row .num{ font-family:var(--display); font-size:2.1rem; color:var(--navy); }
   .stat-row .lbl{ font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--stone); margin-top:8px; }
   
   /* ---------- CEO Message page ---------- */
   .ceo-letter{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:70px; }
   .ceo-letter .ceo-photo{ position:sticky; top:110px; aspect-ratio:4/5; }
   .letter-body p{ color:var(--ink); font-size:1.02rem; margin-bottom:20px; max-width:600px; }
   .signature-block{ margin-top:40px; }
   .signature-block .sig{ font-family:var(--display); font-style:italic; font-size:2.1rem; color:var(--navy); }
   .signature-block .role{ font-family:var(--mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--stone); margin-top:8px; }
   
   /* ---------- Contact page ---------- */
   .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
   .contact-card{ border:1px solid var(--line); background:var(--paper); padding:34px; margin-bottom:18px; }
   .contact-card .k{ font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--bronze); display:block; margin-bottom:10px; }
   .contact-card .v{ font-family:var(--display); font-size:1.3rem; }
   form{ display:flex; flex-direction:column; gap:18px; }
   label{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--stone); margin-bottom:8px; display:block; }
   input, select, textarea{
     width:100%; border:1px solid var(--line); background:var(--paper); padding:14px 16px;
     font-family:var(--body); font-size:0.95rem; color:var(--ink); border-radius:var(--radius);
   }
   input:focus, select:focus, textarea:focus{ outline:2px solid var(--bronze); outline-offset:1px; border-color:var(--bronze); }
   textarea{ resize:vertical; min-height:120px; }
   
   /* ---------- WhatsApp float ---------- */
   .wa-float{
    position:fixed; bottom:24px; right:24px; z-index:200;
    background:#25D366; color:#ffffff; width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(11,22,38,0.3);
    transition:transform 0.2s ease;
  }
  .wa-float:hover{ transform:scale(1.08); background:#1DA851; }
  .wa-float svg{ width:26px; height:26px; fill:#ffffff; }
   /* ---------- Responsive ---------- */
   @media (max-width:980px){
     .cat-grid{ grid-template-columns:repeat(2,1fr); }
     .feature-list{ grid-template-columns:1fr 1fr; }
     .ceo-teaser, .about-grid, .contact-grid, .ceo-letter{ grid-template-columns:1fr; }
     .product-detail{ grid-template-columns:1fr; }
     .product-detail.reverse{ direction:ltr; }
     .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
     .stat-row{ grid-template-columns:1fr 1fr; }
     .stat-row div{ border-bottom:1px solid var(--line); }
     .hero-manifest{ gap:20px 0; }
   }
   @media (max-width:720px){
    .site-header .wrap {
      position: relative; /* Mobile menu open hone par positioning container banne ke liye */
    }
    .main-nav{
      position: fixed; 
      top: 82px; 
      left: 0; 
      width: 100%;
      height: calc(100vh - 82px); /* Poori mobile screen height fill karne ke liye */
      background: var(--salt);
      flex-direction: column; 
      align-items: flex-start; 
      padding: 36px 28px; 
      gap: 26px;
      transform: translateX(100%); 
      transition: transform 0.3s ease; 
      overflow-y: auto;
      z-index: 99;
    }
    .main-nav.open{ transform:translateX(0); }
    .main-nav a{ font-size:1.1rem; width: 100%; display: block; }
    .nav-toggle{ display:flex; }
    .cat-grid{ grid-template-columns:1fr; }
    .feature-list{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
    .route-map{ display:none; }
    section{ padding:64px 0; }
    .hero{ padding:80px 0 60px; }
    .page-hero{ padding:120px 0 50px; }
  }
  .social-links h4 {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bronze-soft);
    margin-bottom: 18px;
  }
  
  .social-icons {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--salt);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: 1px solid var(--line-dark);
  }
  
  .social-icons a:hover {
    background: var(--bronze);
    color: var(--ink);
    transform: translateY(-3px);
    border-color: var(--bronze);
  }