:root{
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --text:#172B4D;
  --muted:#5E6C84;
  --border:#DFE1E6;

  /* Atlassian-ish blue */
  --blue:#0052CC;
  --blue2:#0747A6;
  --blueSoft:#DEEBFF;

  --green:#00875A;
  --yellow:#FFAB00;
  --red:#DE350B;

  --shadow: 0 18px 48px rgba(9,30,66,.12);
  --shadow2: 0 10px 22px rgba(9,30,66,.10);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  line-height:1.6;
}

.container{max-width:1160px;margin:0 auto;padding:0 18px}
.spacer{flex:1}
.small{font-size:12px}
.muted{color:var(--muted)}
a{color:inherit;text-decoration:none}

.progress{
  position:fixed;inset-inline-start:0;
  inset-inline-end:auto;top:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  z-index:1000;
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:999;
  overflow-x:clip;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(223,225,230,.8);
}
.topbar-inner{
  height:64px;
  display:flex;align-items:center;gap:14px;
}
.brand,.footer-brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:52px;height:52px;border-radius:16px;display:block;object-fit:cover;
  background:#000;box-shadow:0 12px 28px rgba(9,30,66,.18);border:1px solid rgba(223,225,230,.9);
  flex:0 0 auto;
}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:900;letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--muted);font-weight:800}

.nav{display:flex;align-items:center;gap:10px}
.nav-link{
  padding:8px 10px;border-radius:10px;
  color:var(--text);font-weight:900;font-size:13px;
  position:relative;
}
.nav-link::after{
  content:"";position:absolute;inset-inline-start:10px;inset-inline-end:10px;bottom:6px;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .2s ease;
}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link:hover{background:#F4F5F7}

.actions{display:flex;align-items:center;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:900;
  padding:9px 12px;border-radius:12px;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{box-shadow:0 12px 24px rgba(9,30,66,.10)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg, #1D7AFC 0%, var(--blue) 100%);
  border-color:transparent;color:#fff;
}
.btn.primary:hover{background:linear-gradient(180deg, #2A84FF 0%, var(--blue2) 100%)}
.btn.ghost{
  background:transparent;
  border-color:rgba(223,225,230,.9);
}
.btn.lg{padding:12px 16px;border-radius:14px}

.burger{display:none;align-items:center;justify-content:center;border:1px solid rgba(223,225,230,.95);background:rgba(255,255,255,.96);cursor:pointer;padding:10px 14px;border-radius:14px;box-shadow:0 10px 22px rgba(9,30,66,.06);font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-width:108px;white-space:nowrap}
.burger:hover{background:#F4F5F7}
.burger-label{display:block;position:relative;font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:0 !important;font-weight:900;line-height:1;color:transparent !important;letter-spacing:0;text-rendering:optimizeLegibility;white-space:nowrap}
.burger-label::before{content:"القائمة";display:block;font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:15px;font-weight:900;line-height:1;color:var(--blue2);white-space:nowrap}
html[lang='en'] .burger-label::before{content:"Menu"}
html[lang='ar'] .burger-label::before{content:"القائمة"}

.mobile{position:absolute;inset-inline-start:0;
  inset-inline-end:auto;inset-inline-end:0;top:64px;z-index:998;border-top:1px solid var(--border);background:rgba(255,255,255,.96);box-shadow:0 18px 40px rgba(9,30,66,.12);width:100%;max-width:100%;overflow-x:hidden}
.mobile-inner{padding:12px 0;display:grid;gap:6px}
.mobile-link{padding:10px 12px;border-radius:12px;font-weight:900}
.mobile-link:hover{background:#F4F5F7}
.mobile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  overflow:hidden;
  padding:48px 0 26px;
  background:
    radial-gradient(1200px 420px at 50% 0%, rgba(0,82,204,.18), transparent 58%),
    radial-gradient(900px 360px at 80% 10%, rgba(54,179,126,.16), transparent 56%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 45%, var(--bg) 100%);
  border-bottom:1px solid rgba(223,225,230,.75);
}
.bg-blobs{position:absolute;inset:0;pointer-events:none}
.blob{
  position:absolute;border-radius:999px;filter:blur(18px);
  opacity:.55;
  transform:translateZ(0);
}
.b1{width:420px;height:420px;inset-inline-start:-140px;top:-110px;background:rgba(0,82,204,.35);animation:float1 10s ease-in-out infinite}
.b2{width:360px;height:360px;inset-inline-end:-120px;top:40px;background:rgba(54,179,126,.28);animation:float2 12s ease-in-out infinite}
.b3{width:260px;height:260px;left:50%;bottom:-120px;transform:translateX(-50%);background:rgba(255,171,0,.22);animation:float3 14s ease-in-out infinite}

@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,22px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,18px)}}
@keyframes float3{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-16px)}}

