:root{
  --rushd-f30-navy:#0E1F3D;
  --rushd-f30-deep:#081327;
  --rushd-f30-red:#E43036;
  --rushd-f30-white:#FFFFFF;
}

.rushd-frame30-final-ui{
  position:absolute;
  inset:0;
  z-index:18;
  display:none;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s linear;
}

.rushd-frame30-final-ui.is-active{
  opacity:1;
  visibility:visible;
}

@media(max-width:767px),
       (min-width:768px) and (orientation:portrait){

  .rushd-frame30-final-ui{
    display:block;
  }

  .rushd-frame30-final-ui__back,
  .rushd-frame30-final-ui__front{
    position:absolute;
    inset:0;
  }

  .rushd-frame30-final-ui__back{
    z-index:1;
  }

  /* ---------------------------------------------------------
     DIFFERENT FROM FRAME 1:
     angular control-grid / web system
  --------------------------------------------------------- */

  .rushd-f30-grid{
    position:absolute;
    left:50%;
    top:72%;
    width:92vw;
    height:45vh;
    transform:translate(-50%,-50%) rotate(-4deg);
    opacity:.20;

    background:
      linear-gradient(rgba(14,31,61,.10) 1px,transparent 1px),
      linear-gradient(90deg,rgba(14,31,61,.10) 1px,transparent 1px);

    background-size:28px 28px;
    -webkit-mask:linear-gradient(to bottom,transparent 0%,#000 15%,#000 90%,transparent 100%);
    mask:linear-gradient(to bottom,transparent 0%,#000 15%,#000 90%,transparent 100%);
  }

  .rushd-f30-diagonal-web{
    position:absolute;
    width:78vw;
    height:1px;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(14,31,61,.24) 16%,
        rgba(228,48,54,.36) 48%,
        rgba(14,31,61,.20) 82%,
        transparent 100%
      );
    transform-origin:left center;
  }

  .rushd-f30-diagonal-web::before,
  .rushd-f30-diagonal-web::after{
    content:"";
    position:absolute;
    top:-38px;
    width:74%;
    height:76px;
    border-top:1px solid rgba(14,31,61,.11);
    border-bottom:1px solid rgba(228,48,54,.08);
    transform:skewX(-26deg);
  }

  .rushd-f30-diagonal-web--a{
    left:8%;
    top:64%;
    transform:rotate(18deg);
  }

  .rushd-f30-diagonal-web--b{
    left:14%;
    top:80%;
    transform:rotate(-16deg);
  }

  /* Nodes / connection labels */

  .rushd-f30-node{
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    gap:6px;

    color:rgba(14,31,61,.52);
    font-size:clamp(.42rem,1.7vw,.60rem);
    font-weight:900;
    letter-spacing:.10em;
    direction:ltr;
    white-space:nowrap;
  }

  .rushd-f30-node i{
    width:7px;
    height:7px;
    border-radius:50%;
    border:1px solid rgba(228,48,54,.55);
    background:rgba(255,255,255,.92);
    box-shadow:0 0 0 4px rgba(228,48,54,.06);
  }

  .rushd-f30-node--1{
    left:7%;
    top:60%;
  }

  .rushd-f30-node--2{
    right:8%;
    top:70%;
  }

  .rushd-f30-node--3{
    left:11%;
    top:88%;
  }

  /* Vertical system label */

  .rushd-f30-system-label{
    position:absolute;
    right:3.6vw;
    top:60%;
    transform:rotate(90deg);
    transform-origin:right top;

    color:rgba(228,48,54,.52);
    font-size:clamp(.48rem,1.9vw,.68rem);
    font-weight:900;
    letter-spacing:.20em;
    direction:ltr;
    white-space:nowrap;
  }

  /* Brand panel — intentionally not in CTA gap */

  .rushd-f30-panel{
    position:absolute;
    left:6vw;
    top:84%;

    min-width:105px;
    padding:8px 10px;

    border:1px solid rgba(14,31,61,.10);
    border-radius:9px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.62),
        rgba(247,244,238,.40)
      );

    -webkit-backdrop-filter:blur(10px) saturate(130%);
    backdrop-filter:blur(10px) saturate(130%);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 8px 20px rgba(14,31,61,.05);
  }

  .rushd-f30-panel strong,
  .rushd-f30-panel span{
    display:block;
    direction:ltr;
  }

  .rushd-f30-panel strong{
    color:var(--rushd-f30-red);
    font-size:clamp(.52rem,2vw,.72rem);
    letter-spacing:.08em;
  }

  .rushd-f30-panel span{
    margin-top:2px;
    color:rgba(14,31,61,.50);
    font-size:clamp(.38rem,1.45vw,.54rem);
    font-weight:800;
    letter-spacing:.08em;
  }

  /* Corner brackets */

  .rushd-f30-corner{
    position:absolute;
    width:26px;
    height:26px;
    opacity:.40;
  }

  .rushd-f30-corner--tl{
    left:6vw;
    top:57%;
    border-left:1px solid var(--rushd-f30-red);
    border-top:1px solid var(--rushd-f30-red);
  }

  .rushd-f30-corner--tr{
    right:6vw;
    top:57%;
    border-right:1px solid var(--rushd-f30-navy);
    border-top:1px solid var(--rushd-f30-navy);
  }

  .rushd-f30-corner--bl{
    left:6vw;
    bottom:7vh;
    border-left:1px solid var(--rushd-f30-navy);
    border-bottom:1px solid var(--rushd-f30-navy);
  }

  .rushd-f30-corner--br{
    right:6vw;
    bottom:7vh;
    border-right:1px solid var(--rushd-f30-red);
    border-bottom:1px solid var(--rushd-f30-red);
  }


  /* ---------------------------------------------------------
     PNG exact canvas
  --------------------------------------------------------- */

  .rushd-frame30-final-ui__png{
    position:absolute;
    inset:0;
    z-index:10;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    pointer-events:none;
    user-select:none;

    transition:none!important;
    animation:none!important;
  }


  /* ---------------------------------------------------------
     FOREGROUND:
     crossing web rails, NOT orbit
  --------------------------------------------------------- */

  .rushd-frame30-final-ui__front{
    z-index:12;
  }

  .rushd-f30-rail{
    position:absolute;
    z-index:13;

    width:74vw;
    height:10px;

    border-top:2px solid rgba(14,31,61,.74);
    border-bottom:1px solid rgba(228,48,54,.48);

    background:
      repeating-linear-gradient(
        110deg,
        transparent 0 14px,
        rgba(255,255,255,.55) 15px 16px,
        transparent 17px 29px
      );

    filter:
      drop-shadow(0 5px 10px rgba(14,31,61,.07));

    opacity:.90;
  }

  .rushd-f30-rail::after{
    content:"";
    position:absolute;
    inset:-6px 0;
    border-top:1px dashed rgba(228,48,54,.18);
  }

  .rushd-f30-rail--left{
    left:-13vw;
    top:78%;
    transform:rotate(14deg);
  }

  .rushd-f30-rail--right{
    right:-14vw;
    top:83%;
    transform:rotate(-13deg);
  }

  /* Small glass tags in foreground */

  .rushd-f30-front-tag{
    position:absolute;
    z-index:15;

    padding:6px 9px;

    border:1px solid rgba(14,31,61,.09);
    border-radius:999px;

    background:rgba(255,255,255,.52);
    -webkit-backdrop-filter:blur(10px) saturate(130%);
    backdrop-filter:blur(10px) saturate(130%);

    color:rgba(14,31,61,.60);

    font-size:clamp(.42rem,1.65vw,.58rem);
    font-weight:900;
    letter-spacing:.10em;
    direction:ltr;
  }

  .rushd-f30-front-tag--l{
    left:7vw;
    top:74%;
    transform:rotate(-5deg);
  }

  .rushd-f30-front-tag--r{
    right:7vw;
    top:88%;
    transform:rotate(5deg);
    color:rgba(228,48,54,.64);
  }

  /* Scanline adds a final-screen feel */

  .rushd-f30-scanline{
    position:absolute;
    left:5vw;
    right:5vw;
    top:66%;

    height:1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(228,48,54,.35) 22%,
        rgba(14,31,61,.20) 50%,
        rgba(228,48,54,.30) 78%,
        transparent
      );

    box-shadow:
      0 0 12px rgba(228,48,54,.07);
  }

  .rushd-f30-bottom-strip{
    position:absolute;
    left:50%;
    bottom:3.2vh;

    width:90vw;

    transform:translateX(-50%);

    text-align:center;
    color:rgba(14,31,61,.28);

    font-size:clamp(.40rem,1.55vw,.55rem);
    font-weight:900;
    letter-spacing:.12em;
    direction:ltr;
    white-space:nowrap;
  }

  /* CTA safety zone 39%–54% stays empty */
}


