/*
Theme Name: GetGenerative.ai
Theme URI: https://getgenerative.ai
Author: GetGenerative.ai
Description: Custom theme converted from the GetGenerative.ai Claude Design prototype (Landing, Implementation, Managed Services, Pricing).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: getgenerative
*/

/* ---------- Base / variables ---------- */
:root{
  --ink:#16141f; --ink-soft:#3a3850; --muted:#6c6a82;
  --line:#eceaf6; --bg:#ffffff; --bg-tint:#f7f6fc;
  --accent:#7a68f6; --accent-2:#a498ff; --accent-deep:#4f45e4; --wash:#efedfe;
  --navy:#12102b;
  --r-lg:24px; --r-md:16px; --r-pill:999px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }

/* ---------- Progress bar ---------- */
.gg-progress{
  position:fixed; left:0; top:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-deep));
  z-index:90; will-change:transform;
}

/* ---------- Nav ---------- */
.gg-header{
  position:sticky; top:0; z-index:50;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--line);
}
.gg-nav{ max-width:1380px; margin:0 auto; padding:14px 44px; display:flex; align-items:center; }
.gg-nav-logo{ display:flex; align-items:center; text-decoration:none; color:var(--ink); }
.gg-nav-logo img{ height:22px; width:auto; display:block; }
.gg-nav-links{ display:flex; align-items:center; gap:38px; margin-left:54px; }
.gg-nav-links a{ text-decoration:none; color:var(--ink); font-size:14px; font-weight:400; }
.gg-nav-links a.is-current{ color:var(--accent-deep); font-weight:600; }
.gg-nav-cta{
  margin-left:auto; text-decoration:none; color:#fff; font-size:13.5px; font-weight:500;
  padding:11px 30px; border-radius:12px; background:var(--accent-deep);
  box-shadow:0 8px 20px -8px var(--accent-deep);
}
.gg-nav-burger{
  display:none; margin-left:14px; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--line); border-radius:11px;
  background:#fff; cursor:pointer; color:var(--ink); flex:none;
}

/* ---------- Footer ---------- */
.gg-footer{ border-top:1px solid var(--line); background:var(--bg-tint); padding:56px 28px 40px; }
.gg-footer-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1.4fr; gap:40px; }
.gg-footer-grid a{ text-decoration:none; color:var(--muted); font-size:14px; }
.gg-footer-col-title{ font-weight:600; font-size:15px; margin-bottom:16px; }
.gg-footer-tagline{ margin-top:18px; max-width:280px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.gg-footer-links{ display:flex; flex-direction:column; gap:12px; }
.gg-footer-social{ display:flex; align-items:center; gap:14px; }
.gg-footer-social a{ color:var(--ink-soft); }
.gg-footer-bottom{ max-width:1240px; margin:40px auto 0; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:#a3a2b5; }
@media (max-width:900px){
  .gg-footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- Generic section helpers used across templates ---------- */
.gg-hero{ position:relative; text-align:center; padding:104px 28px 64px; overflow:hidden; }
.gg-hero canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }

/* ---------- Agent tabs (Landing) ---------- */
.gg-tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:2px; padding:5px; margin:0 auto 34px; width:fit-content; max-width:100%; background:var(--bg-tint); border:1px solid var(--line); border-radius:var(--r-pill); }
.gg-tab-btn{ cursor:pointer; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; padding:10px 18px; border-radius:var(--r-pill); border:1px solid transparent; transition:all .18s ease; white-space:nowrap; background:transparent; color:var(--muted); box-shadow:none; }
.gg-tab-btn.is-active{ background:var(--accent-deep); color:#fff; box-shadow:0 8px 18px -8px var(--accent-deep); }

.gg-agent-panel{ display:none; }
.gg-agent-panel.is-active{ display:block; }
.gg-agent-icon-stack{ position:relative; width:44px; height:44px; }
.gg-agent-icon{ position:absolute; inset:0; width:44px; height:44px; border-radius:11px; box-shadow:0 10px 22px -8px rgba(40,30,90,.35); opacity:0; transition:opacity .2s; }
.gg-agent-icon.is-active{ opacity:1; }
.gg-tab-btn.is-disc-hover .gg-agent-icon.is-active{ animation:ggZoom .9s ease-in-out infinite; transform-origin:center; }

.gg-mock-panel{ display:none; position:relative; width:100%; }
.gg-mock-panel.is-active{ display:block; }
.gg-walk{ position:relative; width:100%; }
.gg-walk-frame{ position:relative; width:100%; padding-top:57.18%; }
.gg-walk-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; transition:opacity .5s ease; opacity:0; }
.gg-walk-frame img:first-child{ opacity:1; }
[data-walk-img]{ opacity:0; }
[data-walk-img]:first-of-type{ opacity:1; }
.gg-walk-cursor{ position:absolute; pointer-events:none; z-index:3; filter:drop-shadow(0 3px 5px rgba(30,20,70,.4)); transition:left .62s cubic-bezier(.5,0,.2,1), top .62s cubic-bezier(.5,0,.2,1); }
.gg-walk-arrow{ transform-origin:top left; }
.gg-walk-arrow.gg-tap{ animation:ggTap .5s ease; }
.gg-click-ripple{ position:absolute; width:18px; height:18px; margin-left:2px; margin-top:2px; border-radius:50%; border:2px solid rgba(122,104,246,.9); transform:translate(-50%,-50%); animation:ggClick .5s ease-out forwards; pointer-events:none; z-index:2; }

/* ---------- Pricing plan cards ---------- */
.gg-plan-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 26px; display:flex; flex-direction:column; outline:2px solid transparent; outline-offset:-2px; box-shadow:0 1px 2px rgba(20,16,40,.04); cursor:pointer; transition:outline-color .2s ease, box-shadow .3s ease; }
.gg-plan-card.is-selected{ outline-color:var(--accent); box-shadow:0 30px 64px -34px rgba(80,56,180,.55); }

