/* ==========================================================================
   Platform Layers — isometric "floating stack" panel for the home page.

   The whole composition is periodic at 18s: every animation below has a
   duration that divides 18s evenly, so the panel is a seamless loop and a
   screen capture of it can be cut at any 18s boundary.

   Three layers, bottom to top:
     --infra   Shariah / payment rails surface (textured green, inline SVG)
     --glass   frosted brand card (wordmark + leaf-crescent mark)
     --ui      product UI card (skeleton bars only, never real data)

   Motion is transform/opacity only. Nothing here triggers layout.
   ========================================================================== */

.platformLayersSec {
    /* Dark greens are surface depth only; the accent is the brand green, so
       it tracks --gf-green from style.css. The rgba() tints further down are
       that same colour at alpha. */
    --gpl-forest: #143c1c;
    --gpl-forest-deep: #0b2a12;
    --gpl-forest-light: #1c4d24;
    --gpl-green: var(--gf-green, #5eb346);
    --gpl-green-soft: #8ed157;
    /* Brand green is only 2.6:1 on white, so text accents step down:
       ink passes AA for large headings, deep passes AA for body-size text. */
    --gpl-green-ink: #4a9e3c;
    --gpl-green-deep: #3d7f31;
    /* Panel surfaces. This stage used to be a dark forest field; it is light
       now, on the same hexagon treatment as the About and Videos pages. The
       --gpl-forest-* tokens above stay: they are still used as *text* and as
       the UI card's accent block, not as page surface. */
    --gpl-panel-1: #eaf4ee;
    --gpl-panel-2: #dcebe1;
    --gpl-panel-3: #cde2d5;

    padding: 90px 0;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Copy column
   -------------------------------------------------------------------------- */

.platformLayersContent {
    max-width: 560px;
}

.platformLayersEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(94, 179, 70, 0.28);
    border-radius: 999px;
    background: rgba(94, 179, 70, 0.08);
    color: var(--gpl-green-deep);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.platformLayersHeading {
    margin-bottom: 20px;
    color: var(--gf-navy-deep);
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.22;
}

.platformLayersHeading span {
    color: var(--gpl-green-ink);
}

.platformLayersDesc {
    margin-bottom: 26px;
    color: #5b6b72;
    font-size: 17px;
    line-height: 1.75;
}

.platformLayersList {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.platformLayersList li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 34px;
    color: var(--gf-navy);
    font-size: 16px;
    line-height: 1.55;
}

.platformLayersList li:last-child {
    margin-bottom: 0;
}

.platformLayersList li i {
    position: absolute;
    top: 2px;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(94, 179, 70, 0.12);
    color: var(--gpl-green-deep);
    font-size: 11px;
}

.platformLayersList li strong {
    color: var(--gf-navy-deep);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Panel — the 9:16 stage the stack floats inside
   -------------------------------------------------------------------------- */

.gpl-panel {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    aspect-ratio: 9 / 16;
    border-radius: 32px;
    overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1L54 16v32L28 63 2 48V16z M28 63l26 15v18M28 63L2 78v18' fill='none' stroke='%235eb346' stroke-opacity='0.22' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 56px 97px repeat,
        radial-gradient(120% 80% at 78% 8%, rgba(94, 179, 70, 0.16), rgba(94, 179, 70, 0) 58%),
        linear-gradient(168deg, var(--gpl-panel-1) 0%, var(--gpl-panel-2) 46%, var(--gpl-panel-3) 100%);
    box-shadow:
        0 30px 60px -32px rgba(20, 45, 34, 0.4),
        inset 0 0 0 1px rgba(20, 60, 28, 0.08);
}

/* Soft vignette, inverted: a light pool at the centre, edges a touch deeper. */
.gpl-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 55% at 50% 46%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%, rgba(20, 60, 28, 0.1) 100%);
}

/* --------------------------------------------------------------------------
   Floating dust
   -------------------------------------------------------------------------- */

.gpl-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gpl-dust span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(94, 179, 70, 0.5);
    box-shadow: 0 0 5px rgba(94, 179, 70, 0.3);
    opacity: 0;
    animation: gplDrift 18s linear infinite;
}

