/* ==========================================================================
     WafiSoftware — landing-page art direction layer
     ==========================================================================
     styles.css owns layout/behaviour; this file owns the *look*: the light /
     dark band rhythm, the section rules, the decorative geometry and the
     scroll-reveal choreography. It is loaded last on purpose — almost every
     box on the page carries an inline style attribute, so anything that has
     to win over one is written with !important. Nothing here changes markup
     order, copy or section structure.
     ========================================================================== */

  [data-wafi-root]{
    /* --- warm neutrals: the page no longer alternates white / near-white --- */
    --wf-cream:      #FFF6EB;
    --wf-cream-soft: #FFFBF5;
    --wf-sand:       #F6F1EA;
    --wf-paper:      #FFFFFF;

    /* --- the one deep band + the footer/CTA navy --- */
    --wf-dark:       #0E1730;
    --wf-dark-2:     #172449;

    /* --- accents --- */
    --wf-coral:      #EE6B4D;
    --wf-amber:      #FBBF24;
    --wf-violet:     #7C3AED;

    /* --- the one cold light band, so the warm ones read as warm --- */
    --wf-mist:       #EDF1FA;
    --wf-mist-soft:  #F8FAFF;

    /* --- hero ground: the page's darkest, highest-contrast surface --- */
    --wf-hero-1:     #090F22;
    --wf-hero-2:     #101B3C;
    --wf-hero-3:     #18285C;

    /* --- section separator: one horizontal hairline, no wedge --- */
    --wf-rule:             rgba(11,16,32,.17);
    --wf-rule-accent:      rgba(249,115,22,.55);
    --wf-rule-dark:        rgba(255,255,255,.18);
    --wf-rule-accent-dark: rgba(249,115,22,.78);
  }

  /* ==========================================================================
     1 · BAND RHYTHM
     Read top to bottom the page now runs
     navy → paper → cream → paper → navy → mist → sand → navy,
     which alternates three things at once rather than one: light against
     dark, warm against cool, and flat against gradient. The hero opens on the
     darkest surface on the page, so the product window, the orange plate
     behind it and the primary CTA are the three brightest objects on screen;
     every light band after it is a step down in saturation from that peak.
     ========================================================================== */

  #top,#industries,#tour,#ai-studio,#support,#features,#pricing,#cta{
    position:relative;
  }
  /* raise real content above the decor layer and the diagonal cut
     ([data-deco] is excluded — it is the decor layer) */
  #industries>div:not([data-deco]),#tour>div:not([data-deco]),
  #ai-studio>div:not([data-deco]),#support>div:not([data-deco]),
  #features>div:not([data-deco]),#pricing>div:not([data-deco]),
  #cta>div:not([data-deco]){
    position:relative;z-index:1;
  }

  /* 1 · deep navy — the contrast band the rest of the page is set against */
  #top      {background:linear-gradient(156deg,var(--wf-hero-1) 0%,var(--wf-hero-2) 48%,var(--wf-hero-3) 100%)!important;}
  /* 2 · paper — the hardest possible reset after the navy */
  #industries{background:var(--wf-paper)!important;}
  /* 3 · warm cream */
  #tour     {background:linear-gradient(180deg,var(--wf-cream-soft),var(--wf-cream))!important;border-top:0!important;border-bottom:0!important;}
  /* 4 · paper */
  #ai-studio{background:var(--wf-paper)!important;}
  /* 5 · deep navy */
  #support  {background:linear-gradient(180deg,var(--wf-dark),var(--wf-dark-2))!important;border-top:0!important;border-bottom:0!important;}
  /* 6 · cool mist — the twelve module cards are white, and on paper they had
        only their own hairline border to sit on; a cool ground gives them one */
  #features {background:linear-gradient(180deg,var(--wf-mist),var(--wf-mist-soft))!important;}
  /* 7 · warm sand — swings back to warm for the commercial close */
  #pricing  {background:linear-gradient(180deg,var(--wf-sand),#FBF8F3)!important;border-top:0!important;border-bottom:0!important;}

  /* The deep band's closing block (the channel wall) sits directly on the
     navy — no card, no border. The medallions are light-tinted circles that
     carry themselves against it, so only the heading, the lead and the
     channel labels need re-inking. */
  #support>div>div:last-child{margin-top:64px!important;}
  #support>div>div:last-child h3{color:#fff!important;}
  #support>div>div:last-child h3 [data-h-light]{color:rgba(255,255,255,.58)!important;}
  #support>div>div:last-child>p{color:rgba(255,255,255,.72)!important;}
  #support>div>div:last-child>div>div>span:last-child{color:rgba(255,255,255,.66)!important;}

  /* ==========================================================================
     2 · SECTION SEPARATORS
     Every band closes on a single horizontal hairline. No diagonal wedge and
     no crossing shape: the rule fades out at both gutters and warms to the
     brand orange in the middle, so the seam reads as one clean line and the
     colour change either side of it does the rest of the work.
     ========================================================================== */
  [data-cut]::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--wf-rule) 18%,
      var(--wf-rule-accent) 50%,
      var(--wf-rule) 82%,
      transparent 100%);
    z-index:2;pointer-events:none;
  }
  /* on the deep bands the rule has to come *up* out of the navy */
  #top::after,#support::after{
    background:linear-gradient(90deg,
      transparent 0%,
      var(--wf-rule-dark) 18%,
      var(--wf-rule-accent-dark) 50%,
      var(--wf-rule-dark) 82%,
      transparent 100%);
  }
  /* The closing CTA is a floating card on the page ground rather than a band,
     and the footer already opens on its own accent hairline — a second rule
     between the two would read as a stray line drawn across white space. */
  #cta::after{display:none;}

  /* The wedge used to eat into the bottom gutter and every section was padded
     to compensate. With a hairline they keep their own padding; only the hero
     is topped up, because a dark band needs more air than a light one. */
  #top>div:last-child{padding-bottom:100px!important;}

  /* ==========================================================================
     3 · DECOR LAYER
     One [data-deco] child per section holds the floating geometry. It is
     inert, clipped to the section and never above content.
     ========================================================================== */
  [data-deco]{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}

  .wf-blob{position:absolute;border-radius:50%;filter:blur(64px);}
  .wf-ring{position:absolute;border-radius:50%;border:1.5px solid currentColor;}
  .wf-ring.thick{border-width:14px;}
  .wf-half{position:absolute;border:14px solid currentColor;border-radius:999px;border-right-color:transparent;border-bottom-color:transparent;}
  .wf-dots{position:absolute;background-image:radial-gradient(currentColor 1.5px,transparent 1.5px);background-size:18px 18px;}
  .wf-sq{position:absolute;border-radius:12px;}
  .wf-tri{position:absolute;clip-path:polygon(50% 0,100% 100%,0 100%);}

  @keyframes wfFloatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}
  @keyframes wfFloatX{0%,100%{transform:translate(0,0) rotate(0);}50%{transform:translate(14px,-10px) rotate(8deg);}}
  @keyframes wfSpinSlow{to{transform:rotate(360deg);}}
  @keyframes wfBreathe{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.12);opacity:.75;}}
  @keyframes wfUnderline{from{background-size:0% .38em;}to{background-size:100% .38em;}}
  @keyframes wfSheen{0%{transform:translateX(-120%);}60%,100%{transform:translateX(220%);}}

  .wf-f1{animation:wfFloatY 9s ease-in-out infinite;}
  .wf-f2{animation:wfFloatY 12s ease-in-out infinite reverse;}
  .wf-f3{animation:wfFloatX 14s ease-in-out infinite;}
  .wf-spin{animation:wfSpinSlow 46s linear infinite;}
  .wf-breathe{animation:wfBreathe 11s ease-in-out infinite;}

  @media (prefers-reduced-motion:reduce){
    .wf-f1,.wf-f2,.wf-f3,.wf-spin,.wf-breathe{animation:none!important;}
  }

  /* ==========================================================================
     4 · SECTION TYPOGRAPHY
     Eyebrow = accent rule + accent caps. Headings get a two-weight break so
     the emphasis lands on the second half, and centred ones get a short
     accent bar underneath.
     ========================================================================== */
  [data-eyebrow]{
    display:inline-flex!important;align-items:center!important;gap:10px!important;
    color:var(--brand-orange-600)!important;
    letter-spacing:.14em!important;
    font-weight:700!important;
    font-size:11.5px!important;
  }
  [data-eyebrow]::before{
    content:'';width:26px;height:2px;border-radius:2px;flex:0 0 auto;
    background:var(--brand-orange-500);
  }
  /* centred eyebrows get the rule on both sides */
  [data-eyebrow][data-center]::after{
    content:'';width:26px;height:2px;border-radius:2px;flex:0 0 auto;
    background:var(--brand-orange-500);
  }

  [data-h-light]{font-weight:400;color:var(--ink-500);}

  /* the heading's own bottom margin is folded into the accent bar, so the
     rhythm below every section title is identical */
  [data-heading]{margin-bottom:0!important;}
  [data-heading]::after{
    content:'';display:block;width:64px;height:4px;border-radius:4px;
    background:linear-gradient(90deg,var(--brand-orange-500),var(--wf-coral));
    margin:22px 0 0;
  }
  [data-heading][data-center]::after{margin-left:auto;margin-right:auto;}
  [data-heading]+p{margin-top:18px!important;}

  /* ---- inside the deep band, flip the header block to light ink ---- */
  #support [data-eyebrow]{color:var(--brand-orange-300)!important;}
  #support [data-eyebrow]::before,#support [data-eyebrow]::after{background:var(--brand-orange-400);}
  #support>div>div:first-child [data-heading]{color:#fff!important;}
  #support>div>div:first-child [data-h-light]{color:rgba(255,255,255,.58);}
  #support>div>div:first-child>p{color:rgba(255,255,255,.74)!important;}
  #support>div>div:first-child [data-heading] span[style*="brand-blue-600"]{color:var(--brand-orange-300)!important;}

  /* ==========================================================================
     5 · HERO — the contrast band
     The fold is painted navy, so the copy column has to be re-inked for a dark
     ground. Everything below is colour only — no markup, no copy, no layout
     moves — and each rule is scoped to #top so the identical components
     further down the page keep their light treatment.
     ========================================================================== */
  /* the dot veil flips from navy-on-cream to light-on-navy */
  #top>div:first-child{
    background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px)!important;
    background-size:26px 26px!important;
  }
  /* one decorative shape was tinted in navy and would vanish into the ground */
  #top [data-deco] .wf-tri{background:rgba(129,160,255,.34)!important;}

  /* --- headline and subhead --- */
  #top h1{color:#fff!important;}
  #top h1+div{color:rgba(255,255,255,.64)!important;}
  #top [data-ind-word]{color:var(--brand-orange-300)!important;}

  /* pen-stroke highlight under the accent words in the headline */
  [data-hl]{
    position:relative;
    background-image:linear-gradient(90deg,rgba(249,115,22,.22),rgba(238,107,77,.22));
    background-repeat:no-repeat;background-position:0 88%;background-size:100% .34em;
    padding:0 .06em;border-radius:3px;
    animation:wfUnderline 1s var(--ease-out) .45s both;
  }
  /* on navy it needs both a brighter word and a heavier stroke behind it */
  #top [data-hl]{
    color:var(--brand-orange-300)!important;
    background-image:linear-gradient(90deg,rgba(249,115,22,.45),rgba(238,107,77,.45))!important;
  }

  /* the tilted accent plate behind the product window. [data-hero-stack]
     hugs the window itself (the caption strip below it is a sibling), so the
     plate can never bleed under the copy. */
  [data-hero-stack]{position:relative;}
  [data-hero-plate]{
    position:absolute;inset:16px -26px -22px 18px;
    background:linear-gradient(135deg,var(--brand-orange-500),var(--wf-coral) 55%,#F59E0B);
    border-radius:28px;transform:rotate(3deg);opacity:.92;z-index:0;
    box-shadow:0 40px 80px -34px rgba(238,107,77,.65);
  }
  [data-hero-plate]::after{
    content:'';position:absolute;inset:0;border-radius:28px;
    background-image:radial-gradient(rgba(255,255,255,.28) 1.2px,transparent 1.2px);
    background-size:16px 16px;
  }
  #top [data-hero-win]{position:relative;z-index:1;border-radius:20px!important;}
  #top [data-fitwrap]{position:relative;z-index:1;}

  /* Hero feature lines: plain text, deliberately unboxed. The column already
     carries a bordered group (the promise chips) and a heavy object (the
     product window) — a third panel here left every line in the fold sitting
     inside a frame. These read as body copy with an accent icon instead. */
  #top [data-hero-points]>div{color:rgba(255,255,255,.82)!important;}
  #top [data-hero-points]>div>span:first-child{color:var(--brand-orange-300)!important;}

  /* --- contact line under the buttons --- */
  #top a[href^="https://wa.me"],#top a[href^="mailto:"]{color:rgba(255,255,255,.78)!important;}
  #top a[href^="https://wa.me"]:hover,#top a[href^="mailto:"]:hover{color:#fff!important;}
  #top a[href^="mailto:"]>span:first-child{color:var(--brand-orange-300)!important;}

  /* --- narration strip under the product window ---
     setMsg() in component.js rewrites this block's innerHTML on every step and
     repaints the dots with inline styles, so the highlight and the dots are
     re-pointed by redefining the two tokens those inline styles already
     reference, rather than by a selector the next rerender would undo. */
  #top [data-hmsg-eyebrow]{color:rgba(255,255,255,.60)!important;}
  #top [data-hmsg]{color:#fff!important;}
  #top [data-hmsg] span[style]{--brand-blue-600:#FDA15E;--brand-blue-50:rgba(249,115,22,.18);}
  #top [data-hmsgdot]{--ink-300:rgba(255,255,255,.26);--brand-blue-600:var(--brand-orange-300);}

  /* a little more air above the fold — the hero is the one screen that
     should feel unhurried */
  #top>div:last-child{padding-top:84px!important;}

  /* promise chips — glass on the navy rather than white pills */
  [data-promises] span{
    background:rgba(255,255,255,.07)!important;
    border-color:rgba(255,255,255,.16)!important;
    color:rgba(255,255,255,.88)!important;
    box-shadow:none!important;
    transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
  }
  [data-promises] span:hover{transform:translateY(-2px);background:rgba(255,255,255,.13)!important;}
  /* the tick icons are set in ink-weight brand colours that die on navy */
  #top [data-promises] span>span[style*="var(--success)"]{color:#4ADE80!important;}
  #top [data-promises] span>span[style*="brand-orange-500"]{color:var(--brand-orange-300)!important;}

  /* ==========================================================================
     6 · CONTROLS — buttons, nav, cards
     ========================================================================== */
  /* primary CTA: gradient + a sheen that sweeps on hover */
  [data-register],#cta a[href^="https://wa.me"]{
    position:relative;overflow:hidden;
  }
  header [data-register],#top [data-register]{
    background:linear-gradient(135deg,var(--brand-orange-500),var(--wf-coral))!important;
    box-shadow:0 14px 30px -12px rgba(238,107,77,.65)!important;
    border-radius:999px!important;
  }
  header [data-register]:hover,#top [data-register]:hover{
    background:linear-gradient(135deg,var(--brand-orange-600),#E05A3C)!important;
    transform:translateY(-2px);
    box-shadow:0 20px 38px -12px rgba(238,107,77,.75)!important;
  }
  [data-register]::after{
    content:'';position:absolute;top:0;bottom:0;width:38%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    transform:translateX(-120%);pointer-events:none;
  }
  [data-register]:hover::after{animation:wfSheen .9s var(--ease-out) both;}

  /* the hero's secondary button: outline on glass, accent ring on hover */
  #top a[href="#tour"]{
    border-radius:999px!important;
    background:rgba(255,255,255,.07)!important;
    border-color:rgba(255,255,255,.22)!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  #top a[href="#tour"]>span:first-child{
    background:rgba(249,115,22,.20)!important;color:var(--brand-orange-300)!important;
  }
  #top a[href="#tour"]:hover{
    background:rgba(255,255,255,.13)!important;
    border-color:rgba(249,115,22,.55)!important;
    box-shadow:0 16px 32px -18px rgba(249,115,22,.65)!important;
    transform:translateY(-2px);
  }

  /* nav links get an animated accent rule */
  header nav>div:nth-of-type(1)>a{position:relative;padding-bottom:3px;}
  header nav>div:nth-of-type(1)>a::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
    background:var(--brand-orange-500);transform:scaleX(0);transform-origin:0 50%;
    transition:transform var(--dur-base) var(--ease-out);
  }
  header nav>div:nth-of-type(1)>a:hover{color:var(--ink-900)!important;text-decoration:none!important;}
  header nav>div:nth-of-type(1)>a:hover::after{transform:scaleX(1);}

  /* Sticky bar. It now opens on top of the dark hero, and the logo is a navy
     wordmark — on a translucent bar it would grey out against that navy — so
     the bar stays a solid light plate and simply densifies once the page has
     moved. The light bar over the dark fold is the page's first contrast step. */
  header{
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid var(--border-soft)!important;
    transition:box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
  }
  html.wf-scrolled header{
    box-shadow:0 12px 32px -18px rgba(9,15,34,.55)!important;
  }

  /* industry + module cards: accent top rule that draws in on hover */
  [data-indcard],#features>div>div:last-child>div{
    position:relative;overflow:hidden;
    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]::before,#features>div>div:last-child>div::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--brand-orange-500),var(--wf-coral));
    transform:scaleX(0);transform-origin:0 50%;
    transition:transform .45s var(--ease-out);
  }
  [data-indcard]:hover::before,#features>div>div:last-child>div:hover::before{transform:scaleX(1);}
  #features>div>div:last-child>div:hover{
    box-shadow:0 26px 50px -30px rgba(11,16,32,.35)!important;
    transform:translateY(-4px);
    border-color:rgba(238,107,77,.3)!important;
  }
  [data-indcard]:hover{transform:translateY(-5px)!important;}

  /* the industry-pack cards read as a set of three with one warm leader */
  [data-ind-cards]>div:first-child{background:linear-gradient(180deg,#FFF9F3,#fff)!important;}

  /* text links that end in an arrow: the arrow leads on hover */
  [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(5px);}

  /* 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 in the deep band's white panel */
  #support>div>div:last-child span[style*="border-radius:99px"]{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}

  /* pricing add-ons + price card */
  #pricing [data-price-card]{
    background:linear-gradient(150deg,var(--wf-dark),var(--wf-dark-2) 60%,#1E2F63)!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{border-color:rgba(238,107,77,.34)!important;}

  /* closing CTA buttons */
  #cta [data-register],#cta a[href^="https://wa.me"]{border-radius:999px!important;}
  #cta [data-register]:hover{box-shadow:0 20px 36px -16px rgba(0,0,0,.55)!important;}
  #cta a[href^="https://wa.me"]{background:linear-gradient(135deg,var(--brand-orange-500),var(--wf-coral))!important;}
  #cta a[href^="https://wa.me"]:hover{
    background:linear-gradient(135deg,var(--brand-orange-600),#E05A3C)!important;
    transform:translateY(-1px);box-shadow:0 20px 36px -16px rgba(238,107,77,.7)!important;
  }

  /* CTA band + footer share the deep navy so the page lands on one colour */
  #cta>div{background:linear-gradient(140deg,var(--wf-dark),var(--wf-dark-2) 55%,#22346B)!important;}
  footer{background:linear-gradient(180deg,var(--wf-dark-2),var(--wf-dark))!important;position:relative;overflow:hidden;}
  footer::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:24px 24px;
  }
  footer>div{position:relative;z-index:1;}
  /* a single accent hairline so the navy block doesn't start flat */
  footer::after{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--brand-orange-500),var(--wf-coral) 42%,var(--wf-amber) 70%,transparent);
  }
  footer a{transition:color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);}
  footer a:hover{color:var(--brand-orange-300)!important;text-decoration:none!important;}

  /* ==========================================================================
     7 · SCROLL REVEAL
     reveal.js flags the document with .wf-js before hiding anything, so with
     JavaScript off every block renders in its final state. Eight motions are
     mixed down the page so no two neighbouring blocks arrive the same way.
     ========================================================================== */
  html.wf-js [data-rv]{opacity:0;}
  html.wf-js [data-rv="up"]    {transform:translateY(30px);}
  html.wf-js [data-rv="down"]  {transform:translateY(-26px);}
  html.wf-js [data-rv="left"]  {transform:translateX(-38px);}
  html.wf-js [data-rv="right"] {transform:translateX(38px);}
  html.wf-js [data-rv="zoom"]  {transform:scale(.93);}
  html.wf-js [data-rv="pop"]   {transform:translateY(16px) scale(.88);}
  html.wf-js [data-rv="tilt"]  {transform:perspective(1000px) rotateX(9deg) translateY(28px);transform-origin:50% 100%;}
  html.wf-js [data-rv="blur"]  {filter:blur(9px);transform:translateY(14px);}

  html.wf-js [data-rv].wf-in{
    opacity:1;transform:none;filter:none;
    transition:opacity .72s var(--ease-out),transform .72s var(--ease-out),filter .72s var(--ease-out);
    transition-delay:var(--rv-d,0ms);
  }
  html.wf-js [data-rv="pop"].wf-in{transition-timing-function:cubic-bezier(.34,1.56,.64,1);}

  @media (prefers-reduced-motion:reduce){
    html.wf-js [data-rv]{opacity:1!important;transform:none!important;filter:none!important;}
  }

  /* ==========================================================================
     8 · RESPONSIVE
     Only shrinks the new decoration; the layout rules stay in styles.css.
     ========================================================================== */
  @media (max-width:1024px){
    [data-hero-plate]{inset:12px -14px -18px 12px;border-radius:22px;}
  }

  @media (max-width:820px){
    #top>div:last-child{padding-bottom:64px!important;}
    #support>div>div:last-child{margin-top:44px!important;}
    [data-hero-plate]{inset:10px -8px -12px 8px;}
    [data-deco] .wf-hide-sm{display:none;}
    [data-heading][data-center]::after,[data-heading]:not([data-center])::after{margin-top:16px;width:52px;height:3px;}
  }

  @media (max-width:520px){
    [data-hero-plate]{display:none;}
  }