/* Visual polish layer on top of site.css (brand colours and fonts unchanged).
   Remove the <link> to this file in app/views/layout.php to go back to the previous look. */

/* ---------- Buttons ---------- */
.btn { transition: background-color .2s, color .2s, box-shadow .25s, transform .25s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-soft) 100%); box-shadow: 0 10px 24px -14px rgba(22, 36, 74, .8); }
.btn-primary:hover { background: linear-gradient(135deg, var(--color-royal) 0%, #2b6fd1 100%); box-shadow: 0 14px 28px -14px rgba(30, 91, 181, .8); }
.btn-gold { box-shadow: 0 10px 24px -14px rgba(196, 154, 44, .9); }
.btn-whatsapp { box-shadow: 0 10px 24px -14px rgba(37, 211, 102, .9); }
.btn svg.rtl\:-scale-x-100 { transition: translate .25s; }
.btn:hover svg.rtl\:-scale-x-100 { translate: 3px 0; }
[dir=rtl] .btn:hover svg.rtl\:-scale-x-100 { translate: -3px 0; }

/* ---------- Header: soft shadow once the page scrolls ---------- */
.site-header { transition: box-shadow .3s, background-color .3s; }
.site-header.is-scrolled { background-color: rgba(255, 253, 248, .92); box-shadow: 0 10px 30px -22px rgba(22, 36, 74, .45); }

/* ---------- Section headings: short gold rule above the title ---------- */
.sec-head::before {
  content: ""; display: block; width: 3.25rem; height: 3px; border-radius: 3px; margin-bottom: 1.25rem;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
[dir=rtl] .sec-head::before { background: linear-gradient(-90deg, var(--color-gold), var(--color-gold-light)); }
.sec-head--light::before { background: linear-gradient(90deg, var(--color-gold-light), rgba(230, 207, 133, .3)); }

/* ---------- Hero ---------- */
.hero-bg { position: relative; isolation: isolate; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 65% at 76% 42%, rgba(230, 207, 133, .55), transparent 70%),
    radial-gradient(38% 45% at 6% 8%, rgba(207, 224, 247, .7), transparent 70%),
    linear-gradient(180deg, var(--color-flour) 0%, #f2e8d4 100%);
}
[dir=rtl] .hero-bg::before {
  background:
    radial-gradient(55% 65% at 24% 42%, rgba(230, 207, 133, .55), transparent 70%),
    radial-gradient(38% 45% at 94% 8%, rgba(207, 224, 247, .7), transparent 70%),
    linear-gradient(180deg, var(--color-flour) 0%, #f2e8d4 100%);
}
.hero-bg::after { /* fine flour grain */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; pointer-events: none; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-grid { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hero-stats-wrap { padding-bottom: 4rem; }
@media (min-width: 768px) { .hero-grid { padding-top: 5.5rem; padding-bottom: 4.5rem; } .hero-stats-wrap { padding-bottom: 5rem; } }
.hero-bg .bag-frame { box-shadow: 0 40px 80px -36px rgba(22, 36, 74, .55), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px;
  background: rgba(255, 253, 248, .75); box-shadow: inset 0 0 0 1px rgba(196, 154, 44, .35);
}

/* Key figures under the hero */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden;
  border-radius: 1.5rem; background: rgba(196, 154, 44, .25);
  box-shadow: 0 24px 50px -36px rgba(22, 36, 74, .5);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats li { background: rgba(255, 253, 248, .9); padding: 1.4rem 1.5rem; backdrop-filter: blur(6px); }
.stats .num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; color: var(--color-navy); }
.stats .num em { font-style: normal; color: var(--color-gold); }
.stats .lbl { display: block; margin-top: .35rem; font-size: .92rem; color: var(--color-muted); line-height: 1.4; }

/* ---------- "What are you creating today?" tiles ---------- */
.path-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; height: 100%;
  padding: 1.75rem .75rem 1.5rem; border-radius: 1.25rem; text-align: center;
  background: color-mix(in srgb, var(--c) 7%, var(--color-paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
  transition: transform .3s, box-shadow .3s, background-color .3s;
}
.path-tile .ic {
  display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 999px; background: #fff; color: var(--c);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform .3s;
}
.path-tile .lb { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-navy); }
.path-tile:hover {
  transform: translateY(-4px); background: color-mix(in srgb, var(--c) 13%, var(--color-paper));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent), 0 18px 30px -20px color-mix(in srgb, var(--c) 80%, transparent);
}
.path-tile:hover .ic { transform: scale(1.06) rotate(-4deg); }

/* ---------- Six worlds list ---------- */
.world-row { border-radius: 1.25rem; padding-inline: .75rem; transition: background-color .25s; }
.world-row:hover { background: color-mix(in srgb, var(--c) 6%, transparent); }
.world-row .w-ic { transition: transform .3s; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.world-row:hover .w-ic { transform: scale(1.06); }
.world-row svg.rtl\:-scale-x-100 { transition: translate .25s; }
.world-row:hover svg.rtl\:-scale-x-100 { translate: 4px 0; }
[dir=rtl] .world-row:hover svg.rtl\:-scale-x-100 { translate: -4px 0; }
.pill { display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pill-count { background: rgba(196, 154, 44, .14); color: #8a6a14; box-shadow: inset 0 0 0 1px rgba(196, 154, 44, .35); }
.pill-soon { background: rgba(107, 111, 128, .08); color: var(--color-muted); }

/* ---------- Product cards (home, worlds, related) ---------- */
.product-card {
  display: block; height: 100%; padding: .75rem .75rem 1.25rem; border-radius: 1.75rem; background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-flour-deep); transition: transform .3s, box-shadow .3s;
}
.product-card > :not(.bag-frame) { padding-inline: .5rem; }
.product-card .bag-frame { border-radius: 1.25rem; box-shadow: none; transform: none !important; }
.product-card .bag-frame img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.product-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--color-flour-deep), 0 28px 50px -30px rgba(22, 36, 74, .55); }
.product-card:hover .bag-frame img { transform: scale(1.04); }
.product-card .more { display: inline-flex; align-items: center; gap: .35rem; }
.product-card .more svg { transition: translate .25s; }
.product-card:hover .more svg { translate: 3px 0; }
[dir=rtl] .product-card:hover .more svg { translate: -3px 0; }

/* ---------- "Why professionals choose" (navy band) ---------- */
.trust-bg { position: relative; isolation: isolate; overflow: hidden; }
.trust-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(45% 80% at 100% 0%, rgba(230, 207, 133, .09), transparent 70%),
    radial-gradient(40% 70% at 0% 100%, rgba(30, 91, 181, .35), transparent 70%);
}
.trust-bg li > svg:first-child { box-sizing: content-box; padding: .7rem; border-radius: 1rem; background: rgba(230, 207, 133, .1); box-shadow: inset 0 0 0 1px rgba(230, 207, 133, .25); }

/* ---------- Inspiration & academy cards ---------- */
.lift-card { transition: transform .3s, box-shadow .3s; }
.lift-card:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -30px rgba(22, 36, 74, .55); }
.acad-list { counter-reset: acad; }
.acad-card { position: relative; counter-increment: acad; padding-inline-start: 4.75rem !important; transition: transform .3s, box-shadow .3s, background-color .3s; }
.acad-card::before {
  content: counter(acad, decimal-leading-zero); position: absolute; inset-inline-start: 1.5rem; top: 1.45rem;
  font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--color-gold);
}
.acad-card:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px rgba(196, 154, 44, .4), 0 20px 40px -30px rgba(22, 36, 74, .5); }