.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:center;
}
.eyebrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;font-size:12px;
  background:rgba(0,82,204,.10);
  color:var(--blue2);
  border:1px solid rgba(0,82,204,.18);
  padding:6px 10px;border-radius:999px;
}
.pill.subtle{
  background:rgba(9,30,66,.04);
  border-color:rgba(223,225,230,.9);
  color:var(--muted);
}
.dot{width:6px;height:6px;border-radius:999px;background:rgba(9,30,66,.22)}

.hero-title{margin:14px 0 10px;font-weight:900;font-size:40px;line-height:1.15}
.hero-sub{margin:0;color:var(--muted);font-size:16px;max-width:54ch}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.trust{margin-top:16px}
.trust-label{font-size:12px;color:var(--muted);font-weight:800}
.logos{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.logo-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(223,225,230,.9);
  font-weight:900;font-size:12px;color:rgba(9,30,66,.68);
  box-shadow:0 8px 18px rgba(9,30,66,.06);
}

/* Mock */
.hero-media{position:relative}
.mock{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(223,225,230,.95);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.mock-top{
  display:flex;gap:10px;align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(223,225,230,.95);
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFBFC 100%);
}
.dot{display:inline-block}
.dot.red{background:rgba(222,53,11,.55);width:10px;height:10px;border-radius:999px}
.dot.yellow{background:rgba(255,171,0,.62);width:10px;height:10px;border-radius:999px}
.dot.green{background:rgba(0,135,90,.52);width:10px;height:10px;border-radius:999px}
.mock-bar{display:flex;gap:8px;flex-wrap:wrap}
.mini-pill{
  font-size:11px;font-weight:900;color:rgba(9,30,66,.72);
  padding:4px 10px;border-radius:999px;
  background:rgba(9,30,66,.06);
  border:1px solid rgba(223,225,230,.9);
}
.mock-body{padding:12px}
.mock-row{
  display:grid;
  grid-template-columns: 92px 1fr 120px 110px;
  gap:10px;
  align-items:center;
  padding:10px 8px;
  border-radius:12px;
}
.mock-row.head{
  padding-top:6px;padding-bottom:6px;
  color:rgba(9,30,66,.60);
  font-weight:900;font-size:12px;
}
.mock-row:not(.head):hover{background:#FAFBFC}
.key{font-weight:900;color:rgba(9,30,66,.62);font-size:12px}
.sum{font-weight:900}
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:999px;
  font-weight:900;font-size:11px;
  border:1px solid;
}
.tag.todo{background:rgba(255,171,0,.16);border-color:rgba(255,171,0,.35);color:#7A5D00}
.tag.prog{background:rgba(0,82,204,.14);border-color:rgba(0,82,204,.32);color:var(--blue2)}
.tag.done{background:rgba(0,135,90,.14);border-color:rgba(0,135,90,.30);color:#006644}
.tag.low{background:rgba(0,199,229,.12);border-color:rgba(0,199,229,.28);color:#006A75}
.tag.med{background:rgba(255,171,0,.14);border-color:rgba(255,171,0,.30);color:#7A5D00}
.tag.high{background:rgba(222,53,11,.12);border-color:rgba(222,53,11,.30);color:#BF2600}
.mock-foot{
  margin-top:10px;
  display:flex;gap:10px;align-items:center;
}
.pulse{
  width:10px;height:10px;border-radius:999px;background:rgba(54,179,126,.85);
  box-shadow:0 0 0 0 rgba(54,179,126,.55);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(54,179,126,.55)}
  70%{box-shadow:0 0 0 12px rgba(54,179,126,0)}
  100%{box-shadow:0 0 0 0 rgba(54,179,126,0)}
}

/* Floating cards */
.floating-cards{position:absolute;inset:0;pointer-events:none}
.float-card{
  position:absolute;
  width:190px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(223,225,230,.95);
  border-radius:16px;
  box-shadow:var(--shadow2);
  padding:12px;
}
.fc1{inset-inline-start:-18px;top:18px;animation:floatCard 6.5s ease-in-out infinite}
.fc2{inset-inline-end:-10px;bottom:26px;animation:floatCard 7.3s ease-in-out infinite}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fc-title{font-weight:900}
.fc-sub{color:var(--muted);font-size:12px;font-weight:800;margin-top:2px}

/* Sections */
.section{padding:44px 0}
.section.alt{background:linear-gradient(180deg,#FAFBFC 0%, rgba(244,245,247,.0) 100%)}
.section-head{margin-bottom:18px}
.section-head h2{margin:0;font-size:28px;font-weight:900}
.section-head p{margin:8px 0 0}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}

.card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(223,225,230,.95);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 22px rgba(9,30,66,.06);
  transition:transform .15s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(9,30,66,.10)}
.card h3{margin:0 0 6px;font-weight:900}
.card p{margin:0}

.icon{
  width:40px;height:40px;border-radius:12px;margin-bottom:10px;
  border:1px solid rgba(223,225,230,.95);
  background:#fff;
  position:relative;
  overflow:hidden;
}
.icon::after{
  content:"";position:absolute;inset:-30%;
  background:linear-gradient(90deg,transparent,rgba(0,82,204,.20),transparent);
  transform:rotate(20deg);
}
.i1{background:linear-gradient(135deg, rgba(0,82,204,.16), rgba(255,255,255,.9))}
.i2{background:linear-gradient(135deg, rgba(54,179,126,.16), rgba(255,255,255,.9))}
.i3{background:linear-gradient(135deg, rgba(255,171,0,.16), rgba(255,255,255,.9))}
.i4{background:linear-gradient(135deg, rgba(222,53,11,.12), rgba(255,255,255,.9))}

/* Solution card icons */
.icon{--ic: var(--blue2)}
.i1{--ic: var(--blue2)}
.i2{--ic:#006644}
.i3{--ic:#B65C00}
.i4{--ic:#BF2600}
.icon::after{z-index:1}
.icon .sol-ic{position:absolute;inset:0;margin:auto;width:22px;height:22px;z-index:2;stroke:var(--ic);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.bullets{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.check{
  width:18px;height:18px;border-radius:6px;
  background:rgba(0,135,90,.14);
  border:1px solid rgba(0,135,90,.25);
  display:inline-flex;align-items:center;justify-content:center;
  margin-inline-end:10px;
}
.check::before{content:"✓";font-weight:900;color:#006644;font-size:12px}
.bullets li{display:flex;align-items:flex-start;font-weight:800;color:rgba(9,30,66,.82)}

.feature-media{position:relative}
.panel{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(223,225,230,.95);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-top{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(223,225,230,.95);
  background:#FAFBFC;
}
.panel-title{font-weight:900}
.panel-pill{
  margin-inline-start:auto;
  font-weight:900;font-size:11px;
  color:var(--blue2);
  background:rgba(0,82,204,.12);
  border:1px solid rgba(0,82,204,.22);
  padding:4px 10px;border-radius:999px;
}
.panel-body{padding:14px}
.mini-metric{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:14px;
  background:rgba(9,30,66,.04);
  border:1px solid rgba(223,225,230,.95);
}
.mini-metric + .mini-metric{margin-top:10px}
.mm-label{font-weight:900;color:rgba(9,30,66,.74)}
.mm-value{font-weight:900;font-size:20px;color:var(--blue2)}
.mini-chart{
  margin-top:14px;
  display:flex;gap:8px;align-items:flex-end;height:86px;
}
.mini-chart span{
  width:100%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(0,82,204,.35), rgba(0,82,204,.10));
  border:1px solid rgba(0,82,204,.16);
}
.glow{
  position:absolute;inset:-40px;
  background:radial-gradient(280px 180px at 60% 30%, rgba(0,82,204,.22), transparent 60%);
  filter:blur(24px);
  pointer-events:none;
}

.text-link{display:inline-flex;gap:8px;align-items:center;font-weight:900;color:var(--blue2);margin-top:10px}
.text-link::after{content:"→";font-weight:900}

/* Pricing */
.pricing .price-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.price{font-weight:900;font-size:18px;color:var(--blue2)}
.price-list{margin:0;padding:0 18px;display:grid;gap:8px;color:rgba(9,30,66,.82);font-weight:800}
.pricing .btn{margin-top:14px;width:100%}
.featured{border-color:rgba(0,82,204,.25);box-shadow:0 18px 48px rgba(0,82,204,.12)}
.ribbon{
  display:inline-flex;
  background:rgba(0,82,204,.12);
  color:var(--blue2);
  border:1px solid rgba(0,82,204,.22);
  padding:6px 10px;border-radius:999px;
  font-weight:900;font-size:12px;
  margin-bottom:10px;
}

/* CTA band */
.cta-band{
  padding:42px 0;
  background:
    radial-gradient(900px 320px at 10% 20%, rgba(0,82,204,.18), transparent 55%),
    radial-gradient(900px 320px at 90% 40%, rgba(54,179,126,.12), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 100%);
  border-top:1px solid rgba(223,225,230,.75);
  border-bottom:1px solid rgba(223,225,230,.75);
}
.cta-band-inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.cta-band h2{margin:0;font-weight:900;font-size:26px}
.cta-band p{margin:6px 0 0}

/* Footer */
.footer{background:#fff}
.footer-inner{
  padding:22px 0;
  display:grid;grid-template-columns: 1.2fr 1fr 1fr;
  gap:16px;
  border-bottom:1px solid rgba(223,225,230,.85);
}
.foot-title{font-weight:900;margin-bottom:8px}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-link{color:rgba(9,30,66,.76);font-weight:800}
.foot-link:hover{color:var(--blue2)}
.foot-bottom{
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  gap:10px;
  flex-wrap:wrap;
}
.footer-center{
  font-weight:700;
  text-align:center;
}
.to-top{
  position:absolute;
  inset-inline-end:14px;
  border:0;
  background:transparent;
  color:var(--blue2);
  font-weight:900;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.linklike{
  border:0;background:transparent;color:var(--blue2);
  font-weight:900;cursor:pointer;
}
.linklike:hover{text-decoration:underline}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .blob, .pulse, .float-card{animation:none !important}
  .reveal{transition:none}
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:inline-flex}
  .actions{display:flex}
  .actions .btn{display:none}
  .footer-inner{grid-template-columns:1fr}
}


/* Flag-only language button */
.flag-btn{
  width:58px;height:44px;border-radius:14px;border:1px solid rgba(223,225,230,.95);
  background:#fff;cursor:pointer;font-size:0;color:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;position:relative;overflow:hidden;
  box-shadow:0 8px 18px rgba(9,30,66,.08);
}
.flag-btn::before{
  content:'';display:block;width:34px;height:24px;border-radius:5px;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  box-shadow:0 0 0 1px rgba(9,30,66,.08);
}
.flag-btn[data-lang='ar']::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23ce1126'/%3E%3Crect y='13.33' width='60' height='13.34' fill='%23fff'/%3E%3Crect y='26.66' width='60' height='13.34' fill='%23000000'/%3E%3Ccircle cx='30' cy='20' r='4.2' fill='%23c9a227'/%3E%3C/svg%3E");}
.flag-btn[data-lang='en']::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23b22234'/%3E%3Cg fill='%23fff'%3E%3Crect y='3.08' width='60' height='3.08'/%3E%3Crect y='9.23' width='60' height='3.08'/%3E%3Crect y='15.38' width='60' height='3.08'/%3E%3Crect y='21.53' width='60' height='3.08'/%3E%3Crect y='27.68' width='60' height='3.08'/%3E%3Crect y='33.83' width='60' height='3.08'/%3E%3C/g%3E%3Crect width='27' height='21.5' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='4.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='10.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='16.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='22.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='7.5' cy='8.6' r='1.1'/%3E%3Ccircle cx='13.5' cy='8.6' r='1.1'/%3E%3Ccircle cx='19.5' cy='8.6' r='1.1'/%3E%3Ccircle cx='4.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='10.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='16.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='22.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='7.5' cy='17.2' r='1.1'/%3E%3Ccircle cx='13.5' cy='17.2' r='1.1'/%3E%3Ccircle cx='19.5' cy='17.2' r='1.1'/%3E%3C/g%3E%3C/svg%3E");}
.flag-btn:hover{box-shadow:0 12px 24px rgba(9,30,66,.10)}
.flag-btn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(0,82,204,.18),0 12px 24px rgba(9,30,66,.10)}


@media (max-width: 560px){
  .grid-4{grid-template-columns:1fr}
  .topbar-inner{height:60px}
  .mobile{top:60px}
  .brand-mark{width:44px;height:44px;border-radius:14px}
  .brand-sub{display:none}
  .flag-btn{width:64px;height:48px;border-radius:15px}
  .flag-btn::before{width:38px;height:27px}
  .burger{min-width:96px;padding:10px 14px}
  .burger-label{font-size:14px}
}


/* Nav icons */
.nav-link, .mobile-link{display:inline-flex;align-items:center;gap:8px}
.nav-ico{font-size:15px;line-height:1;transform:translateY(-.5px)}
.mobile-link{gap:10px}
.mobile-link .nav-ico{font-size:16px}

/* Pricing v2 */
.billing-toggle{
  margin:14px auto 24px;
  width:max-content;
  background:rgba(9,30,66,.06);
  border:1px solid rgba(9,30,66,.10);
  border-radius:999px;
  padding:6px;
  display:flex;
  gap:6px;
}
.billing-btn{
  font-family:inherit;
  border:0;
  background:transparent;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  color:rgba(9,30,66,.78);
}
.billing-btn.is-active{
  background:var(--card);
  box-shadow:0 10px 22px rgba(9,30,66,.10);
  color:var(--text);
}

.pricing-v2-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}
.price-card{
  background:var(--card);
  border:1px solid rgba(9,30,66,.10);
  border-radius:18px;
  box-shadow:0 16px 40px rgba(9,30,66,.10);
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:520px;
}
.price-topbar{height:6px}
.bar-blue{background:#1ea7fd}
.bar-red{background:#ff6b6b}
.bar-green{background:#00c1a2}

.price-title{padding:18px 18px 0;font-size:28px;font-weight:900;margin:0}
.price-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px 18px 0}
.price-main{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price-currency{font-weight:900;font-size:24px;color:rgba(9,30,66,.70)}
.price-value{font-weight:900;font-size:56px;letter-spacing:-.02em}
.price-old-wrap{display:flex;align-items:center;gap:6px;min-width:120px;justify-content:flex-end}
.price-old{
  font-weight:900;
  text-decoration:line-through;
  color:rgba(9,30,66,.42);
}
.price-star{color:#ff3b30;font-weight:900}
.price-note{padding:2px 18px 0;margin:0}

.price-features{
  margin:14px 0 0;
  padding:0 18px;
  list-style:none;
  display:grid;
  gap:10px;
  color:rgba(9,30,66,.84);
  font-weight:800;
}
.feat-dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(9,30,66,.35);
  display:inline-block;
  margin-inline-end:10px;
  transform:translateY(-1px);
}
.price-features li{display:flex;align-items:flex-start}
.price-features li span:last-child{flex:1}

.price-card .btn{
  margin:14px 18px 0;
  width:calc(100% - 36px);
}
.price-card .btn.ghost{margin-top:10px}
.price-card .btn:last-of-type{margin-bottom:18px}
.price-footnote{margin-top:18px;text-align:center}

/* Contact form */
.contact-card{padding:20px;border-radius:18px}
.form-block + .form-block{margin-top:18px;padding-top:18px;border-top:1px solid rgba(9,30,66,.08)}
.form-title{margin:0 0 10px;font-weight:900;font-size:16px;color:rgba(9,30,66,.80)}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-weight:900;font-size:13px;color:rgba(9,30,66,.82)}
.field input{
  width:100%;
  border:1px solid rgba(9,30,66,.22);
  border-radius:999px;
  padding:12px 14px;
  font-family:inherit;
  font-weight:800;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  background:#fff;
}
.field input:focus{
  border-color:rgba(0,82,204,.55);
  box-shadow:0 0 0 4px rgba(0,82,204,.10);
}
.ltr-input{direction:ltr;text-align:left}
.form-actions{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  flex-wrap:wrap;
}
#formStatus{font-weight:800}

@media (max-width: 980px){
  .pricing-v2-grid{grid-template-columns:1fr}
  .price-card{min-height:auto}
  .price-value{font-size:48px}
}
@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr}
}


/* ===== Dark footer (Intlaq-like) ===== */
.footer.footer-dark{
  background:#0b0e11;
  color:rgba(255,255,255,.88);
}
.footer.footer-dark a{color:rgba(255,255,255,.86)}
.footer.footer-dark a:hover{color:#fff}

.footer-top{
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-social{display:flex;gap:12px;align-items:center}
.footer-social .soc{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.footer-social svg{width:18px;height:18px;fill:rgba(255,255,255,.78)}

.footer-nav{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  flex:1;
}
.footer-nav a{
  font-weight:800;
  font-size:14px;
  opacity:.92;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  white-space:nowrap;
}
.footer-brand .brand-mark{width:48px;height:48px;border-color:rgba(255,255,255,.18);box-shadow:0 14px 30px rgba(0,0,0,.26)}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-sub{color:rgba(255,255,255,.70)}

.footer-divider{
  height:1px;
  background:rgba(255,255,255,.10);
}

.footer-mid{
  padding:26px 0;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:28px;
  align-items:start;
}
.footer-h{
  font-weight:900;
  margin-bottom:12px;
  color:#fff;
}
.footer-text{
  color:rgba(255,255,255,.74);
  font-weight:700;
  line-height:1.8;
}
.footer-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 0;
  font-weight:800;
  color:rgba(255,255,255,.80);
}
.footer-item .fi-ico{
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.footer-item svg{width:14px;height:14px;fill:rgba(255,255,255,.78)}
.store-badges{display:flex;gap:12px;flex-wrap:wrap}
.store-badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  min-width:180px;
}
.badge-icon,
.badge-play{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.badge-svg{
  width:22px;
  height:22px;
  fill:rgba(255,255,255,.85);
}
.footer .badge-play svg{
  width:22px !important;
  height:22px !important;
  fill:rgba(255,255,255,.85);
}

.badge-ico{
  font-size:20px;
  line-height:1;
  opacity:.9;
}
.badge-play svg{width:22px;height:22px;fill:rgba(255,255,255,.85)}
.badge-txt small{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.70);
  font-weight:700;
}
.badge-txt strong{
  display:block;
  font-size:14px;
  color:#fff;
  font-weight:900;
  margin-top:2px;
}
.visits-h{margin-top:14px}
.visits-number{
  font-size:22px;
  font-weight:900;
  color:#fff;
  letter-spacing:.5px;
}

.footer-bottom{
  position:relative;
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}
.footer-copy{
  color:rgba(255,255,255,.70);
  font-weight:800;
  text-align:center;
}
.to-top.to-top-square{
  position:absolute;
  inset-inline-start:0;
  inset-inline-end:auto;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-weight:900;
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* Footer responsive */
@media (max-width: 860px){
  .footer-mid{grid-template-columns:1fr}
  .footer-top{justify-content:center}
  .footer-brand{order:1}
  .footer-nav{order:2}
  .footer-social{order:3}
  .to-top.to-top-square{inset-inline-start:14px}
}


/* Contact CTA on landing */
.contact-cta .cta-row{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}
.contact-cta .cta-title{ margin:0 0 6px; }
@media (max-width: 860px){
  .contact-cta .cta-row{ flex-direction:column; align-items:stretch; }
  .contact-cta .cta-row .btn{ width:100%; text-align:center; }
}

/* Standalone pages */
.page-hero{
  padding:56px 0 24px;
}
.page-hero h1{ margin:0 0 8px; }
.page-hero .muted{ max-width: 72ch; }

.contact-page .contact-card{ max-width: 980px; margin: 0 auto; }
.contact-page .form-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top: 14px;
}
.btn.tab-black{
  background:#0b0c0f;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  padding: 12px 54px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.btn.tab-black:hover{ filter: brightness(1.05); }

.about-page .about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}
.about-page .about-card{ padding: 18px; }
.about-page ul.goals{ margin: 10px 0 0; padding:0 18px; }
@media (max-width: 980px){
  .about-page .about-grid{ grid-template-columns:1fr; }
}


/* About page refinements */
.about-page .about-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.about-page .about-card{
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.about-page .about-card-top{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.about-page .about-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 20px;
  flex: 0 0 auto;
}
.about-page .about-h{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}
.about-page .about-sub{
  margin: 4px 0 0;
  font-weight: 700;
  opacity: .75;
}
.about-page ul.goals{
  margin: 4px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 10px;
}
.about-page ul.goals li{
  position:relative;
  padding-inline-start: 26px;
}
.about-page ul.goals li::before{
  content:"✓";
  position:absolute;
  inset-inline-start: 0;
  top: 0;
  font-weight: 900;
  opacity: .9;
}
@media (max-width: 980px){
  .about-page .about-grid{ grid-template-columns:1fr; }
}


.billing-btn span{font-family:inherit;}



/* === Mobile: keep floating feature cards fully visible === */
@media (max-width: 640px){
  .float-card{
    width: min(220px, calc(100% - 24px));
    padding: 10px;
    border-radius: 14px;
  }
  .fc1{ inset-inline-start: 12px; top: 12px; }
  .fc2{ inset-inline-end: 12px; bottom: 12px; }
  .fc-sub{font-size:11px}
}

/* === Animated main headings (subtle glow/pulse) === */
@keyframes titlePulse{
  0%,100%{ transform: translateY(0); text-shadow: 0 0 0 rgba(0,0,0,0); opacity: 1; }
  50%{ transform: translateY(-2px); text-shadow: 0 12px 26px rgba(0,82,204,.18); opacity: .96; }
}
.hero-title,
.section-head h2{
  animation: titlePulse 3.4s ease-in-out infinite;
  will-change: transform;
}
.section-head h2{ animation-duration: 3.8s; }

@media (prefers-reduced-motion: reduce){
  .hero-title,
  .section-head h2{ animation: none !important; }
}

/* =========================
   v11 Fixes
   - Mobile: ensure hero mock (preview image) fits fully
   - Mobile: force floating cards inside viewport
   - Headings: more noticeable subtle glow/pulse animation
   ========================= */

@media (max-width: 560px){
  /* Keep the mock fully visible (no clipping / overflow) */
  .hero-media{max-width:100%}
  .mock{max-width:100%}
  .mock-body{padding:10px}

  /* Reduce table columns so it fits small screens */
  .mock-row{
    grid-template-columns: 68px 1fr 92px 78px;
    gap:8px;
    padding:8px 6px;
  }
  .mock-row.head{font-size:11px}
  .sum{font-size:13px;line-height:1.25}
  .key{font-size:11px}
  .tag{font-size:10px;padding:3px 8px}
}

@media (max-width: 560px){
  /* Force floating cards to stay inside on mobile */
  .float-card{width:min(210px, calc(100% - 28px));}
  .fc1{inset-inline-start:10px !important; top:10px !important;}
  .fc2{inset-inline-end:10px !important; bottom:10px !important;}
}

/* More visible (but still elegant) title glow/pulse */
@keyframes titleGlow{
  0%,100%{transform:translateY(0);opacity:1;text-shadow:0 0 0 rgba(0,82,204,0)}
  50%{transform:translateY(-2px);opacity:.97;text-shadow:0 12px 34px rgba(0,82,204,.24), 0 0 14px rgba(0,82,204,.20)}
}

.hero-title,
.section-head h2,
.page-title,
.about-page h1{
  animation:titleGlow 3.2s ease-in-out infinite;
  will-change:transform;
}

.section-head h2{animation-duration:3.8s}

@media (prefers-reduced-motion: reduce){
  .hero-title,
  .section-head h2,
  .page-title,
  .about-page h1{animation:none !important}
}

@media (max-width: 420px){
  /* Ultra-small phones: hide Priority column to avoid clipping */
  .mock-row{grid-template-columns: 62px 1fr 88px;}
  .mock-row > :nth-child(4){display:none;}
}