.gpl-dust span:nth-child(1)  { left: 12%; top: 82%; animation-duration: 18s; animation-delay: -1s; }
.gpl-dust span:nth-child(2)  { left: 78%; top: 88%; animation-duration: 9s;  animation-delay: -4s; }
.gpl-dust span:nth-child(3)  { left: 34%; top: 92%; animation-duration: 18s; animation-delay: -7s; width: 2px; height: 2px; }
.gpl-dust span:nth-child(4)  { left: 88%; top: 74%; animation-duration: 9s;  animation-delay: -2s; }
.gpl-dust span:nth-child(5)  { left: 22%; top: 70%; animation-duration: 6s;  animation-delay: -5s; width: 2px; height: 2px; }
.gpl-dust span:nth-child(6)  { left: 62%; top: 95%; animation-duration: 18s; animation-delay: -11s; }
.gpl-dust span:nth-child(7)  { left: 48%; top: 78%; animation-duration: 9s;  animation-delay: -6s; width: 2px; height: 2px; }
.gpl-dust span:nth-child(8)  { left: 8%;  top: 60%; animation-duration: 18s; animation-delay: -14s; }
.gpl-dust span:nth-child(9)  { left: 92%; top: 56%; animation-duration: 6s;  animation-delay: -3s; width: 2px; height: 2px; }
.gpl-dust span:nth-child(10) { left: 70%; top: 66%; animation-duration: 18s; animation-delay: -9s; }
.gpl-dust span:nth-child(11) { left: 40%; top: 86%; animation-duration: 9s;  animation-delay: -8s; }
.gpl-dust span:nth-child(12) { left: 56%; top: 72%; animation-duration: 6s;  animation-delay: -1s; width: 2px; height: 2px; }
.gpl-dust span:nth-child(13) { left: 18%; top: 50%; animation-duration: 18s; animation-delay: -16s; }
.gpl-dust span:nth-child(14) { left: 84%; top: 40%; animation-duration: 9s;  animation-delay: -5s; width: 2px; height: 2px; }

