/* 
  GRADEO Landing Page Specific Styles
  Modularized for Professional Performance
*/

/* Skip link — keyboard/screen reader nav */
.skip-link{position:absolute;top:-100px;left:12px;z-index:99999;padding:8px 16px;background:var(--o);color:#fff;font-weight:800;font-size:13px;border-radius:0 0 10px 10px;transition:top .16s;}
.skip-link:focus{top:0;outline:none;}

/* ── Mobile tap feedback ── */
@media(hover:none){
  .tile:active,.mTile:active,.btn:active,button:active,.fq:active{
    opacity:.75;transform:scale(.97)!important;
    transition:opacity .08s,transform .08s!important;
  }
  .mTab:active{opacity:.7;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ── THEME RIPPLE ── */
#thRipple{position:fixed;inset:0;z-index:8900;pointer-events:none;border-radius:50%;transform:scale(0);opacity:0;}
#thRipple.go{animation:trX var(--td) var(--sm) forwards;}
@keyframes trX{0%{transform:scale(0);opacity:.22;}60%{opacity:.13;}100%{transform:scale(5);opacity:0;}}

/* ── PAGE TRANSITION ── */
#ptOv{position:fixed;inset:0;z-index:7000;background:var(--o);opacity:0;pointer-events:none;}
#ptOv.lift{animation:ptL .42s var(--sm) forwards;}
@keyframes ptL{0%{opacity:0;transform:translateY(100%)}15%{opacity:1;transform:none}100%{opacity:1;transform:translateY(-100%)}}

/* ── DESKTOP CURSOR ── */
#cur, #curRing { position:fixed; pointer-events:none; z-index:9999; top:0; left:0; transform:translate(-50%,-50%); opacity:0; will-change:transform; }
#cur { width:10px; height:10px; border-radius:50%; background:var(--o); transition:width .1s var(--sp),height .1s var(--sp),opacity .1s,background .2s; }
#curRing { width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,106,0,.55); transition:width .18s var(--sp),height .18s var(--sp),border-color .15s,opacity .15s; z-index:9998; }
body.cur-ready #cur, body.cur-ready #curRing { opacity:1; }
body.cc #cur { width:6px; height:6px; background:var(--od); }
body.cc #curRing { width:22px; height:22px; border-color:rgba(255,106,0,.90); }
@media(max-width:1023px){#cur,#curRing{display:none;}body{cursor:auto;}}

/* ── BG ORBS ── */
.bgs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;}
.bg1,.bg2,.bg3,.bg4{position:absolute;border-radius:50%; animation-duration: 20s; animation-iteration-count: infinite; animation-direction: alternate; }
.bg1{width:80vw;height:80vw;top:-30vw;left:-20vw;background:radial-gradient(circle,rgba(255,106,0,.20),transparent 70%); animation-name: b1; }
@keyframes b1{to{transform:translate(5%,4%)scale(1.06)}}
@media(max-width:767px){.bgs{display:none!important;}}

/* ── TILES ── */
.tg{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;}
.tile{
  background:var(--cardBg);border:1.5px solid var(--id);
  border-radius:var(--r);padding:20px 18px 16px;cursor:none;
  min-height:106px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden; border-left:3px solid var(--o);
  box-shadow: 0 4px 12px var(--border);
}
.tile:hover{transform:translateY(-5px) scale(1.012);border-color:var(--o);box-shadow:0 12px 24px rgba(255,106,0,0.12);}

/* ── MOBILE SHELL ── */
@media(max-width:767px){
  #mApp{ position:fixed;inset:0; display:flex;flex-direction:column; background:var(--bg); }
  #mTrack{ display:flex; height:100%; transition:transform .36s cubic-bezier(.22,.68,0,1.2); }
  .mPanel{ flex:0 0 100vw; width:100vw; height:100%; overflow-y:auto; padding:0 16px 120px 16px; }
  #diIsland{ 
    position:fixed; bottom: 20px; left: 16px; right: 16px;
    display:flex;align-items:center; background:#0A0806; border-radius:26px; padding:5px;
    box-shadow: 0 16px 48px rgba(0,0,0,.60); backdrop-filter:blur(40px) saturate(3);
  }
}

/* ── PWA & INTERACTION ── */
#ptrHint{
  position:fixed;top:0;left:50%; transform:translate(-50%,-100%); z-index:9500;
  background:var(--o);color:#fff; font-size:12px;font-weight:700; padding:9px 22px;
  border-radius:0 0 20px 20px; pointer-events:none; white-space:nowrap;
  box-shadow:0 4px 20px rgba(255,106,0,.4); display:none; opacity:0;
}
#pwaSheet{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:8500;
  background:var(--surface);border-top:1px solid var(--cb);
  border-radius:24px 24px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,.18);
  padding:0 0 env(safe-area-inset-bottom,0);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#pwaSheet.open{transform:translateY(0);}
#pwaBackdrop{position:fixed;inset:0;z-index:8400;background:rgba(0,0,0,.4);display:none;opacity:0;transition:opacity .3s;}
#pwaBackdrop.open{display:block;opacity:1;}