* { -webkit-tap-highlight-color: transparent; }
  html { scroll-behavior: smooth; }
  body { background: #060a13; color: #e7e9f2; font-family: Inter, sans-serif; overflow-x: hidden; }
  ::selection { background: rgba(16,185,129,.45); color: #fff; }
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #060a13; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#059669,#0284c7); border-radius: 8px; }

  .grad-text { background: linear-gradient(92deg, #34d399 0%, #2dd4bf 35%, #38bdf8 70%, #a3e635 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .glass { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .glass-soft { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .orb { position: fixed; border-radius: 9999px; filter: blur(90px); pointer-events: none; z-index: 0; }
  .orb-a { width: 560px; height: 560px; background: rgba(5,150,105,.32); top: -180px; left: -120px; animation: drift 22s ease-in-out infinite alternate; }
  .orb-b { width: 480px; height: 480px; background: rgba(2,132,199,.24); bottom: -160px; right: -100px; animation: drift 26s ease-in-out infinite alternate-reverse; }
  .orb-c { width: 340px; height: 340px; background: rgba(20,184,166,.16); top: 38%; left: 55%; animation: drift 30s ease-in-out infinite alternate; }
  .orb-d { width: 300px; height: 300px; background: rgba(163,230,53,.14); top: 62%; left: -80px; animation: drift 34s ease-in-out infinite alternate-reverse; }
  @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.12); } }

  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }

  .tilt { transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease; will-change: transform; }
  .site-card { cursor: pointer; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s, background .3s; position: relative; overflow: hidden; }
  .site-card::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(16,185,129,.22), transparent 65%); pointer-events: none; }
  .site-card:hover { transform: translateY(-4px); border-color: rgba(52,211,153,.55); box-shadow: 0 14px 40px -12px rgba(5,150,105,.55); }
  .site-card:hover::after { opacity: 1; }
  .site-card.active { border-color: #10b981; background: linear-gradient(160deg, rgba(16,185,129,.22), rgba(56,189,248,.08)); box-shadow: 0 0 0 1px #10b981, 0 16px 44px -12px rgba(5,150,105,.65); }
  .site-card.active .tick { opacity: 1; transform: scale(1); }
  .site-card .tick { opacity: 0; transform: scale(.5); transition: all .25s ease; }

  .btn-primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(92deg, #059669, #14b8a6 48%, #0284c7); box-shadow: 0 10px 34px -8px rgba(20,184,166,.55), 0 10px 34px -12px rgba(5,150,105,.6), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
  .btn-primary:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); filter: brightness(1.12); box-shadow: 0 18px 44px -10px rgba(20,184,166,.7), 0 18px 44px -14px rgba(5,150,105,.7), inset 0 1px 0 rgba(255,255,255,.25); }
  .btn-primary:active:not(:disabled) { transform: translateY(0) scale(.99); }
  .btn-primary:disabled { opacity: .55; cursor: not-allowed; }
  .btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s ease; }
  .btn-primary:hover:not(:disabled)::before { transform: translateX(120%); }

  .btn-ghost { transition: all .25s ease; }
  .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }

  .tab-btn { transition: all .25s ease; }
  .tab-btn.active { background: linear-gradient(92deg, rgba(16,185,129,.35), rgba(56,189,248,.25)); border-color: rgba(52,211,153,.6); color: #fff; }

  .pulse-dot { position: relative; }
  .pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 9999px; background: rgba(52,211,153,.5); animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; z-index: -1; }
  @keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

  .float-slow { animation: floaty 7s ease-in-out infinite; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  .check-draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .7s .15s cubic-bezier(.65,0,.35,1) forwards; }
  .circle-draw { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw .8s cubic-bezier(.65,0,.35,1) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .pop-in { animation: pop .45s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  .progress-shimmer { position: relative; overflow: hidden; }
  .progress-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); animation: shimmer 1.4s infinite; transform: translateX(-100%); }
  @keyframes shimmer { to { transform: translateX(100%); } }

  textarea:focus, input:focus, select:focus { outline: none; border-color: rgba(52,211,153,.7) !important; box-shadow: 0 0 0 3px rgba(16,185,129,.22); }
  select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
  select option { background: #060a13; color: #e7e9f2; }
  .num { font-variant-numeric: tabular-nums; }
  #toast { transition: transform .35s cubic-bezier(.2,1.2,.4,1), opacity .35s; }
  .step-num { background: linear-gradient(135deg, #059669, #0284c7); box-shadow: 0 6px 18px -4px rgba(5,150,105,.7); }
  .modal-bg { background: rgba(3,4,10,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .modal-card { animation: modalIn .35s cubic-bezier(.2,1.2,.4,1) both; }
  @keyframes modalIn { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
  details summary::-webkit-details-marker { display: none; }
  details[open ] .faq-chev { transform: rotate(180deg); }
  .faq-chev { transition: transform .3s ease; }
  .spin { animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---- GPT-assisted 3D upgrade: isometric hero browser, floating chips & shapes ---- */
  .iso-scene { perspective: 1400px; }
  .iso-browser { transform: rotateX(10deg) rotateY(-14deg); transform-style: preserve-3d; transition: transform .35s ease; will-change: transform; box-shadow: 0 40px 90px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.09), 0 0 90px -25px rgba(5,150,105,.6), 0 0 90px -35px rgba(20,184,166,.45); }
  .iso-row { display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: .8rem; padding: .6rem .8rem; font-size: .8rem; }
  .iso-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 34px -10px rgba(0,0,0,.75), 0 0 30px -12px rgba(5,150,105,.7); animation: floaty 6s ease-in-out infinite; white-space: nowrap; }
  .iso-chip .dot { width: .55rem; height: .55rem; border-radius: 9999px; flex-shrink: 0; }
  .float-shape { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(1px); animation: floaty 7s ease-in-out infinite; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
  .hero-stats > div { transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 12px 32px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05); }
  .hero-stats > div:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -14px rgba(5,150,105,.55), 0 0 0 1px rgba(52,211,153,.35); }

  /* ---- Multi-page additions (IndexSnap) ---- */
  .nav-link { transition: color .2s ease, background .2s ease; border-radius: 9999px; padding: .45rem .8rem; }
  .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
  .nav-link.active { color: #fff; background: rgba(16,185,129,.20); }
  .nav-tools-btn { transition: color .2s ease, background .2s ease; border-radius: 9999px; padding: .45rem .8rem; }
  .nav-tools-btn:hover { color: #fff; background: rgba(255,255,255,.07); }
  .tools-menu { transform-origin: top center; transition: opacity .18s ease, transform .18s ease; }
  .tools-menu.closed { opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; }
  .tool-card-link { transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
  .tool-card-link:hover { transform: translateY(-5px); border-color: rgba(52,211,153,.55); box-shadow: 0 20px 50px -16px rgba(5,150,105,.6); }
  .content-page h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; margin-top: 2rem; margin-bottom: .6rem; }
  .content-page h3 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: .45rem; }
  .content-page p { color: #94a3b8; line-height: 1.75; margin-bottom: .9rem; font-size: .95rem; }
  .content-page li { color: #94a3b8; line-height: 1.7; font-size: .95rem; }
  .content-page ol, .content-page ul { margin-bottom: .9rem; }
  .mono-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
  .filter-btn.active { background: linear-gradient(92deg, rgba(16,185,129,.35), rgba(56,189,248,.25)); border-color: rgba(52,211,153,.6); color: #fff; }
  .quota-badge { background: rgba(56,189,248,.10); border: 1px solid rgba(56,189,248,.35); color: #7dd3fc; }