@font-face{font-family:'DM Sans';src:url('/public/fonts/dm-sans.ttf') format('truetype');font-weight:100 900;font-display:swap;}
@font-face{font-family:'Manrope';src:url('/public/fonts/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap;}
body{margin:0;}

  #approved-home {
    --purple: #4A2E83;
    --purple-dark: #3A2266;
    --purple-light: #F6F0FC;
    --navy: #1F2A43;
    --gold: #FFD544;
    --gold-dark: #E8B800;
    --ink: #17131F;
    --muted: #6B6478;
    --section-bg: #F9F8FB;
    --card-purple: #4A2E83;
    --white: #FFFFFF;
    --border-soft: #E7E1F0;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --shadow-soft: 0 20px 45px -20px rgba(74,46,131,0.35);
    --shadow-card: 0 10px 30px -12px rgba(23,19,31,0.15);
    --maxw: 1180px;
  }

  #approved-home {
  }
  @media (prefers-color-scheme: dark) {
    #approved-home {
      --section-bg: #F9F8FB;
    }
  }
  #approved-home {
    --section-bg: #F9F8FB;
  }

  #approved-home * { box-sizing: border-box; }
  #approved-home, #approved-home { margin:0; padding:0; overflow-x:hidden; background:var(--white); }
  #approved-home {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  #approved-home h1,#approved-home h2,#approved-home h3 {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-weight: 800;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  #approved-home p { margin:0; }
  #approved-home img { max-width:100%; display:block; }
  #approved-home a { text-decoration:none; color:inherit; }
  #approved-home button { font-family:inherit; cursor:pointer; border:none; }

  #approved-home .wrap { max-width: var(--maxw); margin:0 auto; padding: 0 32px; }

  /* ---------- Buttons ---------- */
  #approved-home .btn {
    display:inline-flex; align-items:center; gap:8px;
    padding: 15px 26px;
    border-radius: 12px;
    font-weight:700;
    font-size:15px;
    white-space:nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  #approved-home .btn:hover { transform: translateY(-1px); }
  #approved-home .btn-primary { background: var(--purple); color:#fff; box-shadow: var(--shadow-soft); }
  #approved-home .btn-primary:hover { background: var(--purple-dark); }
  #approved-home .btn-outline { background:#fff; color:var(--purple); border:1.5px solid var(--border-soft); }
  #approved-home .btn-outline:hover { border-color:var(--purple); }
  #approved-home .btn-gold { background: var(--gold); color: var(--navy); }
  #approved-home .btn-gold:hover { background: var(--gold-dark); }

  /* ---------- Hero ---------- */
  #approved-home .hero { padding: 88px 0 64px; }
  #approved-home .hero-grid {
    display:grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 8px; align-items:center;
    grid-template-areas: "heading visual" "body visual";
  }
  #approved-home .hero-heading { grid-area: heading; }
  #approved-home .hero-body { grid-area: body; }
  #approved-home .hero-visual { grid-area: visual; }
  #approved-home .eyebrow {
    font-family:'Manrope',sans-serif; font-weight:800; font-size:13px;
    letter-spacing: 0.06em; color: var(--purple); margin-bottom: 22px;
  }
  #approved-home .hero h1 { font-size: 52px; line-height:1.08; margin-bottom:22px; }
  #approved-home .hero-sub { font-size:17px; color:var(--muted); max-width: 480px; margin-bottom:32px; line-height:1.6; }
  #approved-home .hero-ctas { display:flex; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
  #approved-home .hero-trust { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-bottom:14px; }
  #approved-home .hero-trust .dot { width:7px; height:7px; border-radius:50%; background:var(--gold-dark); flex-shrink:0; }
  #approved-home .pill-row { display:flex; gap:10px; flex-wrap:wrap; }
  #approved-home .pill {
    font-size:13px; font-weight:700; color:var(--purple);
    background: var(--purple-light); border:1px solid #E4D6F5;
    padding:7px 14px; border-radius:999px;
  }

  /* Hero visual */
  #approved-home .hero-visual { position:relative; height: 560px; }
  #approved-home .polaroid {
    position:absolute; width: 210px; border-radius:16px; background:#fff;
    box-shadow: var(--shadow-card); padding:6px 6px 0 6px; overflow:hidden;
  }
  #approved-home .polaroid img { width:100%; height:260px; object-fit:cover; border-radius:10px; display:block; }
  #approved-home .polaroid .cap {
    position:absolute; left:16px; right:16px; bottom:14px;
    background:#fff; border-radius:10px; padding:9px 12px;
    box-shadow: 0 8px 20px -8px rgba(23,19,31,0.25);
  }
  #approved-home .polaroid .cap .name { font-weight:700; font-size:13px; display:flex; align-items:center; gap:4px; }
  #approved-home .polaroid .cap .name svg { width:13px; height:13px; flex-shrink:0; }
  #approved-home .polaroid .cap .sub { font-size:11.5px; color:var(--muted); margin-top:1px; }

  #approved-home .p1 { top: 0; left: 0; transform: rotate(-4deg); z-index:3; }
  #approved-home .p1 img { height: 300px; }
  #approved-home .p2 { top: 210px; right: 90px; transform: rotate(3deg); z-index:2; width:190px; }
  #approved-home .p2 img { height:240px; }
  #approved-home .p3 { top: 330px; left: 10px; transform: rotate(-2deg); z-index:4; width:185px; }
  #approved-home .p3 img { height:230px; }

  #approved-home .search-card {
    position:absolute; top: 30px; right: 0; width: 300px;
    background:#fff; border-radius: 20px; padding: 24px;
    box-shadow: 0 30px 60px -20px rgba(23,19,31,0.28);
    z-index:5;
  }
  #approved-home .search-card .sc-eyebrow { font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--purple); margin-bottom:8px; }
  #approved-home .search-card h3 { font-size:19px; line-height:1.25; margin-bottom:8px; }
  #approved-home .search-card .sc-desc { font-size:12.5px; color:var(--muted); margin-bottom:16px; line-height:1.5; }
  #approved-home .search-card label { font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--muted); display:block; margin-bottom:6px; }
  #approved-home .search-card .field { margin-bottom:14px; }
  #approved-home .search-card select {
    width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border-soft);
    font-family:inherit; font-size:13px; color: var(--ink); background:#fff;
    appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6478' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 12px center;
  }
  #approved-home .field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #approved-home .search-card .field-row { margin-bottom:18px; }
  #approved-home .search-btn {
    width:100%; background: linear-gradient(90deg,#6B3FC7,var(--purple)); color:#fff;
    padding:13px; border-radius:11px; font-weight:700; font-size:13.5px;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }

  /* ---------- Ticker ---------- */
  #approved-home .ticker {
    background: var(--purple); padding: 20px 0; overflow:hidden;
  }
  #approved-home .ticker-inner {
    display:flex; justify-content:center; align-items:center; gap:48px; flex-wrap:wrap;
  }
  #approved-home .ticker span { color:#fff; font-weight:800; font-size:13px; letter-spacing:.08em; font-family:'Manrope',sans-serif; }
  #approved-home .ticker .star { color: var(--gold); font-size:13px; }

  /* ---------- Why TaranQ ---------- */
  #approved-home .why { padding: 96px 0 72px; }
  #approved-home .why-grid {
    display:grid; grid-template-columns: 1.1fr 0.9fr; column-gap:64px; row-gap:6px; align-items:center; position:relative;
    grid-template-areas: "heading photo" "body photo";
  }
  #approved-home .why-heading { grid-area: heading; }
  #approved-home .why-body { grid-area: body; }
  #approved-home .why h2 { font-size:38px; line-height:1.15; margin-bottom:26px; }
  #approved-home .why p { color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:18px; }
  #approved-home .why-glow {
    position:absolute; width: 420px; height:420px; right:-110px; bottom:-160px;
    background-image: var(--approved_why_texture); background-size:contain; background-repeat:no-repeat;
    pointer-events:none; z-index:0;
  }
  #approved-home .why-photo {
    background: var(--gold); border-radius: var(--radius-lg);
    padding: 18px; position:relative; z-index:1; grid-area: photo;
  }
  #approved-home .why-photo img { border-radius: 20px; width:100%; aspect-ratio:1/1; object-fit:cover; }

  #approved-home .brands-block { margin-top: 72px; }
  #approved-home .brands-block .eyebrow { margin-bottom: 10px; }
  #approved-home .brands-block h3 { font-size:28px; margin-bottom:34px; }
  #approved-home .brand-row {
    display:flex; align-items:center; gap:48px; flex-wrap:wrap; margin-bottom:36px;
    padding-bottom: 32px; border-bottom: 1px solid var(--border-soft);
  }
  #approved-home .brand-row img { height: 46px; width:auto; object-fit:contain; opacity:0.92; }

  /* ---------- How We Work ---------- */
  #approved-home .howwework { background: var(--section-bg); padding: 88px 0; }
  #approved-home .howwework h2 { font-size:36px; text-align:center; margin-bottom:48px; }
  #approved-home .hww-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  #approved-home .hww-card {
    background: var(--card-purple); border-radius: var(--radius-md);
    padding: 28px 26px; display:flex; align-items:center; gap:22px;
    color:#fff;
  }
  #approved-home .hww-card .icon {
    width:56px; height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  #approved-home .hww-card .icon svg { width:44px; height:44px; }
  #approved-home .hww-card .text-col { flex:1; }
  #approved-home .hww-card h4 { font-family:'Manrope',sans-serif; font-weight:800; font-size:16px; margin:12px 0 0; }
  #approved-home .hww-card p { font-size:13.5px; line-height:1.55; color: rgba(255,255,255,0.88); order:-1; margin-bottom:2px; }
  #approved-home .hww-card .stack { display:flex; flex-direction:column; }

  /* ---------- Categories ---------- */
  #approved-home .categories { padding: 96px 0 88px; position:relative; overflow:visible; }
  #approved-home .cat-head { text-align:center; margin-bottom: 56px; position:relative; }
  #approved-home .cat-head h2 { font-size:38px; margin-bottom:14px; }
  #approved-home .cat-head p { color:var(--muted); font-size:16px; }
  #approved-home .washi {
    position:absolute; width:70px; height:70px; opacity:0.9; z-index:0;
    background-image: radial-gradient(circle, #E8B800 1.6px, transparent 1.6px);
    background-size: 9px 9px;
    background-color: rgba(255,213,68,0.35);
  }
  #approved-home .washi-1 { top:-30px; right: 60px; transform: rotate(18deg); }
  #approved-home .washi-2 { top: 330px; left: -10px; transform: rotate(-12deg); }

  #approved-home .cat-grid {
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position:relative; z-index:1;
  }
  #approved-home .cat-card {
    background: var(--purple-light); border-radius: var(--radius-md);
    padding: 14px; text-align:center;
  }
  #approved-home .cat-card img { width:100%; aspect-ratio: 6/5; object-fit:cover; border-radius: 14px; margin-bottom:14px; }
  #approved-home .cat-card h4 { font-family:'Manrope',sans-serif; font-weight:800; color:var(--purple); font-size:15.5px; line-height:1.3; margin-bottom:5px; }
  #approved-home .cat-card .range { font-size:13px; color: var(--purple); opacity:0.75; }

  /* ---------- Pilot campaign ---------- */
  #approved-home .pilot { padding: 88px 0; }
  #approved-home .pilot-grid {
    display:grid; grid-template-columns: 1.05fr 0.95fr; column-gap:60px; row-gap:6px; align-items:center; position:relative;
    grid-template-areas: "heading photo" "body photo";
  }
  #approved-home .pilot-heading { grid-area: heading; }
  #approved-home .pilot-body { grid-area: body; }
  #approved-home .pilot h2 { font-size:38px; line-height:1.15; margin-bottom:14px; }
  #approved-home .pilot .lede { font-size:18px; font-weight:700; color: var(--ink); margin-bottom:22px; }
  #approved-home .pilot p.body { color:var(--muted); font-size:15.5px; line-height:1.7; margin-bottom:16px; }
  #approved-home .pilot-glow {
    position:absolute; width: 440px; height:440px; right:-130px; bottom:-170px;
    background-image: var(--approved_pilot_texture); background-size:contain; background-repeat:no-repeat;
    pointer-events:none; z-index:0;
  }
  #approved-home .pilot-photo { position:relative; z-index:1; grid-area: photo; }
  #approved-home .pilot-photo img { border-radius: var(--radius-lg); width:100%; aspect-ratio:1/1; object-fit:cover; box-shadow: var(--shadow-card); }

  /* ---------- Final CTA ---------- */
  #approved-home .final-cta { padding: 0 0 96px; }
  #approved-home .cta-banner {
    background: var(--purple); border-radius: var(--radius-lg);
    padding: 56px 64px; display:flex; align-items:center; justify-content:space-between; gap:40px;
    flex-wrap:wrap;
  }
  #approved-home .cta-banner .eyebrow { color: var(--gold); margin-bottom:16px; }
  #approved-home .cta-banner h2 { color:#fff; font-size:34px; margin-bottom:14px; max-width:480px; }
  #approved-home .cta-banner p { color: rgba(255,255,255,0.82); font-size:15.5px; max-width:440px; margin-bottom:26px; line-height:1.6; }
  #approved-home .cta-photo {
    width:170px; height:170px; flex-shrink:0;
  }
  #approved-home .cta-photo img { width:100%; height:100%; object-fit:contain; }

  /* ---------- Footer ---------- */
  #approved-home footer { background: var(--navy); padding: 64px 0 28px; }
  #approved-home .footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.1); }
  #approved-home .footer-logo img { height: 30px; margin-bottom:16px; }
  #approved-home .footer-top p { color: rgba(255,255,255,0.55); font-size:14px; line-height:1.6; max-width:280px; }
  #approved-home .footer-col h5 { color:#fff; font-family:'Manrope',sans-serif; font-size:14px; font-weight:800; margin-bottom:18px; }
  #approved-home .footer-col a { display:block; color: rgba(255,255,255,0.6); font-size:14px; margin-bottom:13px; transition:color .15s; }
  #approved-home .footer-col a:hover { color:#fff; }
  #approved-home .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:10px; }
  #approved-home .footer-bottom span { color: rgba(255,255,255,0.45); font-size:13px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    #approved-home .wrap { padding: 0 20px; }
    #approved-home .hero-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "visual" "body"; row-gap: 4px; }
    #approved-home .why-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "photo" "body"; row-gap: 26px; }
    #approved-home .pilot-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "photo" "body"; row-gap: 26px; }
    #approved-home .hero { padding: 56px 0 40px; }
    #approved-home .hero h1 { font-size:38px; }

    /* Hero visual: switch from absolute-positioned desktop collage to a
       normal-flow horizontal-scroll row, so height always fits content
       and nothing can overflow into the section below. */
    #approved-home .hero-visual {
      position:static; height:auto; margin: 24px 0 4px;
      display:flex; gap:14px; overflow-x:auto; overflow-y:visible;
      padding-bottom:6px; -webkit-overflow-scrolling:touch;
    }
    #approved-home .search-card { display:none; }
    #approved-home .polaroid {
      position:relative; transform:none; width:150px; flex:0 0 auto;
      padding:6px 6px 60px 6px;
    }
    #approved-home .p1, #approved-home .p2, #approved-home .p3 { top:auto; left:auto; right:auto; bottom:auto; width:150px; }
    #approved-home .polaroid img { height:190px; }
    #approved-home .polaroid .cap { position:absolute; left:14px; right:14px; bottom:12px; }

    #approved-home .why h2, #approved-home .cat-head h2, #approved-home .pilot h2 { font-size:28px; }
    #approved-home .hww-grid { grid-template-columns: 1fr; }
    #approved-home .cat-grid { grid-template-columns: repeat(2, 1fr); }
    #approved-home .cta-banner { padding: 40px 28px; }
    #approved-home .cta-banner h2 { font-size:26px; }
    #approved-home .footer-top { grid-template-columns: 1fr 1fr; gap:32px; }
    #approved-home .footer-top > div:first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) {
    #approved-home .cat-grid { grid-template-columns: 1fr 1fr; gap:14px; }
    #approved-home .brand-row { gap:28px; justify-content:center; }
    #approved-home .brand-row img { height:36px; }
    #approved-home .cta-banner { flex-direction:column; align-items:flex-start; }
    #approved-home .footer-top { grid-template-columns: 1fr; }
  }