/* Cinzel — lokal gehostet */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    :root{
      --bg0:#050608;
      --bg1:#0b0c10;
      --gold1:#fff6cf;
      --gold2:#f7d98f;
      --gold3:#d9aa43;
      --gold4:#8b5a12;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      min-height:100vh;
      background:
        radial-gradient(1200px 700px at 70% 30%, rgba(255,210,122,.08), transparent 60%),
        radial-gradient(900px 600px at 30% 60%, rgba(255,140,0,.06), transparent 55%),
        radial-gradient(700px 500px at 55% 70%, rgba(255,255,255,.03), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      background-attachment: fixed;
      color:white;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      line-height:1.6;
    }

    body::before{
      content:"";
      position:fixed;
      inset:-20%;
      background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 35%),
        radial-gradient(circle at 80% 40%, rgba(255,200,120,.04), transparent 35%),
        radial-gradient(circle at 55% 70%, rgba(255,255,255,.03), transparent 40%);
      filter: blur(18px);
      opacity:.9;
      pointer-events:none;
      transform: rotate(-6deg);
      z-index:-1;
    }

    /* ===== INTRO POPUP ===== */
    .tda-intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      opacity: 0;
      animation: introFadeIn 0.8s ease-out forwards;
    }

    .tda-intro-overlay.exiting {
      animation: introFadeOut 1s ease-in-out forwards;
    }

    .tda-intro-overlay.hidden {
      display: none;
    }

    @keyframes introFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes introFadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    .tda-intro-content {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tda-intro-glow {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background: radial-gradient(
        ellipse 40% 35% at center,
        rgba(255, 180, 50, 0.08) 0%,
        rgba(255, 150, 0, 0.03) 50%,
        transparent 80%
      );
      pointer-events: none;
      opacity: 0;
      animation: glowIn 1.5s ease-out 0.3s forwards;
    }

    .tda-intro-overlay.exiting .tda-intro-glow {
      animation: glowOut 0.8s ease-out forwards;
    }

    @keyframes glowIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes glowOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    .tda-intro-logo {
      max-width: 550px;
      width: 75vw;
      height: auto;
      z-index: 2;
      -webkit-mask-image: radial-gradient(
        ellipse 55% 50% at center,
        black 0%,
        black 25%,
        rgba(0,0,0,0.7) 45%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0.1) 75%,
        transparent 90%
      );
      mask-image: radial-gradient(
        ellipse 55% 50% at center,
        black 0%,
        black 25%,
        rgba(0,0,0,0.7) 45%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0.1) 75%,
        transparent 90%
      );
      opacity: 0;
      transform: scale(0.95);
      filter: blur(8px);
      animation: logoReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .tda-intro-overlay.exiting .tda-intro-logo {
      animation: logoExit 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes logoReveal {
      0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(8px);
      }
      60% {
        opacity: 1;
        transform: scale(1.01);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }
    }

    @keyframes logoExit {
      0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }
      100% {
        opacity: 0;
        transform: scale(1.02);
        filter: blur(6px);
      }
    }

    /* ===== NAVIGATION ===== */
    .nav{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      padding:1rem 2rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      background:rgba(5,6,8,.85);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(215,162,58,.15);
    }

    /* TDA Logo oben rechts */
    .tda-corner-badge{
      position:fixed;
      top:100px;
      right:20px;
      z-index:999;
      width:70px;
      height:70px;
      border-radius:50%;
      overflow:hidden;
      background: linear-gradient(145deg, rgba(20,20,25,0.95), rgba(10,10,12,0.98));
      border:2px solid rgba(255, 215, 0, 0.3);
      box-shadow:
        0 0 20px rgba(255, 107, 53, 0.15),
        0 0 30px rgba(255, 215, 0, 0.08);
    }

    .tda-corner-badge img{
      width:110%;
      height:110%;
      object-fit:cover;
      margin:-5%;
    }

    .nav-links{
      display:flex;
      gap:2rem;
      list-style:none;
    }

    .nav-links a{
      color:rgba(255,255,255,.85);
      text-decoration:none;
      font-size:.9rem;
      font-weight:500;
      letter-spacing:.05em;
      text-transform:uppercase;
      transition:all .3s;
      padding:.5rem 1rem;
      border-radius:4px;
    }

    .nav-links a:hover{
      color:var(--gold2);
      background:rgba(215,162,58,.1);
    }

    /* Hamburger Menu */
    .hamburger{
      display:none;
      flex-direction:column;
      justify-content:center;
      gap:5px;
      width:30px;
      height:30px;
      background:transparent;
      border:none;
      cursor:pointer;
      padding:0;
      z-index:1001;
    }

    .hamburger span{
      display:block;
      width:100%;
      height:3px;
      background:var(--gold2);
      border-radius:2px;
      transition:all 0.3s ease;
    }

    .hamburger.active span:nth-child(1){
      transform:rotate(45deg) translate(6px, 6px);
    }

    .hamburger.active span:nth-child(2){
      opacity:0;
    }

    .hamburger.active span:nth-child(3){
      transform:rotate(-45deg) translate(6px, -6px);
    }

    /* Login Buttons in Nav */
    .nav-logins{
      display:flex;
      gap:16px;
      margin-left:2rem;
    }

    .nav-login-btn{
      display:flex;
      align-items:center;
      gap:10px;
      padding:6px 16px 6px 6px;
      border-radius:50px;
      background: linear-gradient(145deg, rgba(25,25,30,0.95), rgba(15,15,18,0.98));
      border:2px solid rgba(255, 215, 0, 0.5);
      transition: all 0.3s ease;
      text-decoration:none;
      box-shadow:
        0 0 20px rgba(255, 107, 53, 0.2),
        0 0 30px rgba(255, 215, 0, 0.1);
    }

    .nav-login-btn:hover{
      border-color:rgba(255, 215, 0, 0.8);
      transform:scale(1.05);
      box-shadow:
        0 0 25px rgba(255, 107, 53, 0.35),
        0 0 40px rgba(255, 215, 0, 0.2);
    }

    .nav-login-btn .btn-logo{
      width:32px;
      height:32px;
      border-radius:50%;
      overflow:hidden;
      flex-shrink:0;
    }

    .nav-login-btn .btn-logo img{
      width:120%;
      height:120%;
      object-fit:cover;
      margin:-10%;
    }

    .nav-login-btn .btn-text{
      color:var(--gold2);
      font-size:0.85rem;
      font-weight:600;
      white-space:nowrap;
    }

    .nav-cta{
      background:linear-gradient(135deg, var(--gold3), var(--gold4)) !important;
      color:#000 !important;
      font-weight:700 !important;
    }

    .nav-cta:hover{
      background:linear-gradient(135deg, var(--gold2), var(--gold3)) !important;
    }

    /* ===== HERO SECTION ===== */
    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:120px 24px 80px;
    }

    .hero-container{
      max-width:1200px;
      width:100%;
      display:grid;
      grid-template-columns: 320px 1fr;
      gap: 50px;
      align-items:center;
    }

    /* Logo links im Kreis */
    .hero-logo-side{
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .hero-logo-container{
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(30,30,40,0.9), rgba(10,10,15,0.95));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 0 60px rgba(255, 107, 53, 0.3),
        0 0 100px rgba(255, 215, 0, 0.15),
        inset 0 0 30px rgba(0,0,0,0.5);
      animation: logoGlow 4s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }

    /* Rotierender Gradient-Hintergrund */
    .hero-logo-container::before{
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      background: linear-gradient(45deg, #ffd700, #ff6b35, #f7931e, #ffd700);
      z-index: 0;
      animation: rotate 8s linear infinite;
      opacity: 0.6;
    }

    /* Border-Overlay über dem Logo */
    .hero-logo-container::after{
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid rgba(255, 215, 0, 0.5);
      z-index: 10;
      pointer-events: none;
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes logoGlow {
      0%, 100% {
        box-shadow: 0 0 60px rgba(255, 107, 53, 0.3), 0 0 100px rgba(255, 215, 0, 0.15);
      }
      50% {
        box-shadow: 0 0 80px rgba(255, 215, 0, 0.4), 0 0 120px rgba(255, 107, 53, 0.25);
      }
    }

    .hero-logo{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: drop-shadow(0 5px 15px rgba(0,0,0,.5));
      position: relative;
      z-index: 1;
    }

    /* Text rechts */
    .hero-text-side{
      text-align: left;
      min-width: 0;
    }

    .heroKicker{
      margin: 0 0 10px 0;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: clamp(14px, 1.8vw, 20px);
      color: rgba(245, 220, 170, .92);
      text-shadow:
        0 1px 0 rgba(0,0,0,.65),
        0 10px 25px rgba(0,0,0,.55);
    }

    .heroGold3D{
      margin: 0 0 20px 0;
      font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
      font-weight: 900;
      letter-spacing: .02em;
      text-transform: uppercase;
      font-size: clamp(24px, 4vw, 64px);
      line-height: 1.1;
      background: linear-gradient(
        180deg,
        #fff6cf 0%,
        #f7d98f 22%,
        #d9aa43 48%,
        #8b5a12 76%,
        #ffd47a 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow:
        0 0 18px rgba(255,170,60,.18),
        0 18px 40px rgba(0,0,0,.55);
    }

    /* Hero Buttons */
    .hero-buttons{
      margin-top:50px;
      display:flex;
      gap:1.5rem;
      justify-content:center;
      flex-wrap:wrap;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      padding:1rem 2rem;
      font-size:1rem;
      font-weight:600;
      text-decoration:none;
      border-radius:8px;
      transition:all .3s;
      border:none;
      cursor:pointer;
    }

    .btn-primary{
      background:linear-gradient(135deg, var(--gold2), var(--gold4));
      color:#000;
      box-shadow:0 4px 20px rgba(215,162,58,.3);
    }

    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 8px 30px rgba(215,162,58,.4);
    }

    .btn-secondary{
      background:rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.2);
    }

    .btn-secondary:hover{
      background:rgba(255,255,255,.15);
      border-color:rgba(215,162,58,.4);
    }

    /* Login Cards */
    .login-cards{
      margin-top:40px;
      display:flex;
      gap:20px;
      justify-content:flex-start;
      flex-wrap:nowrap;
    }

    .login-card{
      display:flex;
      align-items:center;
      gap:15px;
      padding:12px 20px 12px 12px;
      background: linear-gradient(145deg, rgba(20,20,25,0.9), rgba(10,10,12,0.95));
      border:2px solid rgba(255, 215, 0, 0.3);
      border-radius:12px;
      text-decoration:none;
      transition: all 0.3s ease;
      box-shadow:
        0 0 30px rgba(255, 107, 53, 0.15),
        0 0 50px rgba(255, 215, 0, 0.08);
      flex-shrink:0;
    }

    .login-card:hover{
      border-color:rgba(255, 215, 0, 0.7);
      transform:translateY(-4px);
      box-shadow:
        0 0 40px rgba(255, 107, 53, 0.25),
        0 0 60px rgba(255, 215, 0, 0.15);
    }

    .login-card-logo{
      width:70px;
      height:70px;
      border-radius:50%;
      overflow:hidden;
      flex-shrink:0;
      background: linear-gradient(145deg, rgba(30,30,35,0.9), rgba(15,15,18,0.95));
      box-shadow:
        0 0 20px rgba(255, 107, 53, 0.2),
        inset 0 0 10px rgba(0,0,0,0.3);
    }

    .login-card-logo img{
      width:115%;
      height:115%;
      object-fit:cover;
      margin:-7.5%;
    }

    .login-card-content{
      text-align:left;
    }

    .login-card-content h3{
      color:var(--gold2);
      font-size:1.1rem;
      font-weight:700;
      margin:0 0 4px 0;
    }

    .login-card-content p{
      color:rgba(255,255,255,0.6);
      font-size:0.85rem;
      margin:0 0 8px 0;
    }

    .login-link{
      color:var(--gold3);
      font-size:0.9rem;
      font-weight:600;
    }

    .login-card:hover .login-link{
      color:var(--gold1);
    }

    /* ===== SECTIONS ===== */
    section{
      padding:100px 24px;
      max-width:1200px;
      margin:0 auto;
    }

    .section-title{
      text-align:center;
      margin-bottom:60px;
    }

    .section-title h2{
      font-family: "Cinzel", serif;
      font-size:clamp(28px, 4vw, 48px);
      font-weight:800;
      background: linear-gradient(180deg, var(--gold1) 0%, var(--gold2) 50%, var(--gold3) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
      margin-bottom:1rem;
    }

    .section-title p{
      color:rgba(255,255,255,.7);
      font-size:1.1rem;
      max-width:600px;
      margin:0 auto;
    }

    /* Product Cards */
    .products{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
      gap:2rem;
    }

    .product-card{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(215,162,58,.15);
      border-radius:16px;
      overflow:hidden;
      transition:all .3s;
    }

    .product-card:hover{
      transform:translateY(-8px);
      border-color:rgba(215,162,58,.4);
      box-shadow:0 20px 60px rgba(0,0,0,.4);
    }

    .product-image{
      width:100%;
      height:220px;
      background:linear-gradient(135deg, rgba(215,162,58,.1), rgba(138,90,18,.1));
      display:flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,.3);
      font-size:.9rem;
      border-bottom:1px solid rgba(215,162,58,.1);
    }

    .product-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .product-content{
      padding:2rem;
    }

    .product-content h3{
      font-family: "Cinzel", serif;
      font-size:1.5rem;
      font-weight:700;
      color:var(--gold2);
      margin-bottom:1rem;
    }

    .product-content p{
      color:rgba(255,255,255,.7);
      margin-bottom:1.5rem;
      font-size:.95rem;
    }

    .product-features{
      list-style:none;
      margin-bottom:1.5rem;
    }

    .product-features li{
      color:rgba(255,255,255,.8);
      padding:.5rem 0;
      padding-left:1.5rem;
      position:relative;
      font-size:.9rem;
    }

    .product-features li::before{
      content:"✓";
      position:absolute;
      left:0;
      color:var(--gold3);
      font-weight:bold;
    }

    .product-logo-circle{
      width:140px;
      height:140px;
      border-radius:50%;
      overflow:hidden;
      background: linear-gradient(145deg, rgba(30,30,35,0.9), rgba(15,15,18,0.95));
      box-shadow:
        0 0 40px rgba(255, 107, 53, 0.25),
        0 0 60px rgba(255, 215, 0, 0.1),
        inset 0 0 20px rgba(0,0,0,0.4);
      border:3px solid rgba(255, 215, 0, 0.4);
    }

    .product-logo-circle img{
      width:115%;
      height:115%;
      object-fit:cover;
      margin:-7.5%;
    }

    .product-subtitle{
      color:var(--gold3);
      font-size:1.1rem;
      font-weight:600;
      margin-bottom:1rem;
    }

    .product-description{
      color:rgba(255,255,255,.75);
      font-size:1rem;
      line-height:1.7;
      margin-bottom:1.5rem;
    }

    .features-title{
      color:var(--gold2);
      font-size:1rem;
      margin:1.5rem 0 1rem 0;
      text-transform:uppercase;
      letter-spacing:0.05em;
    }

    .product-features li strong{
      color:var(--gold2);
    }

    .product-buttons{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .product-buttons .btn{
      flex:1;
      min-width:140px;
      justify-content:center;
      font-size:.9rem;
      padding:.8rem 1rem;
    }

    /* Synergy Section */
    .synergy-section{
      background: linear-gradient(180deg, rgba(215,162,58,0.03), transparent);
      border-top:1px solid rgba(215,162,58,.1);
      border-bottom:1px solid rgba(215,162,58,.1);
    }

    .synergy-diagram{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:40px;
      margin-bottom:60px;
    }

    .synergy-product{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:12px;
    }

    .synergy-logo{
      width:100px;
      height:100px;
      border-radius:50%;
      overflow:hidden;
      background: linear-gradient(145deg, rgba(30,30,35,0.9), rgba(15,15,18,0.95));
      box-shadow:
        0 0 30px rgba(255, 107, 53, 0.2),
        0 0 50px rgba(255, 215, 0, 0.1);
      border:2px solid rgba(255, 215, 0, 0.4);
    }

    .synergy-logo img{
      width:115%;
      height:115%;
      object-fit:cover;
      margin:-7.5%;
    }

    .synergy-product span{
      color:var(--gold2);
      font-weight:600;
      font-size:1.1rem;
    }

    .synergy-arrow{
      font-size:2.5rem;
      color:var(--gold3);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse{
      0%, 100% { opacity:0.5; transform:scale(1); }
      50% { opacity:1; transform:scale(1.1); }
    }

    .synergy-benefits{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:24px;
      margin-bottom:50px;
    }

    .synergy-item{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(215,162,58,.15);
      border-radius:12px;
      padding:24px;
      transition:all .3s;
    }

    .synergy-item:hover{
      border-color:rgba(215,162,58,.4);
      background:rgba(215,162,58,.05);
    }

    .synergy-icon{
      font-size:2rem;
      margin-bottom:12px;
    }

    .synergy-item h4{
      color:var(--gold2);
      font-size:1.1rem;
      margin-bottom:8px;
    }

    .synergy-item p{
      color:rgba(255,255,255,.7);
      font-size:.95rem;
      line-height:1.6;
    }

    .synergy-cta{
      text-align:center;
      padding-top:20px;
    }

    .synergy-cta p{
      color:rgba(255,255,255,.8);
      font-size:1.1rem;
      margin-bottom:20px;
    }

    /* Features Grid */
    .features-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
      gap:1.5rem;
      margin-top:40px;
    }

    .feature-item{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px;
      padding:1.5rem;
      text-align:center;
      transition:all .3s;
    }

    .feature-item:hover{
      border-color:rgba(215,162,58,.3);
      background:rgba(215,162,58,.05);
    }

    .feature-icon{
      font-size:2.5rem;
      margin-bottom:1rem;
    }

    .feature-item h4{
      color:var(--gold2);
      margin-bottom:.5rem;
      font-size:1.1rem;
    }

    .feature-item p{
      color:rgba(255,255,255,.6);
      font-size:.85rem;
    }

    /* About Section */
    .about-section{
      background: linear-gradient(180deg, transparent, rgba(215,162,58,0.03));
    }

    .about-intro{
      font-size:1.15rem;
      color:rgba(255,255,255,.85);
      line-height:1.8;
      text-align:center;
      max-width:800px;
      margin:0 auto 50px;
    }

    .about-credentials{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
      gap:30px;
      margin-bottom:50px;
    }

    .credential-card{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(215,162,58,.2);
      border-radius:16px;
      padding:30px;
      transition:all .3s;
    }

    .credential-card:hover{
      border-color:rgba(215,162,58,.4);
      box-shadow:0 10px 40px rgba(0,0,0,.3);
    }

    .credential-card h4{
      color:var(--gold2);
      font-size:1.4rem;
      margin-bottom:8px;
    }

    .credential-title{
      color:var(--gold3);
      font-size:1rem;
      margin-bottom:20px;
      font-weight:600;
    }

    .credential-card ul{
      list-style:none;
      margin-bottom:20px;
    }

    .credential-card li{
      color:rgba(255,255,255,.8);
      padding:8px 0;
      padding-left:24px;
      position:relative;
      font-size:.95rem;
    }

    .credential-card li::before{
      content:"★";
      position:absolute;
      left:0;
      color:var(--gold3);
    }

    .credential-card li strong{
      color:var(--gold1);
    }

    .credential-note{
      color:rgba(255,255,255,.6);
      font-size:.9rem;
      font-style:italic;
      line-height:1.6;
      border-top:1px solid rgba(255,255,255,.1);
      padding-top:15px;
      margin-top:10px;
    }

    .about-philosophy{
      background:rgba(215,162,58,.05);
      border:1px solid rgba(215,162,58,.2);
      border-radius:12px;
      padding:30px;
      text-align:center;
    }

    .about-philosophy h4{
      color:var(--gold2);
      font-size:1.2rem;
      margin-bottom:15px;
    }

    .about-philosophy p{
      color:rgba(255,255,255,.8);
      font-size:1.05rem;
      line-height:1.7;
      max-width:700px;
      margin:0 auto;
    }

    /* Contact Section */
    .contact-section{
      text-align:center;
    }

    .contact-content{
      display:flex;
      justify-content:center;
    }

    .contact-card{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(215,162,58,.2);
      border-radius:16px;
      padding:40px 60px;
      transition:all .3s;
    }

    .contact-card:hover{
      border-color:rgba(215,162,58,.4);
    }

    .contact-icon{
      font-size:3rem;
      margin-bottom:15px;
    }

    .contact-card h4{
      color:var(--gold2);
      font-size:1.2rem;
      margin-bottom:15px;
    }

    .contact-card a{
      color:var(--gold1);
      font-size:1.3rem;
      text-decoration:none;
      font-weight:600;
      display:block;
      margin-bottom:10px;
      transition:color .3s;
    }

    .contact-card a:hover{
      color:#fff;
    }

    .contact-card p{
      color:rgba(255,255,255,.5);
      font-size:.9rem;
    }

    /* Footer */
    footer{
      background:rgba(0,0,0,.5);
      border-top:1px solid rgba(215,162,58,.15);
      padding:60px 24px 30px;
      margin-top:80px;
    }

    .footer-content{
      max-width:1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
      gap:3rem;
    }

    .footer-col h4{
      color:var(--gold2);
      margin-bottom:1rem;
      font-size:1rem;
      text-transform:uppercase;
      letter-spacing:.1em;
    }

    .footer-col a{
      display:block;
      color:rgba(255,255,255,.6);
      text-decoration:none;
      padding:.4rem 0;
      font-size:.9rem;
      transition:color .3s;
    }

    .footer-col a:hover{
      color:var(--gold2);
    }

    .footer-bottom{
      max-width:1200px;
      margin:40px auto 0;
      padding-top:30px;
      border-top:1px solid rgba(255,255,255,.1);
      text-align:center;
      color:rgba(255,255,255,.4);
      font-size:.85rem;
    }

    /* Medium screens */
    @media(max-width:1300px){
      .hero-container{
        grid-template-columns: 300px 1fr;
        gap: 40px;
      }
      .hero-logo-container{
        width: 280px;
        height: 280px;
      }
    }

    @media(max-width:1100px){
      .hero-container{
        grid-template-columns: 260px 1fr;
        gap: 30px;
      }
      .hero-logo-container{
        width: 240px;
        height: 240px;
      }
      .heroGold3D{
        font-size: clamp(24px, 4vw, 52px);
      }
    }

    /* Mobile */
    @media(max-width:900px){
      .hero-container{
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }
      .hero-logo-side{
        order: 1;
      }
      .hero-text-side{
        order: 2;
        text-align: center;
      }
      .hero-logo-container{
        width: 250px;
        height: 250px;
      }
      .hero-buttons{
        justify-content: center;
      }
    }

    @media(max-width:768px){
      .nav{
        padding:1rem;
        justify-content:space-between;
      }
      .hamburger{
        display:flex;
      }
      .nav-links{
        display:none;
        position:fixed;
        top:56px;
        left:0;
        right:0;
        background:rgba(5,6,8,0.98);
        flex-direction:column;
        padding:20px;
        gap:0;
        border-bottom:1px solid rgba(215,162,58,.2);
        z-index:1000;
      }
      .nav-links.active{
        display:flex;
      }
      .nav-links li{
        border-bottom:1px solid rgba(255,255,255,0.05);
      }
      .nav-links a{
        display:block;
        padding:15px 10px;
        font-size:1rem;
      }
      .nav-logins{
        margin-left:auto;
        margin-right:10px;
        gap:10px;
      }
      .nav-login-btn{
        padding:5px 12px 5px 5px;
      }
      .nav-login-btn .btn-logo{
        width:28px;
        height:28px;
      }
      .nav-login-btn .btn-text{
        font-size:0.75rem;
      }
      .hero{
        padding:100px 16px 60px;
      }
      .hero-logo-container{
        width: 220px;
        height: 220px;
      }
      .heroGold3D{
        font-size: clamp(28px, 7vw, 42px);
      }
      div.tda-corner-logo{
        top:65px !important;
        right:16px !important;
        width:60px !important;
        height:60px !important;
      }
      .hero-buttons{
        flex-direction:column;
        align-items:center;
      }
      .btn{
        width:100%;
        max-width:300px;
        justify-content:center;
      }
      .login-cards{
        flex-wrap:wrap;
        justify-content:center;
        margin-top:30px;
      }
      .login-card{
        flex:1;
        min-width:250px;
        max-width:320px;
      }
      .login-card-logo{
        width:60px;
        height:60px;
      }
      .synergy-diagram{
        gap:20px;
      }
      .synergy-logo{
        width:70px;
        height:70px;
      }
      .synergy-arrow{
        font-size:1.5rem;
      }
      .synergy-product span{
        font-size:0.9rem;
      }
      .product-logo-circle{
        width:100px;
        height:100px;
      }
      section{
        padding:60px 16px;
      }
    }