/* ==========================================================================
     WafiSoftware — landing-page art direction layer
     ==========================================================================
     styles.css owns layout/behaviour; this file owns the *look*. The page is
     light throughout and takes its colours from the logo: white and pale
     indigo bands, navy ink, the logo indigo for links, buttons and icons, and
     the logo coral only as a small non-text accent. Almost every box on the
     page carries an inline style attribute, so anything that has to win over
     one is written with !important.
     ========================================================================== */

  [data-wafi-root]{
    --wf-tint:          #F6F7FB;
    --wf-tint-deep:     #EEF0F8;
    --wf-navy:          #1F2B5C;
    --wf-primary:       #4C5D9C;   /* logo indigo */
    --wf-primary-dark:  #3E4D86;
    --wf-coral:         #FE6347;   /* logo coral — accents only, never text */
  }

  /* ==========================================================================
     1 · BAND RHYTHM — white / pale indigo, nothing dark
     ========================================================================== */
  #top,#industries,#tour,#ai-studio,#support,#pricing,#cta{position:relative;}

  #top       {background:linear-gradient(180deg,var(--wf-tint-deep) 0%,#FFFFFF 100%)!important;}
  #industries{background:#FFFFFF!important;}
  #tour      {background:var(--wf-tint)!important;border-top:0!important;border-bottom:0!important;}
  #ai-studio {background:#FFFFFF!important;}
  #support   {background:var(--wf-tint)!important;border-top:0!important;border-bottom:0!important;}
  #pricing   {background:#FFFFFF!important;border-top:0!important;border-bottom:0!important;}
  #cta       {background:#FFFFFF;}

  #support>div>div:last-child{margin-top:64px!important;}

  /* ==========================================================================
     2 · SECTION TYPOGRAPHY
     Eyebrow = small indigo caps after a coral dot. Headings are one solid navy weight.
     ========================================================================== */
  [data-eyebrow]{
    color:var(--wf-primary)!important;
    letter-spacing:.12em!important;
    font-weight:700!important;
    font-size:12px!important;
  }
  /* the logo's coral spark, as a small dot ahead of every eyebrow */
  [data-eyebrow]::before{
    content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--wf-coral);margin-right:8px;vertical-align:2px;
  }
  [data-h-light]{font-weight:inherit;color:inherit;}
  [data-heading]{margin-bottom:0!important;}
  [data-heading]+p{margin-top:14px!important;}

  /* the accent words in the hero headline */
  [data-hl]{color:var(--wf-primary)!important;}

  /* ==========================================================================
     3 · HERO
     ========================================================================== */
  #top>div:last-child{padding-top:76px!important;padding-bottom:88px!important;}
  #top h1{color:var(--wf-navy)!important;}

  /* a soft indigo-to-coral panel behind the product window */
  [data-hero-stack]{position:relative;}
  [data-hero-plate]{
    position:absolute;inset:24px -22px -22px 22px;
    background:linear-gradient(135deg,#E1E5F4 0%,#EEF0F8 60%,#FFE9E3 100%);
    border-radius:28px;z-index:0;
  }
  #top [data-hero-win]{position:relative;z-index:1;border-radius:18px!important;box-shadow:0 30px 60px -30px rgba(31,43,92,.28)!important;}
  #top [data-fitwrap]{position:relative;z-index:1;}

  /* ==========================================================================
     3b · CLIENT LOGOS — a slow marquee of equal tiles under the hero
     Every logo is trimmed to its artwork, so one max box per shape keeps
     their optical weight even: wide wordmarks cap on width, square marks
     get a little more height.
     ========================================================================== */
  #clients{padding:0 24px 24px;background:#fff;}
  .wf-clients-title{
    margin:0 0 22px;text-align:center;
    font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);
  }
  .wf-marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .wf-marquee-track{display:flex;width:max-content;animation:wfMarquee 48s linear infinite;}
  .wf-marquee:hover .wf-marquee-track{animation-play-state:paused;}
  .wf-logos{display:flex;gap:16px;margin:0;padding:0 16px 0 0;list-style:none;}
  .wf-logos li{
    flex:0 0 auto;width:184px;height:92px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--border-card);border-radius:16px;
    transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
  }
  .wf-logos li:hover{border-color:rgba(76,93,156,.28);box-shadow:0 14px 28px -20px rgba(31,43,92,.35);transform:translateY(-2px);}
  .wf-logos img{display:block;width:auto;height:auto;max-width:136px;max-height:46px;}
  .wf-logos li[data-sq] img{max-height:58px;max-width:58px;}
  .wf-logos li[data-wide] img{max-width:162px;}
  @keyframes wfMarquee{to{transform:translateX(-50%);}}

  /* no motion: one static, wrapped grid without the duplicate set */
  @media (prefers-reduced-motion:reduce){
    .wf-marquee{-webkit-mask-image:none;mask-image:none;}
    .wf-marquee-track{animation:none;width:auto;}
    .wf-logos{flex-wrap:wrap;justify-content:center;padding:0;}
    .wf-logos[aria-hidden]{display:none;}
  }

  /* ==========================================================================
     4 · CONTROLS — buttons, nav, cards
     ========================================================================== */
  /* primary CTA: solid indigo pill */
  header [data-register],#top [data-register],#pricing [data-register]{
    background:var(--wf-primary)!important;
    border-radius:999px!important;
    box-shadow:0 10px 24px -12px rgba(76,93,156,.6)!important;
    transition:background var(--dur-micro) var(--ease-out),transform var(--dur-base) var(--ease-out)!important;
  }
  header [data-register]:hover,#top [data-register]:hover,#pricing [data-register]:hover{
    background:var(--wf-primary-dark)!important;
    transform:translateY(-1px);
  }

  /* hero secondary button: white pill */
  #top a[href="#tour"]{border-radius:999px!important;}
  #top a[href="#tour"]:hover{border-color:rgba(76,93,156,.35)!important;}

  /* nav */
  header{
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid var(--border-soft)!important;
    transition:box-shadow var(--dur-base) var(--ease-out);
  }
  html.wf-scrolled header{box-shadow:0 8px 24px -18px rgba(31,43,92,.35)!important;}
  header nav>div:nth-of-type(1)>a{color:var(--ink-700)!important;transition:color var(--dur-micro) var(--ease-out);}
  header nav>div:nth-of-type(1)>a:hover{color:var(--wf-primary)!important;text-decoration:none!important;}

  /* industry cards: gentle lift on hover */
  [data-indcard]{transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)!important;}
  [data-indcard]:hover{transform:translateY(-4px)!important;box-shadow:0 20px 40px -26px rgba(31,43,92,.3)!important;}
  [data-indcard] a[href^="signup.html?industry"] span{transition:transform var(--dur-base) var(--ease-out);}
  [data-indcard]:hover a[href^="signup.html?industry"] span{transform:translateX(4px);}

  /* tour + demo controls */
  [data-action="next"]:hover{transform:translateX(2px);}
  [data-action="prev"]:hover{transform:translateX(-2px);}
  [data-action]{transition:background var(--dur-micro),border-color var(--dur-micro),transform var(--dur-base) var(--ease-out)!important;}

  /* channel medallions */
  #support>div>div:last-child span[style*="border-radius:99px"]{transition:transform var(--dur-base) var(--ease-out);}
  #support>div>div:last-child>div>div:hover span[style*="border-radius:99px"]{transform:translateY(-3px);}

  /* pricing: the plan card is solid indigo, everything else is white */
  #pricing [data-price-card]{
    background:linear-gradient(150deg,#5B6CAB 0%,#3E4D86 100%)!important;
    box-shadow:0 30px 60px -32px rgba(62,77,134,.55)!important;
  }
  #pricing [data-price-card] [data-register]{
    background:#fff!important;color:var(--wf-primary)!important;box-shadow:none!important;
  }
  #pricing [data-price-card] [data-register]:hover{background:#F2F6FF!important;}
  #pricing [data-price-card] > div > div:first-child{background:rgba(255,255,255,.18)!important;}
  #pricing [data-price-card] span[style*="brand-orange-300"]{color:#fff!important;}
  #pricing [data-price-cta-alt]:hover{background:rgba(255,255,255,.16)!important;}
  #pricing [data-addon]{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)!important;}
  #pricing [data-addon]:hover{transform:translateY(-3px);border-color:rgba(76,93,156,.34)!important;box-shadow:0 20px 40px -26px rgba(31,43,92,.3)!important;}

  /* closing CTA: indigo card, white + outline buttons */
  #cta>div{background:linear-gradient(135deg,#5B6CAB 0%,#3E4D86 100%)!important;box-shadow:0 30px 60px -32px rgba(62,77,134,.55);}
  #cta>div>div>div:first-child{background:rgba(255,255,255,.18)!important;}
  #cta p{color:rgba(255,255,255,.85)!important;}
  #cta [data-register]{color:var(--wf-primary)!important;border-radius:999px!important;}
  #cta [data-register]:hover{transform:translateY(-1px);}
  #cta a[href^="https://wa.me"]{
    border-radius:999px!important;background:transparent!important;
    border:1.5px solid rgba(255,255,255,.7)!important;box-shadow:none!important;
  }
  #cta a[href^="https://wa.me"]:hover{background:rgba(255,255,255,.12)!important;}

  /* footer: deep navy, flat */
  footer{background:var(--wf-navy)!important;}
  footer a{transition:color var(--dur-micro) var(--ease-out);}
  footer a:hover{color:#fff!important;text-decoration:none!important;}

  /* ==========================================================================
     5 · SCROLL REVEAL
     reveal.js flags the document with .wf-js before hiding anything, so with
     JavaScript off every block renders in its final state. Motion is kept to
     a short fade-and-rise so the page stays calm.
     ========================================================================== */
  html.wf-js [data-rv]{opacity:0;transform:translateY(20px);}
  html.wf-js [data-rv].wf-in{
    opacity:1;transform:none;
    transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
    transition-delay:var(--rv-d,0ms);
  }
  @media (prefers-reduced-motion:reduce){
    html.wf-js [data-rv]{opacity:1!important;transform:none!important;}
  }

  /* ==========================================================================
     6 · RESPONSIVE
     ========================================================================== */
  @media (max-width:1024px){
    [data-hero-plate]{inset:16px -12px -14px 12px;border-radius:22px;}
  }
  @media (max-width:820px){
    #top>div:last-child{padding-top:48px!important;padding-bottom:56px!important;}
    #clients{padding:0 16px 16px;}
    .wf-logos{gap:12px;padding-right:12px;}
    .wf-logos li{width:148px;height:76px;border-radius:14px;}
    .wf-logos img{max-width:112px;max-height:38px;}
    .wf-logos li[data-sq] img{max-height:48px;max-width:48px;}
    .wf-logos li[data-wide] img{max-width:132px;}
    #support>div>div:last-child{margin-top:44px!important;}
    [data-hero-plate]{inset:10px -8px -10px 8px;}
  }
  @media (max-width:520px){
    [data-hero-plate]{display:none;}
  }