/* ---------- Final call to action: navy panel ---------- */
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 1.75rem; color: var(--color-paper);
  background: linear-gradient(135deg, var(--color-navy) 0%, #1d2f5e 60%, var(--color-navy-soft) 100%);
  box-shadow: 0 30px 60px -40px rgba(22, 36, 74, .6);
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 90% at 100% 0%, rgba(230, 207, 133, .12), transparent 70%), radial-gradient(35% 60% at 0% 100%, rgba(30, 91, 181, .45), transparent 70%);
}
.cta-panel .t-h1 { color: var(--color-paper); }
.cta-panel .t-lead { color: rgba(255, 253, 248, .8); }
.cta-panel .btn-primary { background: var(--color-gold); color: var(--color-navy); box-shadow: 0 10px 24px -12px rgba(196, 154, 44, .9); }
.cta-panel .btn-primary:hover { background: var(--color-gold-light); }
.cta-panel .btn-ghost { color: var(--color-paper); box-shadow: inset 0 0 0 1.5px rgba(255, 253, 248, .55); }
.cta-panel .btn-ghost:hover { background: var(--color-paper); color: var(--color-navy); }

/* ---------- Footer ---------- */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold) 25%, var(--color-gold-light) 50%, var(--color-gold) 75%, transparent); }

/* ---------- Scroll reveal (only when JS runs and motion is allowed) ---------- */
.reveal-on .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.reveal-on .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .path-tile, .product-card, .lift-card, .acad-card { transition: none; }
}