/* ---------- FAQ accordion ---------- */
.gg-faq-item{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; box-shadow:0 1px 2px rgba(20,16,40,.03); }
.gg-faq-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:transparent; border:none; cursor:pointer; text-align:left; }
.gg-faq-q{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); transition:color .2s ease; }
.gg-faq-item.is-open .gg-faq-q{ color:var(--accent-deep); }
.gg-faq-chev{ flex:none; transition:transform .25s ease; }
.gg-faq-item.is-open .gg-faq-chev{ transform:rotate(180deg); }
.gg-faq-panel{ display:none; padding:0 24px 22px; animation:ggFaqReveal .28s ease; }
.gg-faq-item.is-open .gg-faq-panel{ display:block; }

/* ---------- Keyframes (all ported 1:1 from the original design) ---------- */
@keyframes ggPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ggFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ggHalo{0%,100%{opacity:.5;transform:translate(-50%,0) scale(1)}50%{opacity:.9;transform:translate(-50%,0) scale(1.08)}}
@keyframes ggReveal{0%{opacity:0;transform:translateY(26px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ggFaqReveal{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ggBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ggBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ggSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ggRise{0%,100%{transform:translateY(4px) scale(1)}50%{transform:translateY(-4px) scale(1.03)}}
@keyframes ggMergeA{0%,100%{transform:translateX(0)}50%{transform:translateX(11px)}}
@keyframes ggMergeB{0%,100%{transform:translateX(0)}50%{transform:translateX(-11px)}}
@keyframes ggZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes ggClick{0%{transform:translate(-50%,-50%) scale(.3);opacity:.85}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes ggTap{0%,100%{transform:scale(1)}45%{transform:scale(.82)}}
@keyframes ggSweepX{0%{left:-40%}100%{left:100%}}
@keyframes ggFill{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes ggSpin{to{transform:rotate(360deg)}}
@keyframes ggSpinRev{to{transform:rotate(-360deg)}}
@keyframes ggCorePulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.35);opacity:0}}
@keyframes ggNodeFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
@keyframes ggDashFlow{to{stroke-dashoffset:-200}}
@keyframes ggTravel{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes ggTravelX{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes ggFlow{to{stroke-dashoffset:-18}}
@keyframes ggFlowB{to{background-position:-18px 0}}
@keyframes ggIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ggSweep{0%{transform:translateX(-160%)}55%,100%{transform:translateX(360%)}}
@keyframes msFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes msHalo{0%,100%{opacity:.5;transform:translate(-50%,0) scale(1)}50%{opacity:.9;transform:translate(-50%,0) scale(1.08)}}
@keyframes a4xGlow{0%,100%{opacity:.5;transform:translate(-50%,0) scale(1)}50%{opacity:.85;transform:translate(-50%,0) scale(1.06)}}
@keyframes a4xSweep{0%{transform:translateX(-140%)}55%,100%{transform:translateX(320%)}}

/* ---------- Responsive ---------- */
/* NOTE: [style*="..."] requires an exact character match, including spacing.
   Every inline style in this theme is written as "property:value" with NO
   space after the colon, so these selectors must match that exactly. */
@media (max-width:1024px){
  [style*="grid-template-columns:repeat(4"]{ grid-template-columns:repeat(2,1fr)!important; }
  [style*="grid-template-columns:repeat(5"]{ grid-template-columns:repeat(3,1fr)!important; }
  [style*="grid-template-columns:repeat(6"]{ grid-template-columns:repeat(3,1fr)!important; }
  [style*="grid-template-columns:0.86fr"],
  [style*="grid-template-columns:0.78fr"],
  [style*="grid-template-columns:.78fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1fr 1.1fr 1fr"],
  [style*="grid-template-columns:1fr 1.22fr"],
  [style*="grid-template-columns:0.78fr 1.22fr"],
  [style*="grid-template-columns:1.15fr .85fr"],
  [style*="grid-template-columns:1.4fr 1fr"]{ grid-template-columns:1fr!important; }
}
@media (max-width:768px){
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"]{ grid-template-columns:1fr!important; }
  [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr!important; }
  .gg-footer-grid{ grid-template-columns:1fr 1fr!important; }
  [data-ctx-grid]{ display:flex!important; flex-direction:column!important; }
  [data-ctx-card]{ grid-column:auto!important; grid-row:auto!important; }
  .gg-nav{ flex-wrap:wrap!important; padding:12px 18px!important; }
  .gg-nav-burger{ display:flex!important; }
  .gg-nav-links{ display:none!important; }
  .gg-nav-links[data-open="1"]{
    display:flex!important; flex-direction:column!important; align-items:flex-start!important;
    order:3; width:100%!important; margin-left:0!important; gap:2px!important;
    margin-top:12px!important; padding-top:12px!important; border-top:1px solid var(--line);
  }
  .gg-nav-links[data-open="1"] a{ padding:9px 2px!important; }
}
@media (max-width:560px){
  section{ padding-left:16px!important; padding-right:16px!important; }
  .gg-footer{ padding-left:18px!important; padding-right:18px!important; }
  .gg-footer-grid{ grid-template-columns:1fr!important; }
}

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