/*
Theme Name: Denswis Pharmaceuticals
Theme URI: https://example.com
Author: ChatGPT
Description: Custom WordPress theme for Denswis Pharmaceuticals Pvt. Ltd.
Version: 1.0
*/

:root {
      --navy:    #0D2B45;
      --blue:    #1E5AA8;
      --green:   #28A745;
      --lgreen:  #8CC63E;
      --light:   #E9F1F7;
      --white:   #ffffff;
      --text:    #1a2e3b;
      --muted:   #5a7080;
    }

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

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

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--navy);
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 48px;
      box-shadow: 0 2px 16px rgba(13,43,69,.4);
    }
    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .nav-logo svg { width: 40px; height: 40px; }
    .nav-brand { color: var(--white); font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; }
    .nav-links { display: flex; gap: 28px; list-style: none; }
    .nav-links a { color: #a8c8e8; font-size: .85rem; font-weight: 500; text-decoration: none; transition: color .2s; }
    .nav-links a:hover { color: var(--lgreen); }
    .nav-cta {
      background: var(--green); color: var(--white);
      padding: 9px 22px; border-radius: 50px; font-size: .85rem; font-weight: 600;
      text-decoration: none; transition: background .2s;
    }
    .nav-cta:hover { background: var(--lgreen); }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(135deg, var(--navy) 0%, #1a3d5c 50%, #0e2235 100%);
      padding: 90px 48px 80px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; top: -80px; right: -80px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(40,167,69,.12) 0%, transparent 70%);
      border-radius: 50%;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      color: var(--lgreen); font-size: .75rem; font-weight: 600; letter-spacing: 1.5px;
      padding: 6px 16px; border-radius: 50px; margin-bottom: 22px; text-transform: uppercase;
    }
    .hero h1 {
      font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; color: var(--white);
      line-height: 1.15; margin-bottom: 10px;
    }
    .hero h1 span { color: var(--lgreen); }
    .hero p {
      color: #a8c8e8; font-size: 1rem; line-height: 1.75;
      margin-bottom: 36px; max-width: 480px;
    }
    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .btn-primary {
      background: var(--green); color: var(--white);
      padding: 13px 28px; border-radius: 50px; font-size: .9rem; font-weight: 600;
      text-decoration: none; transition: all .2s; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-primary:hover { background: var(--lgreen); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(40,167,69,.4); }
    .btn-outline {
      background: transparent; color: var(--white);
      padding: 13px 28px; border-radius: 50px; font-size: .9rem; font-weight: 600;
      text-decoration: none; border: 2px solid rgba(255,255,255,.3);
      transition: all .2s; display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

    /* hero image panel */
    .hero-visual {
      background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 24px; padding: 36px;
      backdrop-filter: blur(10px);
      animation: floatUp .8s ease both;
    }
    @keyframes floatUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
    .hero-tagline {
      font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: 6px;
    }
    .hero-tagline span { color: var(--lgreen); }
    .hero-sub { color: #a8c8e8; font-size: .85rem; line-height: 1.65; margin-bottom: 28px; }
    .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .stat-card {
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px; padding: 18px 16px;
    }
    .stat-num { font-size: 1.6rem; font-weight: 800; color: var(--lgreen); }
    .stat-lbl { font-size: .72rem; color: #a8c8e8; margin-top: 3px; font-weight: 500; }

    /* ── SECTION SHARED ── */
    section { padding: 70px 48px; }
    .section-tag {
      display: inline-block;
      background: var(--navy); color: var(--white);
      font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      padding: 5px 14px; border-radius: 4px; margin-bottom: 16px;
    }
    .section-tag.green { background: var(--green); }
    .section-title { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.25; }
    .section-title span { color: var(--green); }
    .section-sub { color: var(--muted); font-size: .95rem; line-height: 1.7; max-width: 560px; }

    /* ── BRAND STORY ── */
    .story {
      background: var(--light);
      display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    }
    .story-text p {
      color: var(--muted); font-size: .9rem; line-height: 1.8; margin-bottom: 14px;
    }
    .story-visual {
      border-radius: 20px; overflow: hidden;
      background: linear-gradient(135deg, var(--navy), var(--blue));
      padding: 40px; display: flex; flex-direction: column; gap: 20px;
      box-shadow: 0 20px 50px rgba(13,43,69,.2);
    }
    .story-icon-row { display: flex; gap: 16px; flex-wrap: wrap; }
    .s-icon {
      background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
      border-radius: 12px; padding: 16px 20px; text-align: center; flex: 1; min-width: 90px;
    }
    .s-icon .emoji { font-size: 1.6rem; }
    .s-icon .lbl { color: var(--white); font-size: .72rem; font-weight: 600; margin-top: 6px; }

    /* ── PRODUCT POSITIONING ── */
    .positioning { background: var(--white); }
    .pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 40px; }
    .pos-card {
      border: 1.5px solid #e0ecf5; border-radius: 16px; padding: 28px 24px;
      transition: all .25s; background: var(--white);
    }
    .pos-card:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(40,167,69,.12); }
    .pos-card .icon-wrap {
      width: 48px; height: 48px; border-radius: 12px;
      background: var(--light); display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px; font-size: 1.4rem;
    }
    .pos-card h4 { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
    .pos-card p { font-size: .82rem; color: var(--muted); line-height: 1.65; }

    /* ── TRUST BUILDING ── */
    .trust-section { background: var(--light); }
    .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 40px; }
    .trust-card {
      background: var(--white); border-radius: 16px; overflow: hidden;
      box-shadow: 0 4px 16px rgba(13,43,69,.07); transition: transform .25s;
    }
    .trust-card:hover { transform: translateY(-4px); }
    .trust-img {
      height: 140px; width: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 3rem;
    }
    .trust-img.sci { background: linear-gradient(135deg, #e8f4fd, #cce4f6); }
    .trust-img.qual { background: linear-gradient(135deg, #e8f7ee, #c3ecd1); }
    .trust-img.exp { background: linear-gradient(135deg, #e8f4fd, #cce4f6); }
    .trust-img.pat { background: linear-gradient(135deg, #fef0e8, #fcd8bc); }
    .trust-img.gmp { background: linear-gradient(135deg, #0D2B45, #1E5AA8); color: var(--white); font-size: 1.1rem; font-weight: 800; letter-spacing: 2px; }
    .trust-body { padding: 18px 16px; }
    .trust-body h4 { font-size: .85rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
    .trust-body p { font-size: .78rem; color: var(--muted); line-height: 1.6; }

    /* ── SCIENTIFIC CREDIBILITY ── */
    .cred-section {
      background: var(--navy);
      display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    }
    .cred-list { display: flex; flex-direction: column; gap: 22px; }
    .cred-item { display: flex; align-items: flex-start; gap: 16px; }
    .cred-icon {
      width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    }
    .cred-item h4 { font-size: .9rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
    .cred-item p { font-size: .78rem; color: #a8c8e8; line-height: 1.6; }
    .trust-banner {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
      border-radius: 20px; padding: 40px; text-align: center;
    }
    .trust-banner .shield { font-size: 4rem; margin-bottom: 16px; }
    .trust-banner h2 { font-size: 2.4rem; font-weight: 800; color: var(--lgreen); line-height: 1.1; margin-bottom: 8px; }
    .trust-banner h2 span { color: var(--white); font-size: 1.1rem; font-weight: 500; display: block; margin-top: 4px; }
    .trust-banner p { font-size: .85rem; color: #a8c8e8; line-height: 1.7; margin-top: 16px; }

    /* ── BRAND IDENTITY ── */
    .identity-section { background: var(--white); }
    .identity-grid { display: grid; grid-template-columns: 1fr 1.5fr 1.2fr; gap: 40px; margin-top: 40px; }
    .identity-about { }
    .identity-about p { color: var(--muted); font-size: .88rem; line-height: 1.75; }
    .pillars { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
    .pillar-chip {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--light); border: 1px solid #d0e4f0; border-radius: 50px;
      padding: 8px 16px; font-size: .82rem; font-weight: 600; color: var(--navy);
      width: fit-content;
    }

    .colors-block h3, .fonts-block h3 { font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--navy); margin-bottom: 16px; }
    .swatches { display: flex; gap: 10px; flex-wrap: wrap; }
    .swatch { border-radius: 10px; overflow: hidden; width: 60px; }
    .swatch-color { height: 50px; }
    .swatch-hex { font-size: .6rem; font-weight: 600; text-align: center; padding: 4px; background: var(--light); color: var(--muted); }

    .font-demo { margin-bottom: 16px; }
    .font-aa { font-size: 2.2rem; color: var(--navy); line-height: 1; }
    .font-aa.bold { font-weight: 600; }
    .font-aa.regular { font-weight: 400; }
    .font-name { font-size: .72rem; color: var(--muted); margin-top: 4px; font-weight: 500; }

    /* ── VALUES STRIP ── */
    .values-strip {
      background: var(--light);
      display: flex; justify-content: center; gap: 0; flex-wrap: wrap;
      padding: 0;
    }
    .val-item {
      flex: 1; min-width: 160px;
      padding: 30px 20px; text-align: center;
      border-right: 1px solid #d0e4f0;
      transition: background .2s;
    }
    .val-item:last-child { border-right: none; }
    .val-item:hover { background: rgba(40,167,69,.06); }
    .val-item .v-icon { font-size: 1.8rem; margin-bottom: 10px; }
    .val-item .v-name { font-size: .85rem; font-weight: 700; color: var(--navy); }

    /* ── FOOTER ── */
    footer {
      background: var(--navy);
      padding: 36px 48px;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
    }
    .footer-brand { display: flex; align-items: center; gap: 12px; }
    .footer-brand-name { color: var(--white); font-size: 1rem; font-weight: 700; letter-spacing: 2px; }
    .footer-brand-tag { color: #a8c8e8; font-size: .75rem; margin-top: 2px; }
    .footer-pills { display: flex; gap: 10px; flex-wrap: wrap; }
    .footer-pill {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      border-radius: 50px; padding: 8px 18px;
      color: var(--white); font-size: .78rem; font-weight: 500;
    }
    .footer-pill .dot { width: 6px; height: 6px; background: var(--lgreen); border-radius: 50%; }
    .footer-copy { color: #6a8fa8; font-size: .72rem; text-align: right; }

    /* ANIMATIONS */
    @keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
    .animate { animation: fadeInUp .6s ease both; }
    .delay-1 { animation-delay: .1s; }
    .delay-2 { animation-delay: .2s; }
    .delay-3 { animation-delay: .3s; }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      nav { padding: 12px 24px; }
      .nav-links { display: none; }
      .hero, .story, .cred-section { grid-template-columns: 1fr; }
      .identity-grid { grid-template-columns: 1fr; }
      section { padding: 50px 24px; }
      footer { flex-direction: column; text-align: center; padding: 28px 24px; }
      .footer-copy { text-align: center; }
    }