/*
Theme Name: AdPlatform
Theme URI: https://example.com
Author: Your Studio
Description: Custom homepage theme for the ad-management platform (Facebook / TikTok / Instagram / Google ad placement, wallet, budget calculator).
Version: 1.0
Text Domain: adplatform
*/

/* ===========================================================
   DESIGN TOKENS
   =========================================================== */
:root{
  --bg-black:        #1e1e1e;
  --bg-black-2:      #1e1e1e;
  --panel:           #313131;
  --panel-light:     #3a3a3a;
  --brand-orange:    #fd6b34;
  --flame-1:         #ff7a1a;
  --flame-2:         #ff3d00;
  --flame-3:         #ffb347;
  --text-white:      #f5f5f3;
  --text-dim:        #a8a8a8;
  --text-faint:      #7a7873;
  --border-soft:     rgba(255,255,255,0.08);
  --radius-sm:       6px;
  --radius-md:       14px;
  --radius-lg:       28px;

  --font-display: 'Sora', 'Noto Sans SC', -apple-system, sans-serif;
  --font-body:    'Inter', 'Noto Sans SC', -apple-system, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

html{ scroll-behavior:smooth; }

html, body{ height:100%; }

body{
  background: var(--bg-black);
  color: var(--text-white);
  font-family: var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}

@media (min-width: 981px){
  html, body{ overflow:hidden; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ===========================================================
   LAYOUT SHELL — page has a fixed-width content area + fixed
   right rail (matches source design's persistent side panel)
   =========================================================== */
.site-shell{
  display:grid;
  grid-template-columns: 1fr 300px;
  height:100vh;
  overflow:hidden;
}

@media (max-width: 980px){
  .site-shell{ height:auto; overflow:visible; }
}

.main-column{
  min-width:0;
  background: var(--bg-black);
  position:relative;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

@media (max-width: 980px){
  .main-column{ height:auto; overflow:visible; }
}

.side-rail{
  background: var(--bg-black-2);
  padding: 20px 18px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100vh;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:none;
}
.side-rail::-webkit-scrollbar{ display:none; }

@media (max-width: 980px){
  .site-shell{ grid-template-columns: 1fr; }
  .side-rail{ display:none; }
  .hero-stage{ min-height:80vh; flex:none; }
  .platform-section{ height:220px; min-height:220px; }
}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 40px;
  position:relative;
  z-index:20;
  flex-shrink:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-mark{
  width:44px; height:44px;
  border-radius:12px;
  background: #0d0d0d;
  border:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
}
.brand-mark svg{ width:26px; height:26px; }

.primary-nav{
  display:flex;
  gap:36px;
}

.primary-nav > li{
  position:relative;
}

.primary-nav a{
  font-size:14.5px;
  color: var(--text-dim);
  display:flex;
  align-items:center;
  gap:5px;
  padding:8px 0;
  position:relative;
  transition:color .2s ease;
}

.primary-nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  height:2px; width:0;
  background: linear-gradient(90deg, var(--flame-1), var(--flame-2));
  border-radius:2px;
  transition: width .25s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible{ color:var(--text-white); }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after{ width:100%; }

.caret{ font-size:10px; opacity:.6; transform:translateY(1px); }

.header-actions{
  display:none;
}

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border-radius:8px;
  border:1px solid var(--border-soft);
  align-items:center;
  justify-content:center;
}

@media (max-width: 980px){
  .primary-nav{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ===========================================================
   HERO STAGE — fills remaining viewport height, no scroll.
   Text is centered; globe docks at the bottom, half-cropped.
   =========================================================== */
.hero-stage{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---- two large gum-drop blobs, drifting in from each side ---- */
.bubble-field{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.bubble{
  position:absolute;
  top:50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,170,110,0.85), rgba(253,107,52,0.45) 55%, rgba(253,107,52,0.08) 78%);
  filter: blur(2px);
  will-change: transform, border-radius;
}

.bubble-left{
  left:-8%;
  width: min(46vw, 520px);
  height: min(46vw, 520px);
  transform: translateY(-50%);
  animation: gum-drift-left 13s ease-in-out infinite, gum-morph-a 9s ease-in-out infinite;
}

.bubble-right{
  right:-10%;
  width: min(32vw, 380px);
  height: min(32vw, 380px);
  transform: translateY(-50%);
  animation: gum-drift-right 15s ease-in-out infinite, gum-morph-b 10.5s ease-in-out infinite;
  animation-delay: 1.2s, 0.6s;
}

/* left blob: enters from the left edge, drifts right, eases back */
@keyframes gum-drift-left{
  0%   { transform: translateY(-50%) translateX(0) scale(1); }
  50%  { transform: translateY(-58%) translateX(12vw) scale(1.06); }
  100% { transform: translateY(-50%) translateX(0) scale(1); }
}

/* right blob: enters from the right edge, drifts left, eases back */
@keyframes gum-drift-right{
  0%   { transform: translateY(-50%) translateX(0) scale(1); }
  50%  { transform: translateY(-42%) translateX(-10vw) scale(1.08); }
  100% { transform: translateY(-50%) translateX(0) scale(1); }
}

/* organic gum-drop morph — soft, lopsided, never a perfect circle */
@keyframes gum-morph-a{
  0%   { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  25%  { border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; }
  50%  { border-radius: 35% 65% 55% 45% / 40% 55% 45% 60%; }
  75%  { border-radius: 65% 35% 45% 55% / 60% 40% 60% 40%; }
  100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
}
@keyframes gum-morph-b{
  0%   { border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%; }
  30%  { border-radius: 35% 65% 60% 40% / 65% 40% 60% 35%; }
  60%  { border-radius: 65% 35% 50% 50% / 40% 55% 45% 60%; }
  100% { border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%; }
}

/* ---- centered hero text ---- */
.hero-content{
  position:relative;
  z-index:2;
  max-width:640px;
  margin: 0 auto;
  text-align:center;
  padding: 0 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  width:100%;
}

.hero-eyebrow{
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--text-dim);
  margin-bottom:18px;
  font-weight:600;
}

.hero-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(26px, 4.2vw, 52px);
  line-height:1.18;
  color: var(--brand-orange);
  margin-bottom:22px;
  letter-spacing:-0.01em;
}

.hero-title span{ display:block; }

.reveal-up{
  opacity:0;
  transform: translateY(22px);
  animation: reveal-up 0.7s cubic-bezier(.16,.84,.3,1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes reveal-up{
  to{ opacity:1; transform:translateY(0); }
}

.hero-sub{
  font-size:16.5px;
  color: var(--text-dim);
  max-width:480px;
  margin: 0 auto 28px;
}

.hero-ctas{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}

.btn:hover{ transform: translateY(-2px); }

.btn-solid{
  background: var(--brand-orange);
  color: var(--text-white);
  box-shadow: 0 10px 30px -8px rgba(253,107,52,0.5);
  animation: btn-pulse 3.2s ease-in-out infinite;
}
.btn-solid:hover{
  box-shadow: 0 14px 34px -6px rgba(253,107,52,0.65);
  animation-play-state: paused;
}
@keyframes btn-pulse{
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(253,107,52,0.5); }
  50%      { box-shadow: 0 14px 38px -6px rgba(253,107,52,0.8); }
}

.btn-outline{
  background: var(--brand-orange);
  color: var(--text-white);
  box-shadow: 0 10px 30px -8px rgba(253,107,52,0.5);
}
.btn-outline:hover{ box-shadow: 0 14px 34px -6px rgba(253,107,52,0.65); }

/* ===========================================================
   PLATFORM GLOBE — docked to the bottom edge of the hero
   stage, centered, cropped so only the top half shows.
   =========================================================== */
.platform-section{
  position:relative;
  flex-shrink:0;
  height: 36vh;
  min-height:220px;
  max-height:340px;
  z-index:1;
  overflow:hidden;
  width:100%;
}

.platform-tag{
  position:absolute;
  text-align:center;
  font-size:12px;
  color: var(--text-dim);
  opacity:0;
  animation: reveal-up 0.6s ease forwards;
  animation-delay: var(--tag-delay, 0ms);
}

.globe-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.platform-tag strong{
  display:block;
  font-size:14px;
  color: var(--text-white);
  font-weight:700;
  letter-spacing:0.02em;
  margin-top:2px;
}

.tag-facebook{ top:8%; left:20%; }
.tag-tiktok{ top:8%; right:18%; }
.tag-instagram{ top:38%; left:4%; }
.tag-google{ top:38%; right:4%; }

.tag-dot{
  width:6px; height:6px;
  border-radius:50%;
  background: var(--flame-1);
  display:inline-block;
  margin-bottom:6px;
  box-shadow:0 0 8px 2px rgba(255,122,26,0.7);
}

/* ===========================================================
   SIDE RAIL (persistent right panel — login / wallet / calc)
   =========================================================== */
.rail-actions{
  display:flex;
  gap:10px;
}
.rail-btn{
  flex:1;
  text-align:center;
  padding:10px 8px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}
.rail-login{
  background: rgba(255,255,255,0.06);
  border:1px solid var(--border-soft);
}
.rail-signup{
  background: linear-gradient(120deg, var(--flame-1), var(--flame-2));
  color:#141414;
}

.rail-note{
  font-size:12px;
  color: var(--text-faint);
  text-align:center;
}
.rail-note a{ color: var(--flame-3); text-decoration:underline; }

.rail-card{
  background: var(--panel);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-md);
  min-height:64px;
}

.rail-account{
  background: var(--panel);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding:14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.rail-avatar{
  width:38px; height:38px;
  border-radius:50%;
  background: linear-gradient(145deg,#3a3a3a,#242424);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.rail-account-info{ flex:1; min-width:0; }
.rail-account-label{ font-size:11.5px; color: var(--text-faint); }
.rail-account-balance{ font-size:14px; font-weight:700; color: var(--text-white); margin-top:2px; }

.rail-menu{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rail-menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  border-radius:10px;
  font-size:13.5px;
  color: var(--text-dim);
  transition: background .15s ease, color .15s ease;
}
.rail-menu-item:hover{ background: var(--panel); color:var(--text-white); }
.rail-menu-icon{
  width:28px; height:28px;
  border-radius:8px;
  background: var(--panel-light);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  flex-shrink:0;
}

.rail-spacer{ flex:1; }

.rail-contact{
  background: var(--panel);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.rail-contact-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(145deg,#444,#222);
  flex-shrink:0;
}
.rail-contact-info{ flex:1; min-width:0; }
.rail-contact-name{ font-size:13px; font-weight:600; }
.rail-contact-status{ font-size:11px; color:#4ade80; display:flex; align-items:center; gap:4px; }
.rail-contact-btn{
  background:#25D366;
  color:#0a0a0a;
  font-size:11.5px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
}

/* WhatsApp bubble — always floats bottom-right, on every screen size */
.whatsapp-float{
  display:flex;
  position:fixed;
  bottom:20px; right:20px;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;
  align-items:center;justify-content:center;
  z-index:100;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  font-size:26px;
  animation: whatsapp-pulse 2.4s ease-in-out infinite;
}
@keyframes whatsapp-pulse{
  0%, 100% { box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
  50%      { box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 10px rgba(37,211,102,0); }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 640px){
  .site-header{ padding:14px 20px; }
  .hero-content{ padding:0 20px; }
  .bubble-left, .bubble-right{ width:60vw; height:60vw; }
}