/*
Theme Name: A1J Suite
Theme URI: https://a1j.ai
Author: a1j.ai
Author URI: https://a1j.ai
Description: Custom theme for a1j.ai — AI development services and the A1J Suite platform showcase.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: a1j-theme
*/

  :root{
    --ink:#101223; --ink-dim:#5B5E72; --line:#E7E7EE; --bg:#FFFFFF; --bg-soft:#F7F7FB;
    --violet:#5B3DF5; --violet-dark:#4229D1; --violet-tint:#F0EDFE; --sky:#2FB4E8;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; overflow-x:hidden;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em; color:var(--ink);}
  a{color:inherit; text-decoration:none;}
  .grad-text{background:linear-gradient(90deg,var(--violet),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent;}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* NAV */
  nav{border-bottom:1px solid var(--line); padding:16px 0; position:sticky; top:0; background:#fff; z-index:100;}
  nav .navbar{display:flex; align-items:center; justify-content:space-between;}
  .logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px; display:inline-block;}
  .logo span{color:var(--violet);}
  .navlinks{display:flex; gap:26px; font-size:14px; color:var(--ink-dim); font-weight:500;}
  .navlinks .item{padding:10px 0; cursor:pointer;}
  .navlinks .item:hover, .navlinks .item.open{color:var(--ink);}
  .navcta-row{display:flex; align-items:center; gap:16px;}
  .navcta-row a.signin{font-size:14px; color:var(--ink-dim); font-weight:500;}
  .btn{padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; display:inline-block; border:none; cursor:pointer; font-family:'Inter';}
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-violet{background:var(--violet); color:#fff;}
  .btn-outline{border:1px solid var(--line); color:var(--ink); background:#fff;}

  /* megamenu is now positioned relative to <nav>, not the item, so it always spans full width */
  .megamenu{
    position:absolute; top:100%; left:0; width:100%; background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 16px 32px rgba(16,18,35,0.08); padding:28px 0; display:none; z-index:99;
  }
  .item:hover .megamenu, .item.open .megamenu{display:block;}
  .mega-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  .mega-col-title{font-size:11.5px; font-weight:600; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px;}
  .mega-link{display:block; font-size:14px; font-weight:600; margin-bottom:3px;}
  .mega-desc{font-size:12px; color:var(--ink-dim); margin-bottom:14px;}

  .hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .hamburger span{width:22px; height:2px; background:var(--ink); display:block; transition:transform .2s, opacity .2s;}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* HERO */
  .hero{padding:76px 0 52px; text-align:center; position:relative;}
  .hero-bg{
    position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:900px; height:420px;
    background:radial-gradient(circle at 30% 30%, rgba(91,61,245,0.10), transparent 60%),
               radial-gradient(circle at 70% 60%, rgba(47,180,232,0.10), transparent 60%);
    z-index:-1; pointer-events:none;
  }
  .hero .eyebrow{font-size:13px; font-weight:600; color:var(--violet); margin-bottom:16px; display:flex; align-items:center; gap:8px; justify-content:center;}
  .pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--violet); animation:pulse 1.6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(0.7);}}
  .hero h1{font-size:46px; max-width:760px; margin:0 auto 20px; line-height:1.14; min-height:120px;}
  .rotator{color:var(--violet); display:inline-block; border-bottom:3px solid var(--violet-tint); transition:opacity .3s ease;}
  .hero p{font-size:17px; color:var(--ink-dim); max-width:560px; margin:0 auto 30px;}
  .hero-btns{display:flex; gap:14px; justify-content:center; margin-bottom:14px; flex-wrap:wrap;}
  .hero-note{font-size:13px; color:var(--ink-dim); margin-bottom:44px;}

  .hero-visual{
    background:var(--bg-soft); border:1px solid var(--line); border-radius:14px;
    max-width:960px; margin:0 auto; padding:40px; display:flex; align-items:center; justify-content:center;
    min-height:260px; position:relative; overflow:hidden;
  }
  .flow{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center;}
  .pill{
    background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 18px;
    font-size:13px; font-weight:500; box-shadow:0 8px 24px rgba(16,18,35,0.06);
    opacity:0; animation:pill-in .5s ease forwards;
  }
  .pill:nth-child(1){animation-delay:.1s;}
  .pill:nth-child(3){animation-delay:.5s;}
  .pill:nth-child(5){animation-delay:.9s;}
  @keyframes pill-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  .arrow{color:var(--violet); font-size:20px; opacity:0; animation:arrow-in .4s ease forwards;}
  .arrow:nth-of-type(2){animation-delay:.35s;}
  .arrow:nth-of-type(4){animation-delay:.75s;}
  @keyframes arrow-in{to{opacity:1;}}
  .status-tick{position:absolute; bottom:14px; right:18px; font-size:11px; color:var(--ink-dim); display:flex; align-items:center; gap:6px;}
  .status-tick .dot{width:6px; height:6px; border-radius:50%; background:#2FB86E; animation:pulse 1.6s ease-in-out infinite;}

  /* LOGO MARQUEE */
  .logos{padding:36px 0; border-bottom:1px solid var(--line); overflow:hidden;}
  .marquee-track{display:flex; gap:64px; width:max-content; animation:scroll-left 22s linear infinite;}
  @keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .logo-item{font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:#C7C8D6; white-space:nowrap;}
  .ratings{display:flex; gap:28px; margin-top:22px; justify-content:center; font-size:13px; color:var(--ink-dim); flex-wrap:wrap;}
  .ratings b{color:var(--ink);}

  /* STATS */
  .stats{padding:56px 0; border-bottom:1px solid var(--line);}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
  .stat-num{font-family:'Space Grotesk'; font-size:34px; font-weight:700; color:var(--violet);}
  .stat-label{font-size:13px; color:var(--ink-dim); margin-top:6px;}

  /* A1J SUITE — platform + tools tree showcase */
  .suite{padding:80px 0 88px; border-bottom:1px solid var(--line); background:var(--bg-soft); text-align:center;}
  .suite-eyebrow{font-size:13px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;}
  .suite h2{font-size:32px; margin-bottom:8px;}
  .suite h2 .grad-text{background-size:200% auto; animation:shimmer 4s linear infinite;}
  .suite-tag{color:var(--ink-dim); font-size:15px; margin-bottom:10px;}
  .suite-note{font-size:12.5px; color:var(--ink-dim); margin-bottom:52px;}
  .suite-note .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--violet); margin-right:6px; animation:pulse 1.6s ease-in-out infinite;}

  @keyframes shimmer{0%{background-position:0% center;} 100%{background-position:200% center;}}

  .suite-node{position:relative; display:inline-block; margin-bottom:0;}
  .suite-node::before{
    content:""; position:absolute; inset:-18px -28px; border-radius:50%;
    background:radial-gradient(circle, rgba(91,61,245,0.16), transparent 70%);
    animation:glow-pulse 2.6s ease-in-out infinite; z-index:1;
  }
  @keyframes glow-pulse{0%,100%{opacity:.5; transform:scale(0.92);} 50%{opacity:1; transform:scale(1.05);}}
  .suite-root{
    display:inline-block; position:relative; z-index:2; font-family:'Space Grotesk'; font-weight:700; font-size:22px;
    background:linear-gradient(90deg,var(--violet),var(--sky),var(--violet)); background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shimmer 4s linear infinite;
  }
  .suite-stem{width:1px; height:28px; background:var(--line); margin:0 auto; position:relative; overflow:visible;}
  .suite-hline{height:1px; background:var(--line); max-width:720px; margin:0 auto; position:relative; overflow:visible;}

  .suite-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:820px; margin:0 auto; text-align:left;}
  .suite-col{position:relative; padding-top:28px;}
  .suite-drop{position:absolute; top:0; left:50%; width:1px; height:28px; background:var(--line); overflow:visible;}
  .suite-cat{
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 20px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .suite-cat:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(16,18,35,0.08); border-color:var(--violet);}
  .suite-cat-name{
    font-family:'Space Grotesk'; font-weight:700; font-size:15.5px; margin-bottom:4px;
    background:linear-gradient(90deg,var(--violet-dark),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .suite-cat-desc{font-size:12.5px; color:var(--ink-dim); margin-bottom:16px;}
  .suite-tools{list-style:none;}
  .suite-tools li{
    font-size:13.5px; color:var(--ink); padding:8px 0 8px 18px; border-top:1px solid var(--line);
    position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px;
    transition:color .2s ease, padding-left .2s ease;
  }
  .suite-tools li:hover{color:var(--violet-dark); padding-left:22px;}
  .suite-tools li:before{content:"—"; position:absolute; left:0; color:var(--violet); font-weight:700; font-size:12px;}



  /* flowing energy dots — data moving from platform down into each tool group */
  .flow-dot{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--violet); box-shadow:0 0 7px 2px rgba(91,61,245,.5); opacity:0;}
  .dot-stem{left:50%; top:0; transform:translateX(-50%); animation:dot-vert 2s ease-in-out infinite;}
  .dot-hline{top:-2px; left:0; animation:dot-horiz 2.6s ease-in-out infinite;}
  .dot-drop{left:50%; top:0; transform:translateX(-50%); animation:dot-vert 2s ease-in-out infinite;}
  .suite-col:nth-child(1) .dot-drop{animation-delay:.15s;}
  .suite-col:nth-child(2) .dot-drop{animation-delay:.55s;}
  .suite-col:nth-child(3) .dot-drop{animation-delay:.95s;}
  @keyframes dot-vert{0%{top:0; opacity:0;} 15%{opacity:1;} 85%{opacity:1;} 100%{top:28px; opacity:0;}}
  @keyframes dot-horiz{0%{left:0; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:100%; opacity:0;}}

  .suite-col{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  .suite.in .suite-col{opacity:1; transform:translateY(0);}
  .suite.in .suite-col:nth-child(1){transition-delay:.08s;}
  .suite.in .suite-col:nth-child(2){transition-delay:.22s;}
  .suite.in .suite-col:nth-child(3){transition-delay:.36s;}
  .suite-hline{transform:scaleX(0); transition:transform .5s ease .1s;}
  .suite.in .suite-hline{transform:scaleX(1);}
  .suite.in .flow-dot{animation-play-state:running;}
  .flow-dot{animation-play-state:paused;}
  .suite-tools li{opacity:0;}
  .suite.in .suite-tools li{animation:li-fade .45s ease forwards;}
  @keyframes li-fade{from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:translateX(0);}}

  /* TRIAD */
  .triad{padding:72px 0; border-bottom:1px solid var(--line);}
  .triad h2{font-size:30px; text-align:center; max-width:640px; margin:0 auto 48px;}
  .triad-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
  .triad-icon{
    width:44px; height:44px; border-radius:10px; background:var(--violet-tint);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    font-family:'Space Grotesk'; font-weight:700; color:var(--violet); font-size:16px;
  }
  .triad-item h3{font-size:17px; margin-bottom:8px;}
  .triad-item p{font-size:14px; color:var(--ink-dim);}

  /* SOLUTIONS TABS */
  .solutions{padding:72px 0; border-bottom:1px solid var(--line);}
  .sol-head{max-width:640px; margin-bottom:36px;}
  .sol-eyebrow{font-size:13px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px;}
  .sol-head h2{font-size:30px; margin-bottom:12px;}
  .sol-head p{color:var(--ink-dim); font-size:15px;}
  .tabs{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
  .tab{padding:9px 16px; border-radius:20px; font-size:13.5px; font-weight:500; border:1px solid var(--line); color:var(--ink-dim); background:#fff; cursor:pointer;}
  .tab.active{background:var(--ink); color:#fff; border-color:var(--ink);}
  .sol-panel{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:36px; display:none; grid-template-columns:1fr 1fr; gap:32px; align-items:center;}
  .sol-panel.show{display:grid;}
  .sol-panel h3{font-size:20px; margin-bottom:10px;}
  .sol-panel p{color:var(--ink-dim); font-size:14.5px; margin-bottom:18px;}
  .sol-visual{background:#fff; border:1px solid var(--line); border-radius:10px; height:150px; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:12.5px;}

  /* INTEGRATIONS */
  .integrations{padding:72px 0; border-bottom:1px solid var(--line); text-align:center;}
  .integrations h2{font-size:28px; max-width:600px; margin:0 auto 12px;}
  .integrations p{color:var(--ink-dim); font-size:14.5px; max-width:520px; margin:0 auto 36px;}
  .int-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:900px; margin:0 auto 32px;}
  .int-item{background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:18px 8px; font-size:11.5px; font-weight:500; color:var(--ink-dim); transition:transform .2s, border-color .2s;}
  .int-item:hover{transform:translateY(-3px); border-color:var(--violet);}

  /* TRUST */
  .trust{padding:56px 0; border-bottom:1px solid var(--line);}
  .trust .wrap{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;}
  .trust h2{font-size:24px; max-width:420px;}
  .trust p{color:var(--ink-dim); font-size:14px; max-width:420px; margin-top:8px;}
  .badge-row{display:flex; gap:14px; flex-wrap:wrap;}
  .badge{background:var(--violet-tint); color:var(--violet-dark); font-size:12px; font-weight:600; padding:8px 14px; border-radius:8px;}

  /* CTA */
  .final-cta{padding:80px 0; text-align:center;}
  .final-cta h2{font-size:32px; margin-bottom:24px;}

  footer{background:var(--bg-soft); padding:48px 0 32px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:24px; margin-bottom:36px;}
  .foot-title{font-size:12.5px; font-weight:600; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:14px;}
  .foot-link{display:block; font-size:13.5px; color:var(--ink-dim); margin-bottom:9px;}
  .foot-link:hover{color:var(--ink);}
  .foot-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; font-size:13px; color:var(--ink-dim); flex-wrap:wrap; gap:10px;}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1024px){
    .wrap{padding:0 24px;}
    .suite-grid{grid-template-columns:1fr; max-width:420px;}
    .suite-hline{display:none;}
    .suite-drop{display:none;}
    .suite-col{padding-top:0;}
    .stats-grid{grid-template-columns:repeat(2,1fr); gap:32px;}
    .int-grid{grid-template-columns:repeat(4,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr 1fr;}
  }
  @media (max-width:900px){
    .navlinks{
      position:fixed; top:64px; left:0; width:100%; height:calc(100vh - 64px); background:#fff;
      flex-direction:column; gap:0; padding:12px 24px; overflow-y:auto; transform:translateX(100%);
      transition:transform .25s ease; z-index:98;
    }
    .navlinks.open{transform:translateX(0);}
    .navlinks .item{width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px;}
    .megamenu{position:static; box-shadow:none; border:none; padding:8px 0 8px 12px; display:none;}
    .item.open .megamenu{display:block;}
    .mega-grid{grid-template-columns:1fr; gap:4px;}
    .mega-desc{margin-bottom:8px;}
    .navcta-row .signin{display:none;}
    .hamburger{display:flex;}
    .triad-grid{grid-template-columns:1fr; gap:28px;}
    .sol-panel{grid-template-columns:1fr;}
    .trust .wrap{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width:640px){
    .hero{padding:52px 0 40px;}
    .hero h1{font-size:32px; min-height:auto;}
    .hero p{font-size:15.5px;}
    .hero-visual{padding:24px 16px;}
    .flow{gap:10px;}
    .pill{padding:11px 13px; font-size:12px;}
    .suite h2{font-size:24px;}
    .stats-grid{grid-template-columns:1fr 1fr; gap:20px;}
    .stat-num{font-size:26px;}
    .int-grid{grid-template-columns:repeat(3,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .final-cta h2, .triad h2, .sol-head h2, .integrations h2{font-size:24px;}
    .trust h2{font-size:20px;}
  }

/* logo image (WordPress theme specific) */
.site-logo{display:flex; align-items:center;}
.site-logo img{height:48px; width:auto; display:block;}
footer .site-logo img{height:40px;}

/* ===== solutions.html page-specific styles ===== */
  :root{
    --ink:#101223; --ink-dim:#5B5E72; --line:#E7E7EE; --bg:#FFFFFF; --bg-soft:#F7F7FB;
    --violet:#5B3DF5; --violet-dark:#4229D1; --violet-tint:#F0EDFE; --sky:#2FB4E8;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em;}
  a{color:inherit; text-decoration:none;}
  .grad-text{background:linear-gradient(90deg,var(--violet),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent;}

  nav{border-bottom:1px solid var(--line); padding:18px 0; position:sticky; top:0; background:#fff; z-index:100;}
  nav .navbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
  .logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px;}
  .logo span{color:var(--violet);}
  .navlinks{display:flex; gap:26px; font-size:14px; color:var(--ink-dim); font-weight:500; flex-wrap:wrap;}
  .navlinks a.active{color:var(--ink);}
  .btn{padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; display:inline-block;}
  .btn-violet{background:var(--violet); color:#fff;}
  .btn-outline{border:1px solid var(--line); color:var(--ink);}

  .pg-hero{padding:60px 0 44px; text-align:center;}
  .eyebrow{font-size:13px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;}
  .pg-hero h1{font-size:38px; max-width:660px; margin:0 auto 16px;}
  .pg-hero p{color:var(--ink-dim); font-size:15.5px; max-width:540px; margin:0 auto;}

  .jump-row{display:flex; gap:10px; justify-content:center; margin-bottom:56px; flex-wrap:wrap;}
  .jump{padding:8px 16px; border-radius:20px; font-size:13px; font-weight:500; border:1px solid var(--line); color:var(--ink-dim);}
  .jump:hover{color:var(--ink); border-color:var(--violet);}

  .dept{padding:56px 0; border-top:1px solid var(--line); scroll-margin-top:80px;}
  .dept .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center;}
  .dept:nth-child(even) .dept-visual{order:2;}
  .dept-visual{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; height:220px; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:13px;}
  .dept-tag{font-size:12px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px;}
  .dept h2{font-size:26px; margin-bottom:12px;}
  .dept p.body{font-size:14.5px; color:var(--ink-dim); margin-bottom:20px;}
  .dept ul{list-style:none; margin-bottom:22px;}
  .dept li{font-size:13.5px; color:var(--ink-dim); padding:8px 0 8px 20px; border-top:1px solid var(--line); position:relative;}
  .dept li:before{content:"—"; position:absolute; left:0; color:var(--violet); font-weight:700;}

  .cta-strip{padding:64px 0; text-align:center; background:var(--bg-soft); border-top:1px solid var(--line);}
  .cta-strip h2{font-size:26px; margin-bottom:20px;}

  footer{padding:36px 0; font-size:13px; color:var(--ink-dim); text-align:center; border-top:1px solid var(--line);}

  @media (max-width:900px){
    .dept .wrap{grid-template-columns:1fr;}
    .dept:nth-child(even) .dept-visual{order:-1;}
    .dept-visual{height:180px;}
  }
  @media (max-width:600px){
    .pg-hero h1{font-size:28px;}
  }

/* ===== pricing.html page-specific styles ===== */
  :root{
    --ink:#101223; --ink-dim:#5B5E72; --line:#E7E7EE; --bg:#FFFFFF; --bg-soft:#F7F7FB;
    --violet:#5B3DF5; --violet-dark:#4229D1; --violet-tint:#F0EDFE; --sky:#2FB4E8;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em;}
  a{color:inherit; text-decoration:none;}
  .grad-text{background:linear-gradient(90deg,var(--violet),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent;}

  nav{border-bottom:1px solid var(--line); padding:20px 0;}
  nav .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  .logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px;}
  .logo span{color:var(--violet);}
  .navlinks{display:flex; gap:30px; font-size:14px; color:var(--ink-dim); font-weight:500;}
  .navlinks a.active{color:var(--ink);}
  .navcta-row{display:flex; align-items:center; gap:18px;}
  .navcta-row a.signin{font-size:14px; color:var(--ink-dim); font-weight:500;}
  .btn{padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; display:inline-block;}
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-violet{background:var(--violet); color:#fff;}
  .btn-outline{border:1px solid var(--line); color:var(--ink);}

  .pg-hero{padding:64px 0 40px; text-align:center;}
  .pg-hero .eyebrow{font-size:13px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;}
  .pg-hero h1{font-size:38px; max-width:640px; margin:0 auto 16px;}
  .pg-hero p{color:var(--ink-dim); font-size:15.5px; max-width:520px; margin:0 auto;}

  .toggle-row{display:flex; justify-content:center; align-items:center; gap:12px; margin:32px 0 48px; font-size:14px; color:var(--ink-dim);}
  .toggle{width:44px; height:24px; border-radius:20px; background:var(--violet); position:relative;}
  .toggle::after{content:""; width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:3px; right:3px;}
  .save-badge{background:var(--violet-tint); color:var(--violet-dark); font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px;}

  .plans{padding:0 0 72px;}
  .plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:64px;}
  .plan{background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 26px; display:flex; flex-direction:column;}
  .plan.featured{border:2px solid var(--violet); position:relative;}
  .plan-badge{position:absolute; top:-12px; left:26px; background:var(--violet); color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:5px;}
  .plan-name{font-family:'Space Grotesk'; font-weight:700; font-size:17px; margin-bottom:6px;}
  .plan-tag{font-size:13px; color:var(--ink-dim); margin-bottom:22px;}
  .plan-price{font-family:'Space Grotesk'; font-size:36px; font-weight:700;}
  .plan-price span{font-family:'Inter'; font-size:13px; font-weight:400; color:var(--ink-dim);}
  .plan hr{border:none; border-top:1px solid var(--line); margin:22px 0;}
  .plan ul{list-style:none; font-size:14px; color:var(--ink-dim); flex:1;}
  .plan li{margin-bottom:12px; padding-left:20px; position:relative;}
  .plan li::before{content:"\2713"; position:absolute; left:0; color:var(--violet); font-weight:700;}
  .plan-btn{margin-top:24px; text-align:center; padding:12px; border-radius:8px; font-size:14px; font-weight:600; border:1px solid var(--line);}
  .plan.featured .plan-btn{background:var(--violet); color:#fff; border-color:var(--violet);}

  .compare{padding:56px 0; border-top:1px solid var(--line);}
  .compare h2{font-size:26px; text-align:center; margin-bottom:36px;}
  table{width:100%; border-collapse:collapse; font-size:14px;}
  th,td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line);}
  th{color:var(--ink-dim); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em;}
  td.center, th.center{text-align:center;}
  td.check{color:var(--violet); font-weight:700; text-align:center;}

  .faq{padding:64px 0; border-top:1px solid var(--line);}
  .faq h2{font-size:26px; text-align:center; margin-bottom:36px;}
  .faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; max-width:900px; margin:0 auto;}
  .faq-item h3{font-size:15px; margin-bottom:6px;}
  .faq-item p{font-size:13.5px; color:var(--ink-dim);}

  .final-cta{padding:72px 0; text-align:center; background:var(--bg-soft);}
  .final-cta h2{font-size:28px; margin-bottom:22px;}
  .hero-btns{display:flex; gap:14px; justify-content:center;}

  footer{padding:40px 0; font-size:13px; color:var(--ink-dim); text-align:center;}

/* ===== about.html page-specific styles ===== */
  :root{
    --ink:#101223; --ink-dim:#5B5E72; --line:#E7E7EE; --bg:#FFFFFF; --bg-soft:#F7F7FB;
    --violet:#5B3DF5; --violet-dark:#4229D1; --violet-tint:#F0EDFE; --sky:#2FB4E8;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.65;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em;}
  a{color:inherit; text-decoration:none;}
  .grad-text{background:linear-gradient(90deg,var(--violet),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent;}

  nav{border-bottom:1px solid var(--line); padding:20px 0;}
  nav .wrap{display:flex; align-items:center; justify-content:space-between;}
  .logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px;}
  .logo span{color:var(--violet);}
  .navlinks{display:flex; gap:28px; font-size:14px; color:var(--ink-dim); font-weight:500;}
  .navlinks a.active{color:var(--ink);}
  .btn{padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; display:inline-block;}
  .btn-violet{background:var(--violet); color:#fff;}
  .btn-outline{border:1px solid var(--line); color:var(--ink);}

  .pg-hero{padding:64px 0 48px;}
  .pg-hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
  .eyebrow{font-size:13px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;}
  .pg-hero h1{font-size:36px; margin-bottom:16px;}
  .pg-hero p{color:var(--ink-dim); font-size:15.5px;}
  .hero-visual{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; height:260px; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:13px;}

  .mission{padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft);}
  .mission .wrap{max-width:720px; text-align:center;}
  .mission h2{font-size:26px; margin-bottom:16px;}
  .mission p{color:var(--ink-dim); font-size:15.5px;}

  .values{padding:72px 0; border-bottom:1px solid var(--line);}
  .values h2{font-size:28px; text-align:center; margin-bottom:44px;}
  .value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
  .value-num{font-family:'Space Grotesk'; font-weight:700; color:var(--violet); font-size:15px; margin-bottom:12px;}
  .value-item h3{font-size:16.5px; margin-bottom:8px;}
  .value-item p{font-size:14px; color:var(--ink-dim);}

  .team{padding:72px 0; border-bottom:1px solid var(--line);}
  .team h2{font-size:28px; text-align:center; margin-bottom:12px;}
  .team > .wrap > p{text-align:center; color:var(--ink-dim); font-size:14.5px; max-width:480px; margin:0 auto 44px;}
  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  .member{text-align:center;}
  .avatar{width:72px; height:72px; border-radius:50%; background:var(--violet-tint); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color:var(--violet); font-size:20px;}
  .member h3{font-size:14.5px; margin-bottom:3px;}
  .member p{font-size:12.5px; color:var(--ink-dim);}

  .timeline{padding:72px 0; border-bottom:1px solid var(--line);}
  .timeline h2{font-size:28px; text-align:center; margin-bottom:44px;}
  .tl-row{display:grid; grid-template-columns:100px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); max-width:680px; margin:0 auto;}
  .tl-row:last-child{border-bottom:none;}
  .tl-year{font-family:'Space Grotesk'; font-weight:700; color:var(--violet);}
  .tl-body h3{font-size:15px; margin-bottom:4px;}
  .tl-body p{font-size:13.5px; color:var(--ink-dim);}

  .cta-strip{padding:64px 0; text-align:center;}
  .cta-strip h2{font-size:26px; margin-bottom:20px;}

  footer{padding:36px 0; font-size:13px; color:var(--ink-dim); text-align:center; border-top:1px solid var(--line);}

  @media (max-width:900px){
    .pg-hero .wrap{grid-template-columns:1fr;}
    .hero-visual{order:-1;}
    .value-grid{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:1fr 1fr; gap:24px;}
    nav .wrap{flex-wrap:wrap; gap:12px;}
    .navlinks{gap:16px; flex-wrap:wrap;}
  }
  @media (max-width:600px){
    .pg-hero h1{font-size:28px;}
    .team-grid{grid-template-columns:1fr;}
    .tl-row{grid-template-columns:70px 1fr;}
  }

/* ===== case-studies.html page-specific styles ===== */
  :root{
    --ink:#101223; --ink-dim:#5B5E72; --line:#E7E7EE; --bg:#FFFFFF; --bg-soft:#F7F7FB;
    --violet:#5B3DF5; --violet-dark:#4229D1; --violet-tint:#F0EDFE; --sky:#2FB4E8;
    --green:#2FB86E; --green-tint:#E8F8EF;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em;}
  a{color:inherit; text-decoration:none;}
  .grad-text{background:linear-gradient(90deg,var(--violet),var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent;}

  nav{border-bottom:1px solid var(--line); padding:20px 0;}
  nav .wrap{display:flex; align-items:center; justify-content:space-between;}
  .logo{font-family:'Space Grotesk'; font-weight:700; font-size:20px;}
  .logo span{color:var(--violet);}
  .navlinks{display:flex; gap:28px; font-size:14px; color:var(--ink-dim); font-weight:500;}
  .navlinks a.active{color:var(--ink);}
  .btn{padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600; display:inline-block;}
  .btn-violet{background:var(--violet); color:#fff;}
  .btn-outline{border:1px solid var(--line); color:var(--ink);}

  .pg-hero{padding:60px 0 44px; text-align:center;}
  .pg-hero .eyebrow{font-size:13px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;}
  .pg-hero h1{font-size:38px; max-width:640px; margin:0 auto 16px;}
  .pg-hero p{color:var(--ink-dim); font-size:15.5px; max-width:540px; margin:0 auto;}

  .filter-row{display:flex; gap:10px; justify-content:center; margin-bottom:48px; flex-wrap:wrap;}
  .filter{padding:8px 16px; border-radius:20px; font-size:13px; font-weight:500; border:1px solid var(--line); color:var(--ink-dim);}
  .filter.active{background:var(--ink); color:#fff; border-color:var(--ink);}

  .case-list{padding-bottom:80px;}
  .case{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center;
    padding:44px 0; border-bottom:1px solid var(--line);
  }
  .case:last-child{border-bottom:none;}
  .case-visual{
    background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; height:220px;
    display:flex; align-items:center; justify-content:center; color:var(--ink-dim); font-size:13px;
  }
  .case-tag{font-size:12px; font-weight:600; color:var(--violet); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px;}
  .case h2{font-size:24px; margin-bottom:10px;}
  .case-client{font-size:13.5px; color:var(--ink-dim); margin-bottom:18px;}
  .case p.body{font-size:14.5px; color:var(--ink-dim); margin-bottom:20px;}
  .case-results{display:flex; gap:22px; margin-bottom:20px;}
  .case-result .num{font-family:'Space Grotesk'; font-weight:700; font-size:22px; color:var(--ink);}
  .case-result .lbl{font-size:12px; color:var(--ink-dim);}
  .quote{
    background:var(--violet-tint); border-radius:10px; padding:16px 18px; font-size:13.5px;
    color:var(--violet-dark); font-style:italic; margin-bottom:20px;
  }

  .cta-strip{background:var(--bg-soft); padding:64px 0; text-align:center;}
  .cta-strip h2{font-size:26px; margin-bottom:20px;}

  footer{padding:36px 0; font-size:13px; color:var(--ink-dim); text-align:center; border-top:1px solid var(--line);}

  @media (max-width:900px){
    .case{grid-template-columns:1fr; gap:24px;}
    .case-visual{order:-1; height:180px;}
    nav .wrap{flex-wrap:wrap; gap:12px;}
    .navlinks{gap:16px; flex-wrap:wrap;}
  }
  @media (max-width:600px){
    .pg-hero h1{font-size:28px;}
    .case-results{flex-wrap:wrap; gap:16px;}
  }