/* ============================================================
   Ridoy Studio — custom styles
   (Tailwind utilities are generated at runtime by js/vendor/tailwind-3.4.17.js)
   ============================================================ */

:root{
  --amber:#F5A623;
  --amber-dark:#C47F0E;
  --amber-light:#FFCB6B;
  --sky:#4FC3F7;
  --sky-dark:#0284C7;
  --navy:#0B1526;
  --navy-800:#0F1F38;
  --navy-600:#1C3A60;
  --float-btn-size:3.5rem;
  --float-btn-gap:0.75rem;
  --float-btn-inset:1.5rem;
}
*{box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;margin:0;background:#FAFBFF;color:#1a1a2e;overflow-x:hidden}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
.font-display{font-family:'Space Grotesk',sans-serif}
.font-mono{font-family:'JetBrains Mono',monospace}
::selection{background:rgba(245,166,35,0.3)}

/* ---------- Reduced motion: master kill-switch ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Custom cursor ---------- */
html.has-cursor, html.has-cursor *{cursor:none}
#cursor-dot{position:fixed;width:6px;height:6px;background:var(--amber);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:9999;top:0;left:0;display:none}
#cursor-ring{position:fixed;width:34px;height:34px;border:1.5px solid rgba(245,166,35,0.55);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:9998;top:0;left:0;transition:width .25s,height .25s,border-color .25s,background .25s;display:none}
html.has-cursor #cursor-dot,html.has-cursor #cursor-ring{display:block}
#cursor-ring.cursor-hover{width:56px;height:56px;background:rgba(245,166,35,0.08);border-color:var(--amber)}

/* ---------- Page loader ---------- */
#page-loader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#FAFBFF;transition:opacity .5s ease,visibility .5s ease}
#page-loader.loader-done{opacity:0;visibility:hidden}
.loader-cursor{animation:blink .8s step-end infinite}

/* ---------- Scroll progress ---------- */
#scroll-progress{position:fixed;top:0;left:0;height:3px;z-index:100;background:linear-gradient(90deg,var(--amber),var(--sky));width:0%}

/* ---------- Keyframes ---------- */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes float1{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(3deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(-2deg)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-12px)}}
.float-1{animation:float1 6s ease-in-out infinite}
.float-2{animation:float2 8s ease-in-out infinite}
.float-3{animation:float3 7s ease-in-out infinite}

