:root {
  --blue:#1E6FFF; --amber:#F5A623; --green:#00E676; --red:#FF3D57;
  --bg:#050508; --bg2:#09090f; --bg3:#0d0d16; --card:#0b0b14; --card2:#0f0f1c;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.11);
  --border-blue:rgba(30,111,255,0.3); --border-amber:rgba(245,166,35,0.4);
  --text:#dde0f0; --text-dim:rgba(221,224,240,0.72); --text-dimmer:rgba(221,224,240,0.45);
  --white:#fff;
  --fd:'Rajdhani',sans-serif; --fb:'Barlow',sans-serif; --fc:'Barlow Condensed',sans-serif;
  --cw:380px;
}
.op3-custom-html-wrapper > div{overflow: visible !important;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg) !important;color:var(--text);font-family:var(--fb);line-height:1.65;overflow-x:hidden;font-size:16px}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(30,111,255,0.033) 1px,transparent 1px),linear-gradient(90deg,rgba(30,111,255,0.033) 1px,transparent 1px);background-size:64px 
64px;pointer-events:none;z-index:0}
.map-offer-bar{position:relative;z-index:2;width:100%;background:linear-gradient(90deg,#4f72da 0%,#2f20b9 100%);box-shadow:0 10px 28px rgba(0,0,0,0.28);top: 0;left: 0;}
//.map-offer-bar{position:fixed;z-index:2;width:100%;background:linear-gradient(90deg,#4f72da 0%,#2f20b9 100%);box-shadow:0 10px 28px rgba(0,0,0,0.28);top: 0;left: 0;}
.map-offer-inner{max-width:1160px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:16px;min-height:52px}
.map-logo{display:block;width:auto;height:28px;max-width:150px;object-fit:contain}
.map-offer-inner span{font-family:var(--fc);font-size:17px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#fff;line-height:1;white-space:nowrap}
.orb{position:fixed;border-radius:50%;filter:blur(140px);pointer-events:none;z-index:0;animation:pOrb 9s ease-in-out infinite alternate}
.o1{width:700px;height:700px;background:radial-gradient(circle,rgba(30,111,255,0.1) 0%,transparent 70%);top:-200px;left:-200px}
.o2{width:500px;height:500px;background:radial-gradient(circle,rgba(245,166,35,0.09) 0%,transparent 70%);bottom:-100px;right:-100px;animation-delay:-5s}
@keyframes pOrb{0%{opacity:.5;transform:scale(1)}100%{opacity:1;transform:scale(1.1)}}
.page{position:relative;z-index:1;margin:0 auto;}

.page-inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:36px 24px 100px}

/* HEADER */
header{display:flex;justify-content:center;align-items:center;padding:24px 0 10px;margin-bottom:14px}
header img{height:44px;width:auto;max-width:100%;object-fit:contain}
.logo-fb{font-family:var(--fd);font-size:34px;font-weight:700;display:none}
.logo-fb .b{color:var(--blue)}.logo-fb .a{color:var(--amber)}

/* EYEBROW */
.eyebrow{text-align:center;margin-bottom:24px;animation:fup .7s ease both}
.epill{display:inline-flex;align-items:center;gap:10px;font-family:var(--fc);font-size:13px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--amber);border:1px solid 
rgba(245,166,35,0.25);background:rgba(245,166,35,0.05);padding:8px 22px;border-radius:2px}
.edot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* HERO */
.hero{text-align:center;margin-bottom:40px;animation:fup .8s .05s ease both}
.hero h1{font-family:var(--fd) !important;font-size:clamp(36px,5.5vw,68px);font-weight:700 !important;line-height:1.05;color:var(--white) !important;margin-bottom:14px}
.hero h1 .b{color:var(--blue)}.hero h1 .a{color:var(--amber)}
.hero p{font-size:19px;color:var(--text-dim) !important;font-weight:300;font-style:italic;max-width:540px;margin:0 auto 10px}
.hero-tag{font-family:var(--fc);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dimmer)}

/* TWO-COL */
.cols{display:grid;grid-template-columns:1fr var(--cw);gap:28px;align-items:start;margin-bottom:48px}
.lcol{min-width:0}