@keyframes gplDrift {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    18%  { opacity: 0.75; }
    70%  { opacity: 0.5; }
    100% { transform: translate3d(14px, -220px, 0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   The isometric stack
   -------------------------------------------------------------------------- */

.gpl-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1300px;
    transition: opacity 0.6s ease;
}

.gpl-stack {
    --gpl-card-w: 250px;
    --gpl-card-h: 310px;

    position: relative;
    width: var(--gpl-card-w);
    height: var(--gpl-card-h);
    /* Locked isometric angle: tilt toward camera, slight rotateZ. The
       translateY offsets the optical rise the stack gains from translateZ,
       so the composition sits centred in the panel. */
    transform: translateY(70px) scale(var(--gpl-scale, 1)) rotateX(55deg) rotateZ(-38deg);
    transform-style: preserve-3d;
}

/* Ground shadow, breathing in time with the lifts. */
.gpl-ground {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(5, 18, 8, 0.6), rgba(5, 18, 8, 0) 72%);
    filter: blur(10px);
    transform: translateZ(-46px);
    animation: gplGround 18s ease-in-out infinite;
}

@keyframes gplGround {
    0%,   10.56% { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
    16.1%        { transform: translateZ(-46px) scale(1.12); opacity: 0.62; }
    24.4%        { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
    35.6%        { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
    41.1%        { transform: translateZ(-46px) scale(1.12); opacity: 0.62; }
    49.4%        { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
    60.6%        { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
    66.1%        { transform: translateZ(-46px) scale(1.12); opacity: 0.62; }
    74.4%        { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
    85.6%        { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
    91.1%        { transform: translateZ(-46px) scale(1.12); opacity: 0.62; }
    99.4%, 100%  { transform: translateZ(-46px) scale(1);    opacity: 0.9; }
}

/* Each layer carries the slow "lift and settle"; the card inside it carries
   the continuous bob. Nesting the two keeps the loop maths simple. */
.gpl-layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.gpl-layer--infra { animation: gplLiftInfra 18s ease-in-out infinite; }
.gpl-layer--glass { animation: gplLiftGlass 18s ease-in-out infinite; }
.gpl-layer--ui    { animation: gplLiftUi    18s ease-in-out infinite; }

/* Rest heights: 0 / 92 / 184. The top layer rises the most on each lift. */
@keyframes gplLiftInfra {
    0%,   10.56% { transform: translateZ(0); }
    16.1%, 18.3% { transform: translateZ(10px); }
    24.4%, 35.6% { transform: translateZ(0); }
    41.1%, 43.3% { transform: translateZ(10px); }
    49.4%, 60.6% { transform: translateZ(0); }
    66.1%, 68.3% { transform: translateZ(10px); }
    74.4%, 85.6% { transform: translateZ(0); }
    91.1%, 93.3% { transform: translateZ(10px); }
    99.4%, 100%  { transform: translateZ(0); }
}

@keyframes gplLiftGlass {
    0%,   10.56% { transform: translateZ(92px); }
    16.1%, 18.3% { transform: translateZ(114px); }
    24.4%, 35.6% { transform: translateZ(92px); }
    41.1%, 43.3% { transform: translateZ(114px); }
    49.4%, 60.6% { transform: translateZ(92px); }
    66.1%, 68.3% { transform: translateZ(114px); }
    74.4%, 85.6% { transform: translateZ(92px); }
    91.1%, 93.3% { transform: translateZ(114px); }
    99.4%, 100%  { transform: translateZ(92px); }
}

@keyframes gplLiftUi {
    0%,   10.56% { transform: translateZ(184px); }
    16.1%, 18.3% { transform: translateZ(218px); }
    24.4%, 35.6% { transform: translateZ(184px); }
    41.1%, 43.3% { transform: translateZ(218px); }
    49.4%, 60.6% { transform: translateZ(184px); }
    66.1%, 68.3% { transform: translateZ(218px); }
    74.4%, 85.6% { transform: translateZ(184px); }
    91.1%, 93.3% { transform: translateZ(218px); }
    99.4%, 100%  { transform: translateZ(184px); }
}

/* Card thickness: a darker plate a few pixels below the face. */
.gpl-edge {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    transform: translateZ(-9px);
}

.gpl-layer--ui .gpl-edge    { background: #c3d0c6; }
.gpl-layer--glass .gpl-edge { background: rgba(20, 60, 28, 0.22); }
.gpl-layer--infra .gpl-edge { background: #5d9a6c; }

.gpl-card {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    overflow: hidden;
    will-change: transform;
}

.gpl-layer--infra .gpl-card { animation: gplBobInfra 6s ease-in-out infinite; }
.gpl-layer--glass .gpl-card { animation: gplBobGlass 18s ease-in-out infinite; }
.gpl-layer--ui .gpl-card    { animation: gplBobUi 9s ease-in-out infinite; }

@keyframes gplBobInfra {
    0%, 100% { transform: translateZ(-4px); }
    50%      { transform: translateZ(4px); }
}

@keyframes gplBobGlass {
    0%, 100% { transform: translateZ(-6px) rotate(-0.5deg); }
    50%      { transform: translateZ(6px) rotate(0.5deg); }
}

@keyframes gplBobUi {
    0%, 100% { transform: translateZ(-9px) rotate(0.4deg); }
    50%      { transform: translateZ(9px) rotate(-0.4deg); }
}

/* --------------------------------------------------------------------------
   Top layer — product UI card (skeleton only)
   -------------------------------------------------------------------------- */

.gpl-ui {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px;
    background: linear-gradient(160deg, #ffffff 0%, #f4f8f5 100%);
    box-shadow:
        0 30px 46px -16px rgba(20, 45, 34, 0.5),
        inset 0 0 0 1px rgba(20, 60, 28, 0.1);
}

.gpl-ui__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gpl-ui__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gpl-forest);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.gpl-ui__brand svg {
    width: 14px;
    height: 14px;
}

.gpl-ui__tag {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(94, 179, 70, 0.12);
    color: var(--gpl-green);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gpl-ui__balance {
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #5eb346 0%, #3d7f31 100%);
}

.gpl-ui__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.gpl-ui__chip {
    padding: 10px;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(20, 60, 28, 0.08);
}

.gpl-ui__rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 2px;
}

.gpl-ui__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gpl-ui__dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(94, 179, 70, 0.14);
}

.gpl-ui__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.gpl-ui__btn {
    padding: 9px 0;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.gpl-ui__btn--primary {
    background: linear-gradient(135deg, var(--gpl-green) 0%, #3f8a2f 100%);
    color: #ffffff;
    animation: gplCtaGlow 9s ease-in-out infinite;
}

.gpl-ui__btn--ghost {
    box-shadow: inset 0 0 0 1px rgba(20, 60, 28, 0.16);
    color: var(--gpl-forest);
}

@keyframes gplCtaGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(94, 179, 70, 0); }
    50%      { box-shadow: 0 4px 14px 0 rgba(94, 179, 70, 0.45); }
}

/* Skeleton bars — deliberately contentless, with a slow shimmer pass. */
.gpl-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(20, 60, 28, 0.1);
}

.gpl-bar--light { background: rgba(255, 255, 255, 0.28); }
.gpl-bar--tall { height: 13px; }
.gpl-bar--w30 { width: 30%; }
.gpl-bar--w45 { width: 45%; }
.gpl-bar--w55 { width: 55%; }
.gpl-bar--w70 { width: 70%; }
.gpl-bar--w100 { width: 100%; }
.gpl-bar + .gpl-bar { margin-top: 7px; }

.gpl-ui__shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 62%
    );
    transform: translateX(-120%);
    animation: gplSweep 18s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Middle layer — frosted brand glass
   -------------------------------------------------------------------------- */

.gpl-glass {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    /* Kept genuinely translucent so the rails layer stays faintly readable
       through it, which is the whole point of the middle card. */
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(233, 243, 236, 0.6) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow:
        0 26px 40px -16px rgba(20, 45, 34, 0.46),
        inset 0 0 0 1px rgba(20, 60, 28, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.gpl-glass__mark {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gpl-glass__mark svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.gpl-glass__word {
    color: #0f3618;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
}

.gpl-glass__sub {
    margin-top: 3px;
    color: var(--gpl-green-deep);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* The light sweep: one pass per loop, across the glass only. */
.gpl-glass__sheen {
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background: linear-gradient(
        104deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 58%
    );
    transform: translateX(-120%);
    animation: gplSweep 18s ease-in-out infinite;
}

@keyframes gplSweep {
    0%,  44%  { transform: translateX(-120%); }
    62%       { transform: translateX(120%); }
    100%      { transform: translateX(120%); }
}

/* --------------------------------------------------------------------------
   Bottom layer — Shariah / payment rails surface
   -------------------------------------------------------------------------- */

.gpl-infra {
    background:
        radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%),
        linear-gradient(150deg, #a8d0b2 0%, #8cc099 58%, #76b184 100%);
    box-shadow:
        0 24px 40px -16px rgba(20, 45, 34, 0.5),
        inset 0 0 0 1px rgba(61, 127, 49, 0.3);
}

.gpl-infra svg {
    display: block;
    width: 100%;
    height: 100%;
}

.gpl-rail {
    fill: none;
    stroke: rgba(16, 48, 24, 0.52);
    stroke-width: 1.2;
    stroke-linecap: round;
}

.gpl-rail--faint {
    stroke: rgba(16, 48, 24, 0.2);
    stroke-width: 1;
}

/* Packets travelling the rails. Dash period 20, so a -20 offset per cycle
   lands exactly back on itself. */
.gpl-pulse {
    fill: none;
    stroke: #14401d;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 5 15;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    animation: gplPacket 6s linear infinite;
}

.gpl-pulse--slow { animation-duration: 9s; }
.gpl-pulse--lag  { animation-delay: -3s; }

@keyframes gplPacket {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -20; }
}

.gpl-node {
    fill: #1d5527;
    animation: gplNode 9s ease-in-out infinite;
}

.gpl-node--b { animation-delay: -3s; }
.gpl-node--c { animation-delay: -6s; }

/* Scale rather than animating `r` — SVG geometry properties are still
   patchy in CSS, transforms are not. */
@keyframes gplNode {
    0%, 100% { opacity: 0.45; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.1); }
}

.gpl-node,
.gpl-node-halo {
    transform-box: fill-box;
    transform-origin: center;
}

.gpl-node-halo {
    fill: none;
    stroke: rgba(29, 85, 39, 0.55);
    stroke-width: 1;
    animation: gplHalo 6s ease-out infinite;
}

.gpl-node-halo--b { animation-delay: -2s; }
.gpl-node-halo--c { animation-delay: -4s; }

@keyframes gplHalo {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Rendered clip — fades over the CSS stage once it can play.
   Until then (or if it never loads) the stage above is what the visitor sees.
   -------------------------------------------------------------------------- */

.gpl-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.gpl-panel.has-video .gpl-video { opacity: 1; }
.gpl-panel.has-video .gpl-stage { opacity: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .gpl-panel { max-width: 380px; }
    .gpl-stack { --gpl-scale: 0.9; }
}

@media (max-width: 991px) {
    .platformLayersSec { padding: 64px 0; }
    .platformLayersContent { max-width: none; }
    .gpl-panel { max-width: 340px; }
    .gpl-stack { --gpl-scale: 0.82; }
}

@media (max-width: 575px) {
    .gpl-panel { max-width: 290px; border-radius: 26px; }
    .gpl-stack { --gpl-scale: 0.7; }
}

/* --------------------------------------------------------------------------
   Reduced motion — hold the stack at its rest pose.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gpl-panel *,
    .gpl-panel *::before,
    .gpl-panel *::after {
        animation: none !important;
    }

    .gpl-layer--glass { transform: translateZ(92px); }
    .gpl-layer--ui { transform: translateZ(184px); }
    .gpl-dust { display: none; }
    .gpl-ui__shimmer,
    .gpl-glass__sheen { display: none; }
}