@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes letterIn{to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes dots{0%,100%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes confettiBurst{to{transform:translate(var(--dx),calc(var(--dy) + 220px)) rotate(var(--rot));opacity:0}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}

@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
  .reveal.visible{opacity:1;transform:translateY(0)}
  .reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
  .reveal-left.visible{opacity:1;transform:translateX(0)}
  .reveal-right{opacity:0;transform:translateX(36px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
  .reveal-right.visible{opacity:1;transform:translateX(0)}
  .reveal-scale{opacity:0;transform:scale(0.9) rotate(-2deg);transition:opacity .5s cubic-bezier(.34,1.4,.64,1),transform .5s cubic-bezier(.34,1.4,.64,1)}
  .reveal-scale.visible{opacity:1;transform:scale(1) rotate(0)}
  .hero-anim{animation:slideUp .8s cubic-bezier(.22,1,.36,1) forwards;opacity:0}
  .hero-anim-d1{animation-delay:.1s}.hero-anim-d2{animation-delay:.25s}.hero-anim-d4{animation-delay:.55s}.hero-anim-d5{animation-delay:.7s}
  .terminal-anim{animation:scaleIn .7s cubic-bezier(.22,1,.36,1) .4s forwards;opacity:0}
  .letter{display:inline-block;opacity:0;transform:translateY(20px) rotate(6deg);animation:letterIn .5s cubic-bezier(.22,1,.36,1) forwards}
  .marquee-track{animation:marquee 30s linear infinite}
  .marquee-wrap:hover .marquee-track{animation-play-state:paused}
  .process-line-fill{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
  .draw .process-line-fill{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none}
  .hero-anim,.terminal-anim{opacity:1;animation:none}
  .letter{opacity:1;transform:none}
  .process-line-fill{transform:scaleX(1)}
  .animate-ping{animation:none}
}

/* ---------- Buttons ---------- */
.magnetic{transition:transform .2s cubic-bezier(.22,1,.36,1);display:inline-flex}
.btn-primary{background:var(--amber);color:#0B1526}
.btn-primary:hover{background:var(--amber-dark)}
.btn-secondary{background:transparent;border:2px solid #E2E8F0;color:#0B1526}
.btn-secondary:hover{border-color:var(--amber);background:#FFFBEB}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-shine:hover::after{left:125%}
.is-loading .btn-label{display:none}
.is-loading .btn-spinner{display:flex}
.btn-spinner{display:none}
.spin{animation:spin .8s linear infinite}

/* ---------- Nav ---------- */
.nav-scrolled{background:rgba(250,251,255,0.92);backdrop-filter:blur(16px);box-shadow:0 1px 3px rgba(0,0,0,0.06)}
#nav-pill{position:absolute;top:4px;height:calc(100% - 8px);border-radius:8px;background:rgba(245,166,35,0.1);transition:left .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),opacity .2s;opacity:0;z-index:0}
.nav-link{position:relative;z-index:1}
.toggle-btn{background:#F1F5F9;border:1px solid #E2E8F0;border-radius:8px;padding:6px 10px;cursor:pointer;color:#334155;font-size:13px;font-weight:600;transition:all .2s}
.toggle-btn:hover{border-color:var(--amber);background:#FEF3C7}
.lang-flip{display:inline-block;transition:transform .3s}

/* ---------- Hamburger ---------- */
.menu-burger{
  position:relative;
  width:44px;
  height:44px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  color:var(--navy);
}
.menu-burger-line{
  display:block;
  width:22px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s,width .25s;
  transform-origin:center;
}
.menu-burger.is-open .menu-burger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-burger.is-open .menu-burger-line:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-burger.is-open .menu-burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Mobile menu (terminal slide-in) ---------- */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
}
.mobile-menu:not(.hidden){
  display:block;
  pointer-events:auto;
}
.mobile-menu.hidden{
  pointer-events:none;
}
.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  border:none;
  padding:0;
  cursor:pointer;
  background:rgba(11,21,38,0.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .4s ease;
}
.mobile-menu:not(.hidden).is-active:not(.is-closing) .mobile-menu-backdrop{opacity:1}
.mobile-menu.is-closing .mobile-menu-backdrop{opacity:0}

.mobile-menu-panel{
  --menu-pad:1rem;
  --menu-pad-l:max(var(--menu-pad),env(safe-area-inset-left,0px));
  --menu-pad-r:max(var(--menu-pad),env(safe-area-inset-right,0px));
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:auto;
  width:min(100%,22.5rem);
  max-width:100%;
  display:flex;
  flex-direction:column;
  background:linear-gradient(165deg,#0F1F38 0%,#0B1526 52%,#080f1a 100%);
  border-left:1px solid rgba(245,166,35,0.14);
  box-shadow:-24px 0 64px rgba(0,0,0,0.35);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-sizing:border-box;
}
.mobile-menu:not(.hidden).is-active:not(.is-closing) .mobile-menu-panel{transform:translateX(0)}
.mobile-menu.is-closing .mobile-menu-panel{transform:translateX(100%)}

.mobile-menu-chrome{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-shrink:0;
  padding:.5rem var(--menu-pad-r) .5rem var(--menu-pad-l);
  background:rgba(30,41,59,0.85);
  border-bottom:1px solid rgba(51,65,85,0.8);
  position:relative;
  z-index:2;
  box-sizing:border-box;
}

.mobile-menu-body{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:0;
  min-width:0;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,0.35) transparent;
  padding-left:var(--menu-pad-l);
  padding-right:var(--menu-pad-r);
}

.mobile-menu-glow{
  position:absolute;
  top:-12%;
  right:0;
  width:11rem;
  height:11rem;
  background:radial-gradient(circle at 100% 0%,rgba(245,166,35,0.14),transparent 70%);
  pointer-events:none;
  z-index:0;
}
.mobile-menu-scanline{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.04;
  z-index:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.5) 2px,rgba(255,255,255,0.5) 3px);
}

.mobile-menu-dots{display:flex;align-items:center;gap:.35rem}
.mobile-dot{width:.55rem;height:.55rem;border-radius:50%}
.mobile-dot-r{background:#FF5F57}
.mobile-dot-y{background:#FFBD2E}
.mobile-dot-g{background:#28CA41}
.mobile-menu-tab{
  font-size:10px;
  color:#94A3B8;
  margin-left:.35rem;
}
.mobile-menu-live{
  margin-left:auto;
  font-size:9px;
  color:#34D399;
  letter-spacing:.04em;
  flex-shrink:0;
  white-space:nowrap;
}

.mobile-menu-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:.75rem;
  padding:.75rem 0 .25rem;
  position:relative;
  z-index:1;
  width:100%;
}
.mobile-menu-brand{
  font-size:1.05rem !important;
  line-height:1.2;
  text-align:left;
  justify-self:start;
}
.mobile-menu-close{
  width:1.625rem;
  height:1.625rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  border-radius:.45rem;
  border:1px solid rgba(148,163,184,0.2);
  background:rgba(15,23,42,0.55);
  color:#CBD5E1;
  cursor:pointer;
  line-height:0;
  transition:background .2s,border-color .2s,color .2s;
}
.mobile-menu-close svg{
  display:block;
  width:14px !important;
  height:14px !important;
}
.mobile-menu-close:hover{
  background:rgba(245,166,35,0.12);
  border-color:rgba(245,166,35,0.35);
  color:var(--amber-light);
}

.mobile-menu-prompt{
  margin:0;
  padding:0 0 .55rem;
  font-size:9.5px;
  color:#64748B;
  letter-spacing:.02em;
  text-align:left;
  position:relative;
  z-index:1;
}

.mobile-menu-nav{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:visible;
  position:relative;
  z-index:1;
  padding:0;
  min-width:0;
}
.mobile-nav-item{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem .2rem .6rem 0;
  margin-bottom:.1rem;
  border-radius:.7rem;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  color:#E2E8F0;
  text-decoration:none;
  border:1px solid transparent;
  opacity:0;
  transform:translateX(.75rem);
  transition:
    opacity .45s cubic-bezier(.22,1,.36,1),
    transform .45s cubic-bezier(.22,1,.36,1),
    background .2s,
    border-color .2s;
}
.mobile-menu:not(.hidden).is-active:not(.is-closing) .mobile-nav-item{
  opacity:1;
  transform:translateX(0);
}
.mobile-menu.is-closing .mobile-nav-item{
  opacity:0;
  transform:translateX(1rem);
  transition-duration:.25s;
}
.mobile-nav-item:nth-child(1){transition-delay:.06s}
.mobile-nav-item:nth-child(2){transition-delay:.1s}
.mobile-nav-item:nth-child(3){transition-delay:.14s}
.mobile-nav-item:nth-child(4){transition-delay:.18s}
.mobile-nav-item:nth-child(5){transition-delay:.22s}
.mobile-nav-item:nth-child(6){transition-delay:.26s}
.mobile-nav-item:active,
.mobile-nav-item:focus-visible{
  background:rgba(245,166,35,0.08);
  border-color:rgba(245,166,35,0.2);
  outline:none;
}
.mobile-nav-num{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;
  font-weight:600;
  color:var(--amber);
  opacity:.85;
  min-width:1.2rem;
}
.mobile-nav-body{flex:1;min-width:0}
.mobile-nav-label{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
}
.mobile-nav-cmd{
  display:block;
  margin-top:.12rem;
  font-size:9px;
  color:#64748B;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-nav-arrow{
  width:.875rem;
  height:.875rem;
  color:#64748B;
  flex-shrink:0;
  transition:transform .25s,color .25s;
}
.mobile-nav-item:hover .mobile-nav-arrow,
.mobile-nav-item:focus-visible .mobile-nav-arrow{
  color:var(--amber);
  transform:translate(2px,-2px);
}

/* SaaS promo card */
.mobile-saas-wrap{
  position:relative;
  z-index:1;
  flex-shrink:0;
  padding:0 0 .65rem;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding-right: 15px;
}
.mobile-saas-card{
  width:100%;
  padding:.85rem;
  border-radius:.85rem;
  background:linear-gradient(145deg,rgba(245,166,35,0.14) 0%,rgba(11,21,38,0.92) 55%);
  border:1px solid rgba(245,166,35,0.32);
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  box-sizing:border-box;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s .24s,transform .45s .24s;
}
.mobile-menu:not(.hidden).is-active:not(.is-closing) .mobile-saas-card{
  opacity:1;
  transform:translateY(0);
}
.mobile-menu.is-closing .mobile-saas-card{
  opacity:0;
  transform:translateY(10px);
  transition-duration:.2s;
}
.mobile-saas-badge{
  display:inline-block;
  font-size:9px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--amber-light);
  background:rgba(245,166,35,0.12);
  border:1px solid rgba(245,166,35,0.28);
  padding:.2rem .45rem;
  border-radius:9999px;
  margin-bottom:.55rem;
}
.mobile-saas-title{
  margin:0 0 .35rem;
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
  color:#F8FAFC;
}
.mobile-saas-desc{
  margin:0 0 .7rem;
  font-size:11px;
  line-height:1.55;
  color:#94A3B8;
}
.mobile-saas-prices{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin-bottom:.75rem;
}
.mobile-saas-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.45rem;
  padding:.45rem .55rem;
  border-radius:.6rem;
  background:rgba(15,23,42,0.55);
  border:1px solid rgba(148,163,184,0.14);
  min-width:0;
}
.mobile-saas-plan{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:11px;
  font-weight:600;
  color:#E2E8F0;
  min-width:0;
  flex:1;
}
.mobile-saas-icon{width:13px;height:13px;flex-shrink:0;color:var(--amber)}
.mobile-saas-price{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:#CBD5E1;
  white-space:nowrap;
  flex-shrink:0;
  text-align:right;
}
.mobile-saas-price strong{
  font-size:13px;
  font-weight:700;
  color:var(--amber-light);
}
.mobile-saas-per{
  font-size:9px;
  color:#64748B;
  margin-left:.1rem;
}
.mobile-saas-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  width:100%;
  max-width:100%;
  min-height:42px;
  padding:.65rem .85rem;
  border-radius:.65rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.8rem;
  font-weight:700;
  background:var(--amber);
  color:#0B1526;
  text-decoration:none;
  box-sizing:border-box;
  transition:background .2s,transform .2s;
}
.mobile-saas-cta:hover{background:var(--amber-dark)}

.mobile-menu-foot{
  position:relative;
  z-index:1;
  padding:1rem 0 1.25rem;
  border-top:1px solid rgba(148,163,184,0.12);
  background:linear-gradient(180deg,transparent,rgba(8,15,26,0.65));
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding-right: 15px;
}
.mobile-wa-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  max-width:100%;
  min-height:48px;
  padding:.85rem 1rem;
  border-radius:.75rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.9rem;
  font-weight:700;
  box-sizing:border-box;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s .28s,transform .45s .28s;
}
.mobile-menu:not(.hidden).is-active:not(.is-closing) .mobile-wa-cta{
  opacity:1;
  transform:translateY(0);
}
.mobile-menu-meta{
  margin:.85rem 0 0;
  text-align:center;
  font-size:9px;
  color:#64748B;
  letter-spacing:.03em;
  opacity:0;
  transition:opacity .45s .34s;
}
.mobile-menu:not(.hidden).is-active:not(.is-closing) .mobile-menu-meta{opacity:1}

@media(prefers-reduced-motion:reduce){
  .mobile-menu-panel,
  .mobile-menu-backdrop,
  .mobile-nav-item,
  .mobile-saas-card,
  .mobile-wa-cta,
  .mobile-menu-meta,
  .menu-burger-line{transition-duration:.001ms !important}
  .mobile-menu.is-closing .mobile-menu-panel{transform:translateX(100%)}
}

/* ---------- Service cards (3D tilt + spotlight) ---------- */
.tilt-card{transition:transform .15s ease,box-shadow .3s ease;transform-style:preserve-3d;position:relative}
.tilt-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(245,166,35,0.14),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.tilt-card:hover::before{opacity:1}
.tilt-card:hover{box-shadow:0 24px 48px rgba(245,166,35,0.14),0 8px 16px rgba(0,0,0,0.06)}
.svc-icon-wrap{transition:transform .3s cubic-bezier(.34,1.4,.64,1),background .3s}
.tilt-card:hover .svc-icon-wrap{transform:rotate(-8deg) scale(1.1)}
.svc-accent{position:absolute;top:0;left:0;width:4px;height:100%;background:var(--amber);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.tilt-card:hover .svc-accent{transform:scaleY(1)}

/* ---------- Stat hover ---------- */
.stat-card{transition:transform .2s}
.stat-card:hover{transform:scale(1.06)}

/* ---------- Experience timeline ---------- */
.xp-item{position:relative;padding-left:2.25rem}
.xp-item::before{content:'';position:absolute;left:9px;top:26px;bottom:-14px;width:2px;background:linear-gradient(180deg,rgba(245,166,35,0.5),rgba(79,195,247,0.25))}
.xp-item:last-child::before{display:none}
.xp-dot{position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:white;border:2px solid var(--amber);display:flex;align-items:center;justify-content:center}
.xp-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--amber)}
.xp-card{border:1px solid #E2E8F0;background:white;transition:transform .2s,box-shadow .3s}
.xp-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(245,166,35,0.1),0 4px 10px rgba(0,0,0,0.05)}
.xp-bullets li{position:relative;padding-left:1.1rem;line-height:1.6}
.xp-bullets li::before{content:'▸';position:absolute;left:0;color:var(--amber-dark);font-size:11px}

/* ---------- Privacy hints ---------- */
.privacy-hint{display:flex;align-items:flex-start;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.55;color:#64748B;padding:.55rem .85rem;border-radius:8px;background:rgba(11,21,38,0.04);border:1px solid rgba(11,21,38,0.08);max-width:42rem}
.privacy-hint-compact{padding:.45rem .7rem;font-size:10px;line-height:1.5}
.privacy-hint-icon{width:13px;height:13px;flex-shrink:0;margin-top:.15em;color:var(--amber-dark)}

/* ---------- Skill chips ---------- */
.chip{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 8px;border-radius:4px;color:#0284C7;background:rgba(79,195,247,0.08);border:1px solid rgba(79,195,247,0.2)}
.chip-amber{color:#92400E;background:rgba(245,166,35,0.08);border-color:rgba(245,166,35,0.25)}
.skill-group-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;display:block;margin-bottom:.5rem}
.skill-groups{display:flex;flex-direction:column;gap:1rem}

/* ---------- About photo ---------- */
.about-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%}


/* ---------- Floating label form fields ---------- */
.field{position:relative}
.field input,.field textarea{width:100%;border-radius:.75rem;padding:1.25rem 1rem .5rem 1rem;font-size:14px;outline:none;background:#F8FAFC;border:1px solid #E2E8F0;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{border-color:var(--amber-light);box-shadow:0 0 0 3px rgba(245,166,35,0.12)}
.field label{position:absolute;left:1rem;top:14px;font-size:13px;color:#94A3B8;transition:top .2s,font-size .2s,color .2s;pointer-events:none}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{top:6px;font-size:11px;color:var(--amber-dark)}

/* ---------- Confetti ---------- */
.confetti-piece{position:fixed;border-radius:2px;pointer-events:none;z-index:9999}

/* ---------- Scroll to top ---------- */
.back-to-top-btn{
  position:fixed;
  bottom:calc(var(--float-btn-inset) + var(--float-btn-size) + var(--float-btn-gap) + env(safe-area-inset-bottom,0px));
  right:calc(var(--float-btn-inset) + env(safe-area-inset-right,0px));
  z-index:44;
  width:var(--float-btn-size);
  height:var(--float-btn-size);
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  color:#fff;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(11,21,38,0.25);
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .3s,transform .3s,box-shadow .2s;
}
.back-to-top-btn.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top-btn:hover{box-shadow:0 10px 28px rgba(11,21,38,0.32)}
.back-to-top-btn:hover i{transform:translateY(-2px)}
.back-to-top-btn i{transition:transform .2s}

/* ---------- WhatsApp icon + float button ---------- */
.wa-icon{width:1rem;height:1rem;flex-shrink:0;display:block}
.wa-icon-lg{width:1.65rem;height:1.65rem}

.wa-float-btn{
  position:fixed;
  bottom:calc(var(--float-btn-inset) + env(safe-area-inset-bottom,0px));
  right:calc(var(--float-btn-inset) + env(safe-area-inset-right,0px));
  z-index:45;
  width:var(--float-btn-size);
  height:var(--float-btn-size);
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff;
  box-shadow:0 8px 24px rgba(37,211,102,0.35);
  transition:transform .2s ease,box-shadow .2s ease;
  isolation:isolate;
}
.wa-float-btn::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(37,211,102,0.55);
  animation:waPulse 2s ease-out infinite;
  pointer-events:none;
}
.wa-float-btn svg{position:relative;z-index:1}
.wa-float-btn:hover{
  transform:scale(1.06);
  box-shadow:0 12px 28px rgba(37,211,102,0.45);
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(1.45);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .wa-float-btn::before{animation:none;opacity:0}
}
@media(max-width:767px){
  :root{
    --float-btn-size:3.25rem;
    --float-btn-inset:1.25rem;
  }
}

/* ---------- Loading dots ---------- */
.loading-dots::after{content:'';display:inline-block;width:18px;text-align:left;animation:dots 1.2s steps(4,end) infinite}

/* ---------- CTA banner blobs ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media(max-width:767px){
  #main section{padding-top:3.5rem;padding-bottom:3.5rem}
  body{
    padding-bottom:env(safe-area-inset-bottom,0px);
    -webkit-tap-highlight-color:transparent;
  }
  main{padding-bottom:env(safe-area-inset-bottom,0px)}

  #main-nav{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
  #main-nav > div{
    padding-left:max(1.25rem,env(safe-area-inset-left,0px));
    padding-right:max(1.25rem,env(safe-area-inset-right,0px));
  }

  /* Shrink ambient blobs — avoid horizontal scroll */
  .parallax-shape{opacity:.65}
  .parallax-shape .float-1{width:12rem;height:12rem}
  .parallax-shape .float-2{width:14rem;height:14rem}
  .parallax-shape .float-3{width:10rem;height:10rem}

  /* Layout fallbacks (works even if Tailwind CDN is slow) */
  #main > header{
    min-height:auto !important;
    padding-top:env(safe-area-inset-top,0px);
  }
  #main > header > div{
    padding-top:6.5rem;
    padding-bottom:2.5rem;
    gap:1.5rem;
    display:grid;
    grid-template-columns:1fr;
  }
  #services .grid,
  #experience > div > .grid,
  #experience .xp-layout,
  #process-section,
  #about > div{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
  }
  #process-section{gap:2rem}
  #about > div{gap:2.5rem}

  /* Hero */
  .hero-eyebrow{
    max-width:100%;
    font-size:10px;
    line-height:1.5;
    white-space:normal;
    align-items:flex-start;
  }
  .hero-eyebrow > span:first-child{margin-top:.2rem}
  #main > header h1{font-size:clamp(2rem,9vw,2.75rem) !important}
  #main > header .cursor-blink{display:none}
  .hero-ctas{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:.75rem;
    margin-bottom:2rem;
  }
  .hero-ctas .magnetic{
    justify-content:center;
    width:100%;
    min-height:48px;
  }
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.5rem .75rem;
    width:100%;
    padding-top:1.25rem;
    row-gap:.75rem;
  }
  .hero-stats .stat-card{text-align:center;min-width:0}
  .hero-stats .counter{font-size:1.25rem;line-height:1.2}
  .hero-stats .text-xs{font-size:9px;line-height:1.35}

  /* Section typography */
  section h2{font-size:clamp(1.65rem,6.5vw,2rem) !important}
  section .reveal + p,
  section p.reveal{font-size:.9rem}

  /* Marquee */
  .marquee-track{gap:2rem;padding-top:1rem;padding-bottom:1rem}
  .marquee-track span{font-size:11px}

  /* Cards & sections */
  .tilt-card{padding:1.25rem !important}
  .tilt-card h3{font-size:1rem;line-height:1.35}
  .tilt-card p{font-size:12px !important}
  .xp-card{padding:1.15rem !important}
  .xp-item{padding-left:1.75rem}
  .xp-item::before{left:7px}
  .xp-dot{width:18px;height:18px}
  .xp-dot::after{width:7px;height:7px}
  .xp-card h3{font-size:1rem;line-height:1.35}
  .xp-card > .flex-wrap{flex-direction:column;align-items:flex-start;gap:.35rem}
  .xp-card .chip-amber{align-self:flex-start}
  .chip{font-size:9px;padding:2px 6px;max-width:100%}
  .skill-groups{gap:.85rem}
  .skill-group-label{font-size:9px}

  /* About */
  .about-photo-wrap{
    max-width:min(280px,88vw);
    margin:0 auto 2.5rem;
    width:100%;
  }
  .about-badge-float{
    right:.5rem;
    bottom:-.75rem;
    left:auto;
    max-width:calc(100% - 1rem);
    padding:.55rem .75rem;
    font-size:11px;
  }
  .about-badge-float .text-xs{font-size:10px}
  #about .reveal-right > .flex-wrap{gap:.5rem}
  #about .reveal-right > .flex-wrap span{font-size:10px;padding:.35rem .6rem}
  .about-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.5rem .75rem;
    width:100%;
  }
  .about-stats .stat-card{text-align:center;min-width:0}
  .about-stats .counter{font-size:1.35rem;line-height:1.2}
  .about-stats .text-xs{font-size:9px;line-height:1.35}

  /* Process — single column, reset desktop offset */
  .process-step{margin-top:0 !important}
  .process-step h3{margin-top:0 !important}
  .process-step .w-14{width:3rem;height:3rem;font-size:1rem;margin-bottom:1rem}

  /* CTA banner */
  .cta-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:320px;
    margin:0 auto;
    gap:.75rem;
  }
  .cta-actions .magnetic{
    justify-content:center;
    width:100%;
    min-height:48px;
  }

  /* Contact & footer */
  .contact-block{max-width:100%;padding-left:1.25rem;padding-right:1.25rem}
  #contact .space-y-6 > div{align-items:center}
  footer > div{text-align:center}
  footer > div > span{width:100%}

  /* Nav touch targets */
  #mobile-close,.toggle-btn,.menu-burger{
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Disable hover lift on touch */
  .xp-card:hover,.stat-card:hover{transform:none}
  .tilt-card:hover{box-shadow:none}
  .tilt-card::before{display:none}
}

@media(max-width:380px){
  .hero-stats,.about-stats{grid-template-columns:1fr;gap:.65rem}
  .hero-stats .stat-card,.about-stats .stat-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    padding:.4rem 0;
    border-bottom:1px solid #E2E8F0;
  }
  .hero-stats .stat-card:last-child,.about-stats .stat-card:last-child{border-bottom:none}
  #main > header h1{font-size:1.85rem !important}
}

@media(min-width:768px){
  .process-step-offset{margin-top:26px}
}