/* Never show on landscape */
@media(orientation:landscape){
  .rushd-frame30-final-ui{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
}

/* Final CTA always stays above this final UI */
.rushd-mobile-bundle-section{
  z-index:30!important;
}


/* =========================================================
   V3 — ARABIC + REAL SPIDER WEB + EDUCATIONAL GLYPHS
   Layout preserved from V2.
========================================================= */

@media(max-width:767px),
       (min-width:768px) and (orientation:portrait){

  .rushd-f30-node,
  .rushd-f30-system-label,
  .rushd-f30-panel strong,
  .rushd-f30-panel span,
  .rushd-f30-front-tag,
  .rushd-f30-bottom-strip{
    direction:rtl;
    letter-spacing:0;
  }

  .rushd-f30-node{
    font-size:clamp(.46rem,1.85vw,.64rem);
  }

  .rushd-f30-system-label{
    font-size:clamp(.50rem,1.95vw,.70rem);
  }

  .rushd-f30-panel strong{
    font-size:clamp(.56rem,2.1vw,.76rem);
  }

  .rushd-f30-panel span{
    font-size:clamp(.42rem,1.55vw,.56rem);
  }

  .rushd-f30-front-tag{
    font-size:clamp(.45rem,1.72vw,.60rem);
  }

  .rushd-f30-bottom-strip{
    font-size:clamp(.43rem,1.62vw,.58rem);
  }

  /* Real spider-web texture in same geometric zones */
  .rushd-f30-grid{
    opacity:.14;
    background:
      repeating-conic-gradient(
        from 4deg at 50% 50%,
        rgba(14,31,61,.18) 0deg 1deg,
        transparent 1deg 20deg
      ),
      repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0 7.8%,
        rgba(228,48,54,.14) 8.1% 8.6%,
        transparent 8.9% 15.5%
      );
    background-size:auto;
  }

  .rushd-f30-diagonal-web{
    height:150px;
    background:none !important;
    overflow:visible;
  }

  .rushd-f30-diagonal-web::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:
      repeating-conic-gradient(
        from 2deg at 50% 50%,
        rgba(14,31,61,.24) 0deg 1deg,
        transparent 1deg 24deg
      ),
      repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0 10%,
        rgba(228,48,54,.19) 10.4% 11%,
        transparent 11.4% 20%
      );
    -webkit-mask:
      radial-gradient(
        ellipse at center,
        #000 0 68%,
        transparent 88%
      );
    mask:
      radial-gradient(
        ellipse at center,
        #000 0 68%,
        transparent 88%
      );
    opacity:.78;
  }

  .rushd-f30-diagonal-web::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:78%;
    height:78%;
    transform:
      translate(-50%,-50%)
      rotate(8deg);
    border-radius:50%;
    border:
      1px dashed rgba(14,31,61,.12);
    box-shadow:
      0 0 0 12px rgba(228,48,54,.02),
      0 0 0 26px rgba(14,31,61,.015);
    opacity:.72;
  }

  /* Front rails become web strands */
  .rushd-f30-rail{
    height:28px;
    border:0 !important;
    background:none !important;
    filter:
      drop-shadow(0 4px 8px rgba(14,31,61,.05));
    opacity:.90;
  }

  .rushd-f30-rail::before,
  .rushd-f30-rail::after{
    content:"";
    position:absolute;
    inset:0;
  }

  .rushd-f30-rail::before{
    background:
      repeating-linear-gradient(
        0deg,
        transparent 0 7px,
        rgba(14,31,61,.34) 8px 9px,
        transparent 10px 15px
      ),
      repeating-linear-gradient(
        115deg,
        transparent 0 17px,
        rgba(228,48,54,.30) 18px 19px,
        transparent 20px 33px
      );
    clip-path:
      polygon(
        0 44%,
        100% 20%,
        100% 72%,
        0 92%
      );
  }

  .rushd-f30-rail::after{
    border-top:1px solid rgba(14,31,61,.28);
    border-bottom:1px solid rgba(228,48,54,.16);
    transform:skewX(-18deg);
    opacity:.74;
  }

  .rushd-f30-node i{
    position:relative;
  }

  .rushd-f30-node i::before,
  .rushd-f30-node i::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:42px;
    height:1px;
    transform-origin:left center;
    background:
      linear-gradient(
        90deg,
        rgba(228,48,54,.24),
        transparent
      );
  }

  .rushd-f30-node i::before{
    transform:translateY(-50%) rotate(28deg);
  }

  .rushd-f30-node i::after{
    transform:translateY(-50%) rotate(-34deg);
  }

  /* Floating Arabic / English letters and Arabic numerals */
  .rushd-f30-glyphs{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }

  .rushd-f30-glyphs .g{
    position:absolute;
    font-family:Arial, sans-serif;
    font-weight:900;
    line-height:1;
    color:rgba(14,31,61,.18);
    text-shadow:0 0 12px rgba(228,48,54,.04);
    user-select:none;
  }

  .rushd-f30-glyphs .g:nth-child(3n){
    color:rgba(228,48,54,.20);
  }

  .rushd-f30-glyphs .g:nth-child(4n){
    -webkit-text-stroke:1px rgba(14,31,61,.10);
    color:transparent;
  }

  .rushd-f30-glyphs .g1{left:9%; top:62%; font-size:clamp(1rem,5vw,2.1rem); transform:rotate(-12deg);}
  .rushd-f30-glyphs .g2{left:19%; top:72%; font-size:clamp(.9rem,4.2vw,1.8rem); transform:rotate(9deg);}
  .rushd-f30-glyphs .g3{right:17%; top:64%; font-size:clamp(1.05rem,4.7vw,2rem); transform:rotate(14deg);}
  .rushd-f30-glyphs .g4{right:8%; top:78%; font-size:clamp(.9rem,4vw,1.7rem); transform:rotate(-8deg);}

  .rushd-f30-glyphs .g5{left:11%; top:83%; font-size:clamp(.95rem,4.4vw,1.85rem); transform:rotate(7deg);}
  .rushd-f30-glyphs .g6{left:31%; top:89%; font-size:clamp(.85rem,3.9vw,1.65rem); transform:rotate(-10deg);}
  .rushd-f30-glyphs .g7{right:28%; top:86%; font-size:clamp(.95rem,4.3vw,1.8rem); transform:rotate(11deg);}
  .rushd-f30-glyphs .g8{right:10%; top:91%; font-size:clamp(.85rem,3.8vw,1.6rem); transform:rotate(-7deg);}

  .rushd-f30-glyphs .g9{left:7%; top:69%; font-size:clamp(.85rem,3.8vw,1.6rem); transform:rotate(6deg);}
  .rushd-f30-glyphs .g10{left:40%; top:62%; font-size:clamp(.8rem,3.6vw,1.5rem); transform:rotate(-6deg);}
  .rushd-f30-glyphs .g11{right:34%; top:76%; font-size:clamp(.9rem,4vw,1.7rem); transform:rotate(9deg);}
  .rushd-f30-glyphs .g12{right:7%; top:68%; font-size:clamp(.82rem,3.7vw,1.55rem); transform:rotate(-9deg);}
}