/* VIDEO */
.vwrap{position:relative;background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-bottom:28px;box-shadow:0 30px 70px rgba(0,0,0,0.5);animation:fup .9s .1s ease both}
.vtl{height:2px;background:linear-gradient(90deg,var(--blue),var(--amber),var(--blue));background-size:200% 100%;animation:shimmer 3s linear infinite}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}
.vi{position:relative;padding-bottom:56.25%;height:0}
.vi iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

/* SEC LABEL */
.slabel{font-family:var(--fc);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.slabel::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-blue),transparent)}

/* SITE CARDS */
.sgrid{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;animation:fup 1s .15s ease both}
.sc{position:relative;background:var(--card);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .3s 
cubic-bezier(.4,0,.2,1);overflow:hidden;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sc::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(30,111,255,0.04),transparent 60%);opacity:0;transition:opacity .3s}
.sc:hover{border-color:rgba(30,111,255,0.3);transform:translateY(-1px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.sc:hover::before,.sc.sel::before{opacity:1}
.sc.sel{border-color:var(--border-amber);box-shadow:0 0 0 1px rgba(245,166,35,0.2),0 16px 50px rgba(0,0,0,0.5)}
.sc.sel::before{background:linear-gradient(120deg,rgba(245,166,35,0.05),transparent 60%)}
.cacc{height:2px;background:linear-gradient(90deg,rgba(30,111,255,0.4),transparent);transition:background .3s}
.sc.sel .cacc{background:linear-gradient(90deg,var(--amber),rgba(245,166,35,0.2))}
.crow{display:flex;align-items:center;gap:18px;padding:20px 22px}
.sico{width:56px;height:56px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .3s}
.si1{background:linear-gradient(135deg,#0a1628,#0d2050);border:1px solid rgba(30,111,255,0.3)}
.si2{background:linear-gradient(135deg,#1a0d00,#2d1a00);border:1px solid rgba(245,166,35,0.3)}
.si3{background:linear-gradient(135deg,#001a12,#003020);border:1px solid rgba(0,230,118,0.3)}
.sico svg{width:28px;height:28px;stroke-width:1.5;fill:none}
.si1 svg{stroke:var(--blue)}.si2 svg{stroke:var(--amber)}.si3 svg{stroke:var(--green)}
.sc.sel .si1{box-shadow:0 0 18px rgba(30,111,255,0.25);border-color:rgba(30,111,255,0.6)}
.sc.sel .si2{box-shadow:0 0 18px rgba(245,166,35,0.25);border-color:rgba(245,166,35,0.6)}
.sc.sel .si3{box-shadow:0 0 18px rgba(0,230,118,0.25);border-color:rgba(0,230,118,0.6)}
.cinfo{flex:1;min-width:0}
.cnum{font-family:var(--fc);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dimmer);font-weight:600;margin-bottom:4px;transition:color .3s}
.sc.sel .cnum{color:var(--amber)}
.ctitle{font-family:var(--fd);font-size:19px;font-weight:700;color:var(--white);margin-bottom:6px;line-height:1.2}
.cdesc{font-size:16px;color:var(--text-dim);font-weight:300;line-height:1.6}
.cchk{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.cchk svg{width:13px;height:13px;stroke:var(--amber);stroke-width:3;fill:none;opacity:0;transform:scale(.4);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.sc.sel .cchk{border-color:var(--amber);background:rgba(245,166,35,0.12)}
.sc.sel .cchk svg{opacity:1;transform:scale(1)}

/* BUNDLE */
.bstrip{position:relative;background:var(--card2);border:1px solid rgba(245,166,35,0.2);border-radius:4px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;transition:all 
.3s;overflow:hidden;animation:fup 1s .2s ease both;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bstrip:hover{border-color:rgba(245,166,35,0.4)}
.bstrip.active{border-color:var(--amber);box-shadow:0 0 0 1px rgba(245,166,35,0.15)}
.bleft{position:relative;z-index:1}
.bbadge{display:inline-block;font-family:var(--fc);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--bg);background:var(--amber);padding:3px 11px;border-radius:2px;margin-bottom:7px;font-weight:800}
.bname{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--white);margin-bottom:3px}
.bnote{font-size:15px;color:var(--text-dim);font-style:italic}
.bright{display:flex;align-items:center;gap:14px;position:relative;z-index:1;flex-shrink:0}
.bprices{text-align:right}
.bwas{font-family:var(--fc);font-size:15px;color:var(--text-dimmer);text-decoration:line-through;letter-spacing:1px}
.bprice{font-family:var(--fd);font-size:32px;font-weight:700;color:var(--amber);line-height:1}
.bsave{font-family:var(--fc);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:700}
.btog{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(245,166,35,0.3);display:flex;align-items:center;justify-content:center;transition:all .3s}
.btog svg{width:16px;height:16px;stroke:var(--amber);stroke-width:2.5;fill:none;opacity:0;transform:scale(.4);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.bstrip.active .btog{border-color:var(--amber);background:rgba(245,166,35,0.1)}
.bstrip.active .btog svg{opacity:1;transform:scale(1)}

/* CART */
.rcol{position:sticky;top:20px;animation:fup .9s .2s ease both}
//.rcol{position:sticky;top:55px;animation:fup .9s .2s ease both}
.cart{background:linear-gradient(180deg,rgba(20,23,44,0.99),rgba(13,15,30,0.99));border:1px solid rgba(88,109,180,0.32);border-radius:4px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(30,111,255,0.08),0 0 36px 
rgba(30,111,255,0.08)}
.ctop{height:3px;background:linear-gradient(90deg,var(--blue),var(--amber));border-radius:4px 4px 0 0}
.chead{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.chico{width:28px;height:28px;border-radius:50%;background:rgba(30,111,255,0.1);border:1px solid rgba(30,111,255,0.25);display:flex;align-items:center;justify-content:center}
.chico svg{width:13px;height:13px;stroke:var(--blue);stroke-width:2;fill:none}
.chead h3{font-family:var(--fc) !important;font-size:14px;font-weight:700 !important;letter-spacing:3px;text-transform:uppercase;color:var(--text) !important;}

/* COUNTDOWN */
.cdown{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid var(--border);background:rgba(245,166,35,0.04)}
.cdl{display:flex;align-items:center;gap:8px}
.cdpulse{width:7px;height:7px;border-radius:50%;background:var(--amber);opacity:.85;animation:blink 2s ease-in-out infinite;flex-shrink:0}
.cdclose{font-family:var(--fc);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dimmer);font-weight:600}
.cdr{display:grid;grid-template-columns:repeat(4,28px);grid-template-rows:auto auto;column-gap:16px;row-gap:4px;position:relative;justify-items:center;align-items:center}
.cddig{display:contents}
.cdseg{font-family:var(--fd);font-size:22px;font-weight:700;color:rgba(245,166,35,0.95);line-height:1;min-width:28px;text-align:center}
.cdcol{position:absolute;top:0;font-family:var(--fd);font-size:20px;font-weight:700;color:rgba(245,166,35,0.35);line-height:1;animation:blink 1s step-start infinite;transform:translateX(-50%)}
.cdcol:nth-of-type(2){left:calc(25% + 4px)}
.cdcol:nth-of-type(4){left:calc(50% + 8px)}
.cdcol:nth-of-type(6){left:calc(75% + 12px)}
/* Sublabels — explicit 13px, never microscopic */
.cdsubs{display:contents}
.cdsub{font-family:var(--fc);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-dimmer);min-width:28px;text-align:center}
.cdsep{display:none}

.cbody{padding:18px 22px}
.cempty{text-align:center;padding:24px 0;color:var(--text-dimmer);font-size:15px;font-style:italic}
.ceicobox{width:36px;height:36px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.ceicobox svg{width:16px;height:16px;stroke:var(--text-dimmer);stroke-width:1.5;fill:none}
.li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.04);animation:slin .3s ease both}
.li:last-of-type{border-bottom:none}
.ldot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:8px}
.ldot.a{background:var(--amber)}
.lname{font-size:15px;color:var(--text);flex:1;line-height:1.4}
.lprice{font-family:var(--fc);font-size:16px;font-weight:700;color:var(--white);flex-shrink:0;letter-spacing:.5px}
.cdiv{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);margin:10px 0}
.ctrow{display:flex;align-items:flex-end;justify-content:space-between;padding-top:6px}
.ctlabel{font-family:var(--fc);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.ctprice{font-family:var(--fd);font-size:48px;font-weight:700;color:var(--white);line-height:1;letter-spacing:-1px;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.csaving{font-family:var(--fc);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:700;text-align:right;margin-top:4px;opacity:0;transform:translateY(4px);transition:all .3s}
.csaving.show{opacity:1;transform:translateY(0)}

.ccta{padding:18px 22px;border-top:1px solid var(--border)}
.cbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:linear-gradient(135deg,var(--blue),#0048cc);color:var(--white);font-family:var(--fc);font-size:17px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border:none;padding:18px 
20px;border-radius:3px;cursor:pointer;position:relative;overflow:hidden;transition:all .3s;box-shadow:0 0 0 1px rgba(30,111,255,0.4),0 16px 50px rgba(30,111,255,0.25)}
.cbtn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left .5s}
.cbtn:hover::before{left:100%}
.cbtn:hover{box-shadow:0 0 0 1px rgba(30,111,255,0.6),0 22px 60px rgba(30,111,255,0.4);transform:translateY(-1px)}
.cbtn.dis{background:linear-gradient(135deg,#141428,#1a1a35);color:var(--text-dimmer);box-shadow:none;cursor:not-allowed;pointer-events:none}
.cbtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0}
.ctrust{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 22px 14px;flex-wrap:wrap}
.titem{display:flex;align-items:center;gap:6px;font-family:var(--fc);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dimmer)}
.titem svg{width:13px;height:13px;stroke:var(--green);stroke-width:2;fill:none}
.nudge{background:rgba(245,166,35,0.05);border:1px solid rgba(245,166,35,0.2);border-radius:3px;padding:12px 15px;margin-top:10px;display:none}
.nudge.show{display:block}
.nudge p{font-size:15px;color:var(--amber);line-height:1.5}
.nudgebtn{display:block;margin-top:8px;font-family:var(--fc);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--amber);font-weight:700;background:none;border:1px solid rgba(245,166,35,0.3);padding:8px 
12px;border-radius:2px;cursor:pointer;transition:all .2s;width:100%}
.nudgebtn:hover{background:rgba(245,166,35,0.08)}

/* AIMPAY CREDIT */
.apcredit{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:13px 18px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:4px}
.apcredit span{font-family:var(--fc);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dimmer);font-weight:600}
.apcredit img{height:24px;width:auto}

/* FEATURES */
.fsec{margin-top:40px;animation:fup 1s .25s ease both}
.fs{background:var(--card);border:1px solid var(--border);border-radius:4px;margin-bottom:4px;overflow:hidden;transition:border-color .3s}
.fs:hover{border-color:rgba(255,255,255,0.1)}
.fsh{display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer}
.fshico{width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fshico svg{width:20px;height:20px;stroke-width:1.5;fill:none}
.fi1{background:linear-gradient(135deg,#0a1628,#0d2050);border:1px solid rgba(30,111,255,0.3)}.fi1 svg{stroke:var(--blue)}
.fi2{background:linear-gradient(135deg,#1a0d00,#2d1a00);border:1px solid rgba(245,166,35,0.3)}.fi2 svg{stroke:var(--amber)}
.fi3{background:linear-gradient(135deg,#001a12,#003020);border:1px solid rgba(0,230,118,0.3)}.fi3 svg{stroke:var(--green)}
.fshin{flex:1}
.fshnum{font-family:var(--fc);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dimmer);font-weight:700;margin-bottom:3px}
.fshtitle{font-family:var(--fd);font-size:19px;font-weight:700;color:var(--white)}
.fshtog{transition:transform .3s;flex-shrink:0}
.fshtog svg{width:18px;height:18px;stroke:var(--text-dimmer);stroke-width:2;fill:none;display:block;transition:stroke .3s}
.fs.open .fshtog{transform:rotate(180deg)}
.fs.open .fshtog svg{stroke:var(--amber)}
.fsbody{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1);content-visibility:auto;contain-intrinsic-size:0 900px}
.fs.open .fsbody{max-height:1200px}
.fscont{padding:0 24px 28px}
.fsintro{font-size:17px;color:var(--text-dim);font-weight:300;line-height:1.7;margin-bottom:20px;font-style:italic;border-left:2px solid var(--border-blue);padding-left:16px}
.fs:nth-child(2) .fsintro{border-left-color:var(--border-amber)}
.fs:nth-child(3) .fsintro{border-left-color:rgba(0,230,118,0.3)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fitem{display:flex;align-items:flex-start;gap:11px;background:var(--bg2);border:1px solid var(--border);border-radius:3px;padding:13px 15px;transition:border-color .25s}
.fitem:hover{border-color:rgba(255,255,255,0.1)}
.fibox{width:30px;height:30px;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.fibox svg{width:14px;height:14px;fill:none;stroke-width:2}
.fib{background:rgba(30,111,255,0.1);border:1px solid rgba(30,111,255,0.2)}.fib svg{stroke:var(--blue)}
.fia{background:rgba(245,166,35,0.1);border:1px solid rgba(245,166,35,0.2)}.fia svg{stroke:var(--amber)}
.fig{background:rgba(0,230,118,0.1);border:1px solid rgba(0,230,118,0.2)}.fig svg{stroke:var(--green)}
.fitxt{flex:1;min-width:0}
.finame{font-family:var(--fd);font-size:17px;font-weight:700;color:var(--white);margin-bottom:4px;line-height:1.2}
.fidesc{font-size:15px;color:var(--text-dim);font-weight:300;line-height:1.6}
/* FIXED legal note — dark bg, left accent border, readable colors */
.lnote{background:rgba(12,5,5,0.9);border:1px solid rgba(255,61,87,0.18);border-left:3px solid rgba(255,80,80,0.5);border-radius:3px;padding:14px 18px;margin-top:16px;display:flex;align-items:flex-start;gap:11px}
.lnote svg{width:18px;height:18px;stroke:rgba(255,100,100,0.65);stroke-width:2;fill:none;flex-shrink:0;margin-top:2px}
.lnote p{font-size:15px;color:rgba(235,195,195,0.8);line-height:1.65;font-weight:300}
.lnote strong{color:rgba(255,165,165,0.95);font-weight:600}

/* ABOUT */
.about{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:40px;margin-top:48px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;animation:fup 1s .3s ease both}
.about-ey{font-family:var(--fc);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:10px}
.about h3{font-family:var(--fd);font-size:26px;font-weight:700;color:var(--white);margin-bottom:14px}
.about p{font-size:16px;color:var(--text-dim);font-weight:300;line-height:1.7;margin-bottom:10px}
.about img.aphoto{width:160px;height:160px;border-radius:4px;object-fit:cover;border:1px solid var(--border2);flex-shrink:0}

/* FOOTER */
footer{border-top:1px solid var(--border);padding-top:40px;text-align:center;margin-top:48px}
footer img.rlogo{height:28px;opacity:.4;margin-bottom:16px}
.fleg{font-size:14px;color:var(--text-dimmer);line-height:1.7;max-width:700px;margin:0 auto 12px}
.fcopy{font-family:var(--fc);font-size:13px;color:var(--text-dimmer);letter-spacing:1px}

/* STICKY BAR */
.sbar{position:fixed;bottom:0;left:0;right:0;background:rgba(9,9,15,0.97);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:200;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.sbar.up{transform:translateY(0)}
.sinn{max-width:1160px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.silabel{font-family:var(--fc);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dimmer);margin-bottom:2px}
.siprice{font-family:var(--fd);font-size:28px;font-weight:700;color:var(--white)}
.sbtn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--blue),#0048cc);color:var(--white);font-family:var(--fc);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 
30px;border-radius:3px;border:none;cursor:pointer;transition:all .3s;white-space:nowrap;box-shadow:0 8px 30px rgba(30,111,255,0.3)}
.sbtn:hover{box-shadow:0 12px 40px rgba(30,111,255,0.45);transform:translateY(-1px)}
.sbtn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}

/* ══════════════════════════════════════════════════════
   AIMPAY DARK MODE PAYMENT MODAL
   ══════════════════════════════════════════════════════
   INTEGRATION GUIDE FOR SAMIR
   ─────────────────────────────────────────────────────
   OVERVIEW:
   This page handles all product selection UI. By the time
   the payment modal opens, we already know exactly which
   products the user wants and the total price. Your job is
   to receive that context, create the AimPay cart session,
   and render the payment form into the pre-built DOM slots.

   PRODUCTS NEEDED IN AIMPAY DATABASE:
   ─────────────────────────────────────
   Create these 3 products with dynamic pricing enabled:
     Product 1: "Lead Funnel Software Site"     — $1,297
     Product 2: "Monthly Workshop Membership"   — $1,297
     Product 3: "AI Product Creator Software"   — $1,297

   Bundle Rule: When all 3 products are in the cart,
   apply a discount so total = $2,997 (saving $894).
   This mirrors how bump pricing logic already works.

   CART SESSION FLOW:
   ─────────────────────────────────────
   1. When user clicks the checkout button, our JS calls:
         window.initAimPaySession(productIds, totalPrice)
      which you implement. productIds is an array like [1,2]
      or [1,2,3] depending on selection.

   2. You create a cart session server-side with those
      product IDs. Use AimPay's existing add/remove cart
      logic — same mechanism as bump checkboxes.

   3. On session creation, inject the cart UUID:
         document.getElementById('aimcframe')
           .dataset.cart = 'YOUR-CART-UUID';
      then call window.aimPaySessionReady() to open the form.

   4. If user had 2 sites and upgrades to bundle via the
      nudge button, call addProductToCart(productId) and
      refresh the session — same as bump refresh logic.

   STRIPE INTEGRATION:
   ─────────────────────────────────────
   Mount Stripe Elements to: #stripe-payment-element
   Use the stripeAppearance object defined in the JS below
   to get the dark theme. Initialize like:
     const stripe = Stripe('pk_live_YOUR_KEY');
     const elements = stripe.elements({
       appearance: stripeAppearance,
       clientSecret: 'YOUR_CLIENT_SECRET'
     });
     const payEl = elements.create('payment');
     payEl.mount('#stripe-payment-element');

   The submit button (#aim-submit) click handler is already
   wired — it calls elements.submit() then your confirm fn.

   PAYPAL INTEGRATION:
   ─────────────────────────────────────
   Render PayPal buttons to: #paypal-button-container
     paypal.Buttons({
       createOrder: (data, actions) => { ... },
       onApprove: (data, actions) => { ... },
       style: { layout:'vertical', color:'blue',
                shape:'rect', label:'pay' }
     }).render('#paypal-button-container');

   TERMS CHECKBOX:
   #aim-terms is already validated before submit fires.
   Also validate server-side.

   T&C TEXT: The dynamic price in the checkbox text is
   set by our JS via data-price attr on #aim-terms-label.
   You can override this server-side after session creation.
   ══════════════════════════════════════════════════════ */

/* Modal overlay */
.moverlay{position:fixed;inset:0;background:rgba(4,4,8,0.97);backdrop-filter:blur(20px);z-index:1000;display:flex;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}
.moverlay.open{opacity:1;visibility:visible}
.mbox{position:relative;background:var(--bg2);border:1px solid rgba(30,111,255,0.15);border-radius:8px;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;transform:translateY(28px) scale(.97);transition:transform .4s 
cubic-bezier(.34,1.56,.64,1);box-shadow:0 60px 120px rgba(0,0,0,0.9),0 0 0 1px rgba(30,111,255,0.08)}
.moverlay.open .mbox{transform:translateY(0) scale(1)}
.mtopbar{height:3px;background:linear-gradient(90deg,var(--blue),var(--amber));border-radius:8px 8px 0 0}
.mclose{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid 
var(--border2);background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:all .2s;z-index:10}
.mclose:hover{background:rgba(255,255,255,0.09);color:var(--white)}
.mclose svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}

/* PAYMENT TABS — exact AimPay structure, dark styled */
.frame-head{display:flex;justify-content:center;gap:12px;padding:24px 24px 0}
.pay-btn{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fc);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 32px;border-radius:50px;border:1.5px solid 
var(--border2);background:rgba(255,255,255,0.03);color:var(--text-dimmer);cursor:pointer;transition:all .25s;min-width:190px}
.pay-btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.pay-btn:hover{background:rgba(255,255,255,0.06);color:var(--text);border-color:var(--border2)}
.pay-btn.selected{background:linear-gradient(135deg,var(--blue),#0048cc);color:var(--white);border-color:var(--blue);box-shadow:0 8px 30px rgba(30,111,255,0.35)}
.pay-btn[data-for="paypal"].selected{background:linear-gradient(135deg,#0070BA,#003087);border-color:#0070BA;box-shadow:0 8px 30px rgba(0,112,186,0.35)}

/* ORDER SUMMARY — mirrors AimPay .order-summary */
.order-summary{margin:20px 24px 0;background:rgba(255,255,255,0.02);border:1px dashed rgba(255,255,255,0.1);border-radius:4px;padding:16px 20px}
.os-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.os-item{display:flex;align-items:flex-start;gap:8px}
.os-label{font-family:var(--fc);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dimmer);font-weight:700;line-height:1.45;padding-top:1px}
.os-value{font-size:16px;color:var(--text);font-weight:500}
.os-value .invoice-line{display:block;line-height:1.45;margin-bottom:4px}
.os-value .invoice-line:last-child{margin-bottom:0}
.os-value .invoice-discount{color:var(--green);font-weight:700}
.os-value .invoice-subtotal{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.08);color:rgba(221,224,240,0.58);font-weight:600}
.os-value .invoice-savings-label{margin-top:4px;color:var(--green);font-weight:400;text-shadow:0 0 16px rgba(0,230,118,0.18)}
.os-value .invoice-savings-badge{display:inline-flex;align-items:center;justify-content:flex-end;justify-self:end;width:max-content;margin-top:4px;margin-left:auto;color:var(--green);font-weight:700;background:rgba(0,230,118,0.09);border:1px 
solid rgba(0,230,118,0.22);border-radius:999px;padding:2px 10px;text-shadow:0 0 16px rgba(0,230,118,0.18)}
.os-value .strike-price{position:relative;color:rgba(221,224,240,0.55);font-weight:700}
.os-value .strike-price::after{content:'';position:absolute;left:-3px;right:-3px;top:50%;height:2px;background:linear-gradient(90deg,rgba(255,61,87,0.25),var(--red),rgba(255,61,87,0.25));transform:rotate(-7deg);box-shadow:0 0 10px 
rgba(255,61,87,0.3)}

.os-nr{font-family:var(--fc);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,110,110,0.75);font-weight:700;background:rgba(255,61,87,0.07);border:1px solid rgba(255,61,87,0.18);padding:3px 10px;border-radius:2px}
.os-total{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.os-total-amount{display:flex;justify-content:flex-end;align-items:center;gap:10px;text-align:right}
.os-total-label{font-family:var(--fc);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.os-total-price{font-family:var(--fd);font-size:30px;font-weight:700;color:var(--white);letter-spacing:-.5px}

/* PAY AREAS */
.pay-area{padding:20px 24px 0;display:none}
.pay-area.active{display:block}

/* Non-refundable notice inside modal */
.m-nonrefund{background:rgba(12,5,5,0.95);border:1px solid rgba(255,61,87,0.18);border-left:3px solid rgba(255,80,80,0.5);border-radius:3px;padding:13px 16px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px}
.m-nonrefund svg{width:18px;height:18px;stroke:rgba(255,100,100,0.65);stroke-width:2;fill:none;flex-shrink:0;margin-top:2px}
.m-nonrefund p{font-size:15px;color:rgba(235,195,195,0.85);line-height:1.6;font-weight:300}
.m-nonrefund strong{color:rgba(255,165,165,0.95);font-weight:600}

/* Stripe payment element slot */
/* SAMIR: Stripe mounts its iframe here via payEl.mount('#stripe-payment-element') */
#stripe-payment-element{min-height:200px;border-radius:4px;margin-bottom:16px;transition:min-height .35s}

/* Terms */
.terms-block{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding:13px 16px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:3px}
#aim-terms,#aim-terms-pp{width:20px;height:20px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;margin-top:3px}
#aim-terms-label,.terms-block label{font-size:15px;color:var(--text-dim);line-height:1.55;cursor:pointer}
#aim-terms-label strong,.terms-block label strong{color:rgba(255,165,165,0.9)}
#aim-terms-label a,.terms-block label a{color:var(--amber);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.terms-err{font-size:14px;color:var(--red);margin-bottom:14px;display:none}
.terms-err.show{display:block}

/* Submit / Order Now button */
/* SAMIR: Wire this button to your Stripe elements.submit() then confirmPayment() */
#aim-submit{width:100%;padding:19px;background:linear-gradient(135deg,#3da830,#2a8a1c);color:var(--white);font-family:var(--fc);font-size:19px;font-weight:800;letter-spacing:3px;text-transform:uppercase;border:none;border-radius:4px;cursor:pointer;transition:all 
.3s;box-shadow:0 8px 30px rgba(61,168,48,0.35);position:relative;overflow:hidden;margin-bottom:4px}
#aim-submit::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);transition:left .5s}
#aim-submit:hover::before{left:100%}
#aim-submit:hover{box-shadow:0 12px 40px rgba(61,168,48,0.5);transform:translateY(-1px)}
#aim-submit:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

/* PayPal slot */
/* SAMIR: PayPal Smart Buttons render here via .render('#paypal-button-container') */
#paypal-button-container{min-height:130px;border-radius:4px;margin-bottom:16px;display:flex;flex-direction:column;align-items:stretch;gap:10px}

/* Frame footer — trust seals */
.frame-foot{padding:16px 24px 22px;text-align:center;border-top:1px solid var(--border);margin-top:8px}
.frame-foot h2{font-family:var(--fc);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dimmer);margin-bottom:12px;font-weight:700}
.frame-foot img{max-width:461px;width:100%;opacity:.75;filter:brightness(1.2)}

/* TERMS ALERT */
.talert{position:fixed;inset:0;background:rgba(4,4,8,0.95);backdrop-filter:blur(12px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:all .3s}
.talert.open{opacity:1;visibility:visible}
.tabox{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;max-width:480px;width:100%;padding:32px;box-shadow:0 40px 80px rgba(0,0,0,0.8);transform:scale(.95);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.talert.open .tabox{transform:scale(1)}
.taico{width:40px;height:40px;border-radius:50%;background:rgba(255,61,87,0.1);border:1px solid rgba(255,61,87,0.3);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.taico svg{width:20px;height:20px;stroke:var(--red);stroke-width:2;fill:none}
.tatitle{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--white);margin-bottom:12px}
.tabody{font-size:16px;color:var(--text-dim);line-height:1.7;margin-bottom:24px}
.tabody strong{color:var(--white)}
.taclose{width:100%;padding:15px;background:var(--blue);color:var(--white);font-family:var(--fc);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border:none;border-radius:3px;cursor:pointer;transition:all .2s}
.taclose:hover{background:#1a5fd4}

/* ANIMATIONS */
@keyframes fup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes ppop{0%{transform:scale(1)}50%{transform:scale(1.07);color:var(--amber)}100%{transform:scale(1)}}

/* RESPONSIVE */
@media(max-width:960px){.cols{grid-template-columns:1fr}.rcol{position:static;order:2}.lcol{display:contents}.vwrap,.slabel,.sgrid,.bstrip{order:1}.fsec,.about,footer{order:3}.about{grid-template-columns:1fr}.about 
img.aphoto{width:100%;height:200px}.fgrid{grid-template-columns:1fr}.bstrip{flex-direction:column;align-items:flex-start}}
@media(max-width:768px){.orb{filter:blur(60px);opacity:.55}.o1{width:420px;height:420px}.o2{width:340px;height:340px}.page{padding:28px 16px 120px}.map-offer-inner{min-height:48px;padding:9px 
16px;gap:12px}.map-logo{height:24px;max-width:128px}.map-offer-inner span{font-size:15px;letter-spacing:2.4px}header{padding:18px 0 8px;margin-bottom:12px}header 
img{height:auto;width:min(86vw,360px);max-height:36px}.logo-fb{font-size:clamp(26px,8vw,32px)}.crow{padding:18px 
16px;gap:14px}.cdesc{font-size:15px}.cdown{align-items:flex-start;gap:12px}.cdr{grid-template-columns:repeat(4,26px);column-gap:12px}.cdseg{font-size:20px;min-width:26px}.cdsub{font-size:13px;min-width:26px}}
@media(max-width:600px){.frame-head{gap:8px}.pay-btn{min-width:unset;flex:1;padding:12px 
16px;font-size:13px}.os-total{align-items:flex-start}.os-total-amount{flex-direction:column;align-items:flex-end;gap:0}.ctprice{font-size:40px}.sinn{flex-direction:column;gap:12px}.sbtn{width:100%;justify-content:center}}
@media(max-width:420px){.map-offer-inner{gap:10px}.map-logo{height:22px;max-width:116px}.map-offer-inner span{font-size:14px;letter-spacing:2px}header img{width:min(82vw,320px);max-height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.orb{display:none}}
