/* ============ BASE / APP-NATIVE ============ */
  * { -webkit-tap-highlight-color: transparent; }
  html { overscroll-behavior-y: none; }
  body { text-rendering: optimizeLegibility; }
  ::selection { background:#1273E6; color:#fff; }
  ::-webkit-scrollbar { width:10px; }
  ::-webkit-scrollbar-track { background:#0A2540; }
  ::-webkit-scrollbar-thumb { background:#1273E6; border-radius:8px; }

  /* ============ PRELOADER ============ */
  #preloader{position:fixed;inset:0;z-index:100;background:#081A33;display:flex;flex-direction:column;gap:1.25rem;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
  #preloader.done{opacity:0;visibility:hidden}
  .pre-logo{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#1273E6,#06B6D4);display:grid;place-items:center;color:#fff;font-size:1.8rem;animation:prePulse 1.4s ease-in-out infinite}
  @keyframes prePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(18,115,230,.5)}50%{transform:scale(1.08);box-shadow:0 0 0 22px rgba(18,115,230,0)}}
  .pre-bar{width:180px;height:3px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden}
  .pre-bar span{display:block;height:100%;width:40%;background:linear-gradient(90deg,#1273E6,#22D3EE);border-radius:99px;animation:preLoad 1.1s ease-in-out infinite}
  @keyframes preLoad{0%{transform:translateX(-100%)}100%{transform:translateX(450%)}}

  /* ============ HERO SLIDER ============ */
  .hero-slide{opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),visibility .9s}
  .hero-slide.active{opacity:1;visibility:visible;transform:scale(1)}
  .hero-slide [data-anim]{opacity:0;transform:translateY(28px);transition:all .8s cubic-bezier(.22,1,.36,1)}
  .hero-slide.active [data-anim]{opacity:1;transform:none}
  .hero-slide.active [data-anim="1"]{transition-delay:.15s}
  .hero-slide.active [data-anim="2"]{transition-delay:.3s}
  .hero-slide.active [data-anim="3"]{transition-delay:.45s}
  .hero-slide.active [data-anim="4"]{transition-delay:.6s}
  .hero-slide.active [data-anim="5"]{transition-delay:.75s}

  .dot{position:relative;width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;cursor:pointer}
  .dot span{position:absolute;inset:0;background:linear-gradient(90deg,#1273E6,#22D3EE);transform:scaleX(0);transform-origin:left}
  .dot.active span{animation:dotProgress 6s linear forwards}
  @keyframes dotProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* ============ SCROLL REVEAL ============ */
  [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
  [data-reveal].revealed{opacity:1;transform:none}
  [data-reveal="left"]{transform:translateX(-48px)}
  [data-reveal="right"]{transform:translateX(48px)}
  [data-reveal="zoom"]{transform:scale(.9)}
  [data-reveal].revealed{transform:none}

  /* ============ MARQUEE ============ */
  .marquee{overflow:hidden;position:relative}
  .marquee-track{display:flex;gap:4rem;width:max-content;animation:marquee 28s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ============ FLOATING / BLOBS ============ */
  .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:blob 14s ease-in-out infinite}
  @keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}
  .float-y{animation:floatY 5s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

  /* ============ GRID PATTERN ============ */
  .grid-pattern{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px}

  /* ============ RIPPLE (app-native) ============ */
  .ripple{position:relative;overflow:hidden}
  .ripple-ink{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ink .6s ease-out forwards;pointer-events:none}
  @keyframes ink{to{transform:scale(4);opacity:0}}

  /* ============ MOBILE DRAWER ============ */
  .drawer{transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .drawer.open{transform:translateX(0)}

  /* ============ FEATURE TABS ============ */
  .ftab{transition:all .3s}
  .ftab.active{background:linear-gradient(135deg,#1273E6,#0B63C5);color:#fff;box-shadow:0 14px 34px -12px rgba(11,99,197,.55);transform:translateX(6px)}
  .fpanel{display:none;animation:panelIn .5s cubic-bezier(.22,1,.36,1)}
  .fpanel.active{display:block}
  @keyframes panelIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* ============ TESTIMONIALS ============ */
  #testiTrack{transition:transform .7s cubic-bezier(.22,1,.36,1)}

  /* ============ BOTTOM NAV (app) ============ */
  .bnav-item{transition:all .25s}
  .bnav-item.active{color:#1273E6;transform:translateY(-4px)}
  .bnav-item.active .bnav-dot{opacity:1;transform:scale(1)}
  .bnav-dot{opacity:0;transform:scale(0);transition:all .25s}

  /* ============ MISC ============ */
  .text-gradient{background:linear-gradient(90deg,#3B9DF8,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
  .card-hover{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
  .card-hover:hover{transform:translateY(-10px)}
  .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #toast{transform:translateY(120%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
  #toast.show{transform:translateY(0)}