/* =========================================================
   V4 — CLEAN WEB + BETTER GLYPH HIERARCHY
========================================================= */

@media(max-width:767px),
       (min-width:768px) and (orientation:portrait){

  /* ---------------------------------------------------------
     CLEANER REAL SPIDER WEB — BEHIND CHARACTER ONLY
  --------------------------------------------------------- */

  .rushd-f30-grid{
    z-index:1 !important;

    left:50%;
    top:73%;

    width:84vw;
    height:38vh;

    transform:
      translate(-50%,-50%)
      rotate(-3deg);

    opacity:.16;

    background:
      repeating-conic-gradient(
        from 0deg at 50% 52%,
        rgba(14,31,61,.20) 0deg .8deg,
        transparent .8deg 27deg
      ),
      repeating-radial-gradient(
        ellipse at 50% 52%,
        transparent 0 10.5%,
        rgba(228,48,54,.14) 10.8% 11.2%,
        transparent 11.6% 21%
      );

    -webkit-mask:
      radial-gradient(
        ellipse at 50% 52%,
        #000 0 66%,
        transparent 88%
      );

    mask:
      radial-gradient(
        ellipse at 50% 52%,
        #000 0 66%,
        transparent 88%
      );
  }


  /* Keep only one subtle secondary web zone */
  .rushd-f30-diagonal-web--a{
    left:8%;
    top:70%;
    width:74vw;
    height:130px;

    transform:rotate(8deg);

    opacity:.20;
  }

  .rushd-f30-diagonal-web--b{
    display:none !important;
  }

  .rushd-f30-diagonal-web::before{
    opacity:.34;

    background:
      repeating-conic-gradient(
        from 4deg at 50% 50%,
        rgba(14,31,61,.20) 0deg .8deg,
        transparent .8deg 30deg
      ),
      repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0 13%,
        rgba(228,48,54,.13) 13.4% 13.8%,
        transparent 14.2% 26%
      );
  }

  .rushd-f30-diagonal-web::after{
    display:none !important;
  }


  /* ---------------------------------------------------------
     REMOVE FOREGROUND LINES ACROSS CHARACTER
  --------------------------------------------------------- */

  .rushd-f30-rail,
  .rushd-f30-scanline{
    display:none !important;
  }


  /* ---------------------------------------------------------
     LESS NODES / CLEANER UI
  --------------------------------------------------------- */

  .rushd-f30-node--3{
    display:none !important;
  }

  .rushd-f30-node{
    opacity:.68;
  }

  .rushd-f30-node i::before,
  .rushd-f30-node i::after{
    width:24px;
    opacity:.45;
  }


  /* ---------------------------------------------------------
     GLYPH HIERARCHY
  --------------------------------------------------------- */

  .rushd-f30-glyphs{
    z-index:2;
  }

  .rushd-f30-glyphs .g{
    font-family:
      Arial,
      "Tahoma",
      sans-serif;

    font-weight:800;

    color:rgba(14,31,61,.16);

    text-shadow:none;

    opacity:.90;
  }

  .rushd-f30-glyphs .g.is-major{
    font-weight:900;
    color:rgba(228,48,54,.22);
  }

  /* Primary anchors */
  .rushd-f30-glyphs .g1{
    left:8%;
    top:68%;

    font-size:clamp(1.35rem,7vw,2.8rem);

    transform:rotate(-8deg);
  }

  .rushd-f30-glyphs .g3{
    right:9%;
    top:74%;

    font-size:clamp(1.4rem,7.3vw,3rem);

    transform:rotate(7deg);
  }

  .rushd-f30-glyphs .g5{
    left:12%;
    top:84%;

    font-size:clamp(1.25rem,6.5vw,2.6rem);

    transform:rotate(5deg);
  }

  /* Secondary symbols */
  .rushd-f30-glyphs .g2{
    left:24%;
    top:77%;

    font-size:clamp(.72rem,3.3vw,1.35rem);

    transform:rotate(6deg);
  }

  .rushd-f30-glyphs .g4{
    right:24%;
    top:65%;

    font-size:clamp(.75rem,3.5vw,1.4rem);

    transform:rotate(-6deg);
  }

  .rushd-f30-glyphs .g6{
    right:18%;
    top:87%;

    font-size:clamp(.70rem,3.2vw,1.30rem);

    transform:rotate(-8deg);
  }

  .rushd-f30-glyphs .g7{
    left:39%;
    top:91%;

    font-size:clamp(.68rem,3vw,1.2rem);

    transform:rotate(4deg);
  }

  .rushd-f30-glyphs .g8{
    right:38%;
    top:61%;

    font-size:clamp(.66rem,2.9vw,1.15rem);

    transform:rotate(-4deg);
  }


  /* ---------------------------------------------------------
     MAKE FOREGROUND UI LIGHTER
  --------------------------------------------------------- */

  .rushd-f30-front-tag{
    opacity:.72;
  }

  .rushd-f30-panel{
    opacity:.82;
  }

  .rushd-f30-bottom-strip{
    opacity:.65;
  }

  /* Ensure all web/background UI stays behind PNG */
  .rushd-frame30-final-ui__back{
    z-index:1 !important;
  }

  .rushd-frame30-final-ui__png{
    z-index:10 !important;
  }

  .rushd-frame30-final-ui__front{
    z-index:12 !important;
  }

  /* Front should only contain light tags, no web crossing the model */
  .rushd-frame30-final-ui__front .rushd-f30-front-tag,
  .rushd-frame30-final-ui__front .rushd-f30-bottom-strip{
    z-index:13;
  }
}