/* ══════════════════════════════════════════════════════════════
   WEBSITE-TYPE PAGES (shopify-websites, landing-pages, digital-business-card,
   ai-websites, 3d-websites, portfolio-websites, architects-websites)
   Loaded after css/style.css + css/websites.css (contact form, CTA, Spline).
══════════════════════════════════════════════════════════════ */

.wt-page { font-family: 'Assistant', sans-serif; color: #1F3A4B; }

/* ── Breadcrumb ── */
.wt-crumbs { padding-top: 18px; font-size: .9rem; }
.wt-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; color: #6b7a88; }
.wt-crumbs li + li::before { content: '‹'; margin-left: 6px; color: #9aa7b3; }
.wt-crumbs a { color: #0057e7; text-decoration: none; }
.wt-crumbs a:hover { text-decoration: underline; }

/* ── Hero ── */
.wt-hero { padding: 48px 0 70px; text-align: center; position: relative; overflow: hidden; }
.wt-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 60% at 50% 0%, rgba(0,87,231,.09) 0%, rgba(0,87,231,0) 70%);
}
.wt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,87,231,.08); color: #0057e7;
  font-size: .9rem; font-weight: 700; padding: 7px 18px; border-radius: 50px; margin-bottom: 20px;
}
.wt-hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; color: #1F3A4B; margin: 0 auto 18px; max-width: 900px;
}
.wt-hero h1 .wt-accent { color: #0057e7; }
.wt-hero-sub { font-size: 1.15rem; line-height: 1.8; color: #4b5b69; max-width: 680px; margin: 0 auto 32px; }
.wt-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.wt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 50px; font-size: 1.05rem; font-weight: 700;
  text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s;
}
.wt-btn-primary { background: #0057e7; color: #fff; }
.wt-btn-primary:hover { background: #003db3; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,87,231,.3); }
.wt-btn-ghost { background: #fff; color: #0057e7; border: 1.5px solid rgba(0,87,231,.35); }
.wt-btn-ghost:hover { border-color: #0057e7; transform: translateY(-2px); }
.wt-btn-wa { background: #25d366; color: #fff; }
.wt-btn-wa:hover { background: #1eb457; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,211,102,.3); }

/* ── Generic section ── */
.wt-section { padding: 80px 0; }
.wt-section.alt { background: #f7f9fc; }
.wt-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.wt-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; color: #0a1f6e; margin: 0 0 12px; line-height: 1.2; }
.wt-head p { font-size: 1.05rem; line-height: 1.8; color: #5a6a78; margin: 0; }

/* ── Intro: text + "who is it for" ── */
.wt-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.wt-intro-text h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; color: #0a1f6e; margin: 0 0 16px; line-height: 1.25; }
.wt-intro-text p { font-size: 1.05rem; line-height: 1.9; color: #4b5b69; margin: 0 0 14px; }
.wt-fit { background: #fff; border: 1px solid #e3e8f2; border-radius: 20px; padding: 28px; box-shadow: 0 6px 30px rgba(15,35,80,.06); }
.wt-fit h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 16px; color: #1F3A4B; }
.wt-fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wt-fit li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.6; color: #33424f; }
.wt-fit li i { color: #0057e7; margin-top: 5px; flex-shrink: 0; }

/* ── Features grid ── */
.wt-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wt-feature {
  background: #fff; border: 1px solid #e3e8f2; border-radius: 18px; padding: 28px 26px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.wt-feature:hover { transform: translateY(-4px); border-color: rgba(0,87,231,.3); box-shadow: 0 14px 34px rgba(0,87,231,.1); }
.wt-feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0057e7, #0284c7); color: #fff; font-size: 1.3rem; margin-bottom: 18px;
}
.wt-feature h3 { font-size: 1.15rem; font-weight: 800; color: #1F3A4B; margin: 0 0 10px; }
.wt-feature p { font-size: .98rem; line-height: 1.75; color: #5a6a78; margin: 0; }

/* ── Process steps ── */
.wt-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: flex; flex-direction: column; gap: 16px; counter-reset: wtstep; }
.wt-step {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  background: #fff; border: 1px solid #e3e8f2; border-radius: 18px; padding: 22px 24px;
}
.wt-step::before {
  counter-increment: wtstep; content: counter(wtstep, decimal-leading-zero);
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(0,87,231,.08); color: #0057e7; font-weight: 800; font-size: 1.15rem;
}
.wt-step h3 { font-size: 1.12rem; font-weight: 800; margin: 4px 0 6px; color: #1F3A4B; }
.wt-step p { font-size: .98rem; line-height: 1.75; color: #5a6a78; margin: 0; }

/* ── Work examples gallery ── */
.wt-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wt-gallery.two { grid-template-columns: repeat(2, 1fr); }
.wt-shot { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e3e8f2; box-shadow: 0 6px 24px rgba(15,35,80,.06); }
.wt-shot img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; background: #eef2f7; }
.wt-shot figcaption { padding: 14px 18px; font-size: .95rem; font-weight: 600; color: #33424f; }
.wt-gallery-note { text-align: center; margin: 28px 0 0; }
.wt-gallery-note a { color: #0057e7; font-weight: 700; text-decoration: none; }
.wt-gallery-note a:hover { text-decoration: underline; }

/* ── Tools chips (AI page) ── */
.wt-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; }
.wt-tool {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  background: #fff; border: 1px solid #e3e8f2; border-radius: 50px; font-weight: 700; font-size: 1rem; color: #1f2430;
}
.wt-tool img { width: 24px; height: 24px; object-fit: contain; }

/* ── Digital card phone demo ── */
.wt-phone-wrap { display: flex; justify-content: center; }
.wt-phone {
  width: 290px; border-radius: 40px; padding: 12px; background: #111; box-shadow: 0 30px 60px rgba(15,35,80,.25);
}
.wt-phone-screen { border-radius: 30px; overflow: hidden; background: #fff; }
.wt-card-cover { height: 96px; background: linear-gradient(135deg, #0057e7, #0284c7); }
.wt-card-logo {
  width: 84px; height: 84px; border-radius: 50%; background: #fff; margin: -42px auto 10px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.12); overflow: hidden;
}
.wt-card-logo img { width: 70px; height: auto; }
.wt-card-name { text-align: center; font-weight: 800; font-size: 1.1rem; margin: 0; color: #1F3A4B; }
.wt-card-role { text-align: center; font-size: .85rem; color: #6b7a88; margin: 4px 0 16px; }
.wt-card-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 14px; }
.wt-card-actions span {
  aspect-ratio: 1; border-radius: 14px; background: rgba(0,87,231,.08); color: #0057e7;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.wt-card-save {
  margin: 0 16px 14px; padding: 11px; border-radius: 12px; background: #0057e7; color: #fff;
  text-align: center; font-weight: 700; font-size: .92rem;
}
.wt-card-links { display: flex; justify-content: center; gap: 14px; padding: 0 16px 22px; color: #1F3A4B; font-size: 1.15rem; }
.wt-demo-note { text-align: center; font-size: .88rem; color: #6b7a88; margin: 16px 0 0; }

/* ── Related types ── */
.wt-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wt-related a {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px;
  background: #fff; border: 1px solid #e3e8f2; color: #1F3A4B; font-weight: 700; text-decoration: none;
  transition: border-color .2s, transform .2s, color .2s;
}
.wt-related a i { color: #0057e7; width: 22px; text-align: center; }
.wt-related a:hover { border-color: #0057e7; color: #0057e7; transform: translateY(-2px); }
.wt-related a.wt-related-hub { background: #0057e7; color: #fff; border-color: #0057e7; }
.wt-related a.wt-related-hub i { color: #fff; }
.wt-related a.wt-related-hub:hover { background: #003db3; color: #fff; }

/* ── FAQ wrapper (reuses .faq-* from style.css) ── */
.wt-faq { max-width: 900px; margin: 0 auto; }
.wt-faq .faq-container { padding: 0; background: transparent; }

/* ── Contact form tweaks (reuses .ws-contact-* from websites.css) ── */
.wt-page .ws-contact-section { scroll-margin-top: 90px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .wt-intro { grid-template-columns: 1fr; gap: 30px; }
  .wt-features, .wt-gallery, .wt-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wt-hero { padding: 32px 0 50px; }
  .wt-hero-sub { font-size: 1.02rem; }
  .wt-btn { width: 100%; }
  .wt-section { padding: 56px 0; }
  .wt-head { margin-bottom: 30px; }
  .wt-features, .wt-gallery, .wt-gallery.two, .wt-related { grid-template-columns: 1fr; }
  .wt-feature { padding: 22px 20px; }
  .wt-step { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; }
  .wt-step::before { width: 44px; height: 44px; font-size: 1rem; }
  .wt-fit { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-feature, .wt-btn, .wt-related a { transition: none; }
}

/* ══════════════════════════════════════
   SHOPIFY PAGE (shopify-websites.html)
══════════════════════════════════════ */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #1a7bff 0%, #0057e7 48%, #003db5 100%);
  color: #fff; font-family: 'Assistant', sans-serif; font-size: 1.12rem; font-weight: 800;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 87, 231, .32);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.sh-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 87, 231, .42); filter: brightness(1.06); }
.sh-btn i { font-size: .95em; }

/* Hero */
.sh-hero {
  position: relative; overflow: hidden;
  padding: 36px 0 72px;
  background: #fff;
}
.sh-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px; }
.sh-hero-text { text-align: right; }
.sh-hero-title { margin: 0 0 18px; font-family: 'Assistant', sans-serif; font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.sh-hero-l1 { display: block; font-size: clamp(2.6rem, 5.4vw, 4.6rem); color: #0b1f4d; }
.sh-hero-l2 {
  display: block; font-size: clamp(2.9rem, 6.2vw, 5.4rem);
  background: linear-gradient(135deg, #1a7bff 0%, #0057e7 55%, #003db5 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: .08em;
}
.sh-hero-sub { max-width: 560px; margin: 0 0 28px; font-size: 1.15rem; line-height: 1.75; color: #4a5a6a; }
.sh-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 26px; }
.sh-call { font-size: 1.12rem; font-weight: 700; color: #0b1f4d; text-decoration: none; }
.sh-call span { color: #0057e7; }
.sh-call:hover span { text-decoration: underline; }

.sh-lead-wrap { max-width: 640px; }
.sh-lead-row { display: flex; gap: 12px; }
.sh-lead-input {
  flex: 1 1 0; min-width: 0; height: 58px; padding: 0 20px;
  border: 1px solid #dde2ee; border-radius: 14px; background: #fff;
  font-family: 'Assistant', sans-serif; font-size: 1.05rem; color: #1F3A4B;
  text-align: right;
  transition: border-color .2s, box-shadow .2s;
}
.sh-lead-input::placeholder { color: #8a95a5; text-align: right; }
.sh-lead-input:focus { outline: none; border-color: #0057e7; box-shadow: 0 0 0 4px rgba(0, 87, 231, .12); }
.sh-btn-form { flex: 0 0 auto; height: 58px; padding: 0 26px; border-radius: 14px; font-size: 1.05rem; }
.sh-lead-consent { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .88rem; color: #6b7a88; cursor: pointer; }
.sh-lead-consent input { width: 16px; height: 16px; accent-color: #0057e7; margin: 0; }
.sh-lead-consent a { color: #0057e7; }
.sh-lead-ok { margin: 0; padding: 16px 20px; border-radius: 14px; background: #ecfdf3; color: #067647; font-weight: 700; }

.sh-perks { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 44px; margin: 28px 0 0; padding: 0; }
.sh-perks li { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; font-weight: 700; color: #0b1f4d; }
.sh-perks i {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 87, 231, .1); color: #0057e7; font-size: .72rem;
}

.sh-hero-visual { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 560px; }
.sh-hero-orb {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  width: min(470px, 92%); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(145deg, rgba(139, 92, 246, .55) 0%, rgba(99, 102, 241, .32) 45%, rgba(16, 185, 129, .5) 100%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 70px rgba(255, 255, 255, .45), 0 30px 80px rgba(139, 92, 246, .22);
}
.sh-hero-orb::before {
  content: ""; position: absolute; inset: -12%; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 200deg, rgba(139, 92, 246, .35), rgba(16, 185, 129, .35), rgba(139, 92, 246, .35));
  filter: blur(46px);
}
.sh-hero-visual img {
  position: relative; z-index: 1; width: min(430px, 86%); height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* Portfolio */
.sh-work {
  position: relative; overflow: hidden; padding: 90px 0 100px;
  background: #fff;
  color: #0b1f4d;
}
.sh-work-head { text-align: right; margin-bottom: 46px; }
.sh-work-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .95rem; font-weight: 700; letter-spacing: .14em; color: #6b7a88; }
.sh-work-eyebrow::after { content: ""; width: 42px; height: 2px; background: rgba(11, 31, 77, .35); }
.sh-work-title { margin: 14px 0 12px; font-family: 'Assistant', sans-serif; font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.1; color: #0b1f4d; }
.sh-work-sub { margin: 0; font-size: 1.12rem; color: #5a6878; }
.sh-work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sh-work-card {
  display: flex; flex-direction: column; text-decoration: none; color: #0b1f4d;
  border: 2px solid #000; border-radius: 22px; overflow: hidden;
  background: #fff;
  transition: transform .3s, box-shadow .3s;
}
.sh-work-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(11, 31, 77, .16); }
.sh-work-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-bottom: 2px solid #000; }
.sh-work-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.sh-work-card:hover .sh-work-media img { transform: scale(1.05); }
.sh-work-view {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  background: #0b1f4d; color: #fff; font-weight: 800; font-size: .98rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s;
}
.sh-work-card:hover .sh-work-view, .sh-work-card:focus-visible .sh-work-view { opacity: 1; transform: translateY(0); }
.sh-work-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; font-size: 1.15rem; font-weight: 800; }
.sh-work-name i { font-size: .85rem; color: #8a95a5; }
.sh-work-card--static:hover { transform: none; box-shadow: none; }
.sh-work-card--static:hover .sh-work-media img { transform: none; }
@media (hover: none) {
  .sh-work-view { opacity: 1; transform: none; }
}

.wt-page #clients { padding-top: 64px; }

@media (max-width: 900px) {
  .sh-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .sh-hero-visual { min-height: 0; order: 2; }
  .sh-hero-visual img { width: min(330px, 78%); }
  .sh-hero-orb { width: min(350px, 86%); }
  .sh-work-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) { .sh-work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .sh-hero { padding: 22px 0 40px; }
  .sh-hero-text { text-align: center; }
  .sh-hero-sub { margin-left: auto; margin-right: auto; font-size: 1.05rem; }
  .sh-hero-cta { flex-direction: column; gap: 12px; }
  .sh-hero-cta .sh-btn { width: 100%; }
  .sh-lead-row { flex-direction: column; }
  .sh-lead-input, .sh-btn-form { height: 54px; width: 100%; flex: 0 0 auto; }
  .sh-lead-consent { justify-content: center; }
  .sh-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-items: start; text-align: right; }
  .sh-work { padding: 64px 0 70px; }
  .sh-work-head { text-align: center; }
  .sh-work-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ══════════════════════════════════════
   AI WEBSITES PAGE (ai-websites.html)
══════════════════════════════════════ */
.ai-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid #e3e8f2;
  box-shadow: 0 12px 30px rgba(15, 35, 80, .14);
  font-family: 'Assistant', sans-serif; font-size: 1rem; font-weight: 800; color: #0b1f4d;
  direction: ltr; white-space: nowrap;
  animation: ai-chip-float 5s ease-in-out infinite;
}
.ai-chip img { width: 26px; height: 26px; object-fit: contain; }
.ai-chip i { font-size: 1.1rem; color: #0057e7; }
.ai-chip--1 { top: 22%; left: 2%; }
.ai-chip--2 { top: 8%; right: 6%; animation-delay: -1.6s; }
.ai-chip--3 { bottom: 20%; right: 0; animation-delay: -3.2s; }
@keyframes ai-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Minimal sections */
.ai-sec { padding: 120px 0; background: #fff; font-family: 'Assistant', sans-serif; color: #1d1d1f; }
.ai-sec--gray { background: #f5f5f7; }
.ai-min-head { max-width: 760px; margin: 0 auto; text-align: center; }
.ai-min-head h2 {
  margin: 0; font-family: 'Assistant', sans-serif;
  font-size: clamp(2.3rem, 4.8vw, 3.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
  color: #1d1d1f;
}
.ai-min-head p { margin: 18px auto 0; max-width: 680px; font-size: 1.28rem; line-height: 1.6; color: #6e6e73; }

.ai-min-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 84px; text-align: center; }
.ai-min-tool img { display: block; width: 72px; height: 72px; margin: 0 auto; object-fit: contain; }
.ai-min-tool h3 { margin: 26px 0 4px; font-family: 'Assistant', sans-serif; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; color: #1d1d1f; direction: ltr; }
.ai-min-role { display: block; font-size: 1rem; font-weight: 700; color: #86868b; }
.ai-min-tool p { max-width: 290px; margin: 14px auto 0; font-size: 1.12rem; line-height: 1.6; color: #6e6e73; }

.ai-min-self { max-width: 820px; text-align: center; }
.ai-min-self h2 {
  position: relative; display: inline-block;
  margin: 60px 0 0; font-family: 'Assistant', sans-serif;
  font-size: clamp(2.8rem, 6.4vw, 5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: #1d1d1f;
}
/* Claude Code mascot standing on the headline, hopping and waving hello */
.ai-hello {
  position: absolute; bottom: calc(100% - .14em); left: 4%;
  width: 60px; height: auto; display: block; cursor: pointer;
  transform-origin: 50% 100%;
  animation: ai-hello 4.5s ease-in-out infinite;
}
.ai-hello-bubble {
  position: absolute; bottom: calc(100% + 54px); left: calc(4% + 44px);
  padding: 6px 12px; border-radius: 14px 14px 14px 4px;
  background: #1d1d1f; color: #fff;
  font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; white-space: nowrap;
  opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 0 100%;
  animation: ai-hello-bubble 4.5s ease-in-out infinite;
  pointer-events: none;
}
.ai-min-self h2:hover .ai-hello { animation: ai-hello-wave .7s ease-in-out infinite; }
@keyframes ai-hello {
  0%, 52%, 100% { transform: translateY(0) rotate(0); }
  58% { transform: translateY(-18px) rotate(0); }
  63% { transform: translateY(-18px) rotate(-12deg); }
  68% { transform: translateY(-18px) rotate(12deg); }
  73% { transform: translateY(-18px) rotate(-12deg); }
  78% { transform: translateY(-18px) rotate(10deg); }
  84% { transform: translateY(0) rotate(0); }
  88% { transform: translateY(0) scaleY(.92); }
  92% { transform: translateY(0) scaleY(1); }
}
@keyframes ai-hello-wave {
  0%, 100% { transform: rotate(-12deg) translateY(-6px); }
  50% { transform: rotate(12deg) translateY(-6px); }
}
@keyframes ai-hello-bubble {
  0%, 54%, 90%, 100% { opacity: 0; transform: translateY(6px) scale(.9); }
  60%, 84% { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-min-self p { max-width: 640px; margin: 22px auto 0; font-size: 1.28rem; line-height: 1.6; color: #6e6e73; }

.ai-min-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 80px; }
.ai-min-item { position: relative; padding-top: 28px; transition: transform .35s ease; }
.ai-min-item::before, .ai-min-item::after { content: ""; position: absolute; top: 0; right: 0; height: 1px; }
.ai-min-item::before { left: 0; background: #d2d2d7; }
.ai-min-item::after { width: 0; height: 2px; background: #0057e7; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.ai-min-item:hover { transform: translateY(-6px); }
.ai-min-item:hover::after { width: 100%; }
.ai-min-item i { display: inline-block; font-size: 1.5rem; color: #0057e7; transition: transform .35s ease; }
.ai-min-item:hover i { transform: scale(1.2); }

/* Scroll reveal: items rise in one after another, the line fills blue, icons start moving */
.ai-min-why.ai-anim .ai-min-item { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.ai-min-why.ai-anim.is-in .ai-min-item { opacity: 1; transform: none; }
.ai-min-why.ai-anim.is-in .ai-min-item:hover { transform: translateY(-6px); }
.ai-min-why.ai-anim.is-in .ai-min-item::after { width: 100%; }
.ai-min-why.ai-anim .ai-min-item:nth-child(2), .ai-min-why.ai-anim .ai-min-item:nth-child(2)::after { transition-delay: .14s; }
.ai-min-why.ai-anim .ai-min-item:nth-child(3), .ai-min-why.ai-anim .ai-min-item:nth-child(3)::after { transition-delay: .28s; }
.ai-min-why.ai-anim .ai-min-item:nth-child(4), .ai-min-why.ai-anim .ai-min-item:nth-child(4)::after { transition-delay: .42s; }
.ai-min-why.is-in .fa-bolt { animation: ai-bolt 2.4s ease-in-out infinite; }
.ai-min-why.is-in .fa-code { animation: ai-code 2.8s ease-in-out infinite; }
.ai-min-why.is-in .fa-sync-alt { animation: ai-spin 3.2s ease-in-out infinite; }
.ai-min-why.is-in .fa-microchip { animation: ai-chip-pulse 2.6s ease-in-out infinite; }
@keyframes ai-bolt { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 76% { transform: scale(1.25); opacity: .55; } 82% { transform: scale(1.1); opacity: 1; } }
@keyframes ai-code { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes ai-spin { 0%, 55% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes ai-chip-pulse { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(0, 87, 231, .45)); } }
@media (prefers-reduced-motion: reduce) {
  .ai-hello, .ai-hello-bubble, .ai-min-why .fas { animation: none !important; }
  .ai-hello-bubble { display: none; }
}
.ai-min-item h3 { margin: 18px 0 8px; font-family: 'Assistant', sans-serif; font-size: 1.3rem; font-weight: 800; color: #1d1d1f; }
.ai-min-item p { margin: 0; font-size: 1.08rem; line-height: 1.6; color: #6e6e73; }

/* Why us (comparison) */
.ai-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 64px auto 0; }
.ai-col { padding: 34px 32px; border-radius: 26px; }
.ai-col h3 { margin: 0 0 20px; font-family: 'Assistant', sans-serif; font-size: 1.4rem; font-weight: 800; }
.ai-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ai-col li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.08rem; line-height: 1.6; }
.ai-col li i {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 2px;
  border-radius: 50%; font-size: .72rem;
}
.ai-col--them { background: #f5f5f7; color: #6e6e73; }
.ai-col--them h3 { color: #6e6e73; }
.ai-col--them li i { background: #e3e3e8; color: #86868b; }
.ai-col--us { background: #fff; border: 1px solid #d2d2d7; color: #1d1d1f; }
.ai-col--us h3 { color: #1d1d1f; }
.ai-col--us li { font-weight: 700; }
.ai-col--us li i { background: #0057e7; color: #fff; }

@media (max-width: 900px) {
  .ai-min-tools { grid-template-columns: 1fr; gap: 56px; margin-top: 64px; }
  .ai-min-why { grid-template-columns: 1fr 1fr; gap: 36px 28px; margin-top: 60px; }
  .ai-chip { font-size: .9rem; padding: 8px 13px; }
  .ai-chip img { width: 22px; height: 22px; }
}
@media (max-width: 600px) {
  .ai-sec { padding: 80px 0; }
  .ai-min-head p, .ai-min-self p { font-size: 1.12rem; }
  .ai-min-why, .ai-compare { grid-template-columns: 1fr; }
  .ai-chip--1 { left: 0; top: 18%; }
  .ai-chip--2 { right: 0; top: 4%; }
  .ai-chip--3 { right: 0; bottom: 16%; }
}
@media (prefers-reduced-motion: reduce) { .ai-chip { animation: none; } }

/* Homepage hero uses a longer headline */
.home-hero .sh-hero-l1 { font-size: clamp(2.1rem, 4.3vw, 3.6rem); }
.home-hero .sh-hero-l2 { font-size: clamp(2.3rem, 4.8vw, 4rem); }

/* ══════════════════════════════════════
   PRICING PAGE (pricing.html)
══════════════════════════════════════ */
.pr-visual { align-items: center; }
.pr-visual .pr-calc {
  position: relative; z-index: 1; width: min(370px, 78%); height: auto; display: block;
  -webkit-mask-image: none; mask-image: none;
  transform: rotate(-9deg);
  filter: drop-shadow(0 28px 34px rgba(0, 40, 120, .28));
  animation: pr-calc-float 6s ease-in-out infinite;
}
@keyframes pr-calc-float { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .pr-visual .pr-calc { animation: none; } }

.pr-section { padding: 96px 0 100px; background: #fff; font-family: 'Assistant', sans-serif; color: #1d1d1f; }
.pr-intro { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.pr-intro h2 { margin: 0 0 14px; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.pr-intro p { margin: 0; font-size: 1.2rem; line-height: 1.7; color: #6e6e73; }

.pr-nav {
  position: sticky; top: 84px; z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 auto 64px; padding: 12px;
  background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid #e6e8ee; border-radius: 999px; width: fit-content; max-width: 100%;
  box-shadow: 0 10px 30px rgba(15, 35, 80, .08);
}
.pr-nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  font-size: .98rem; font-weight: 700; color: #33415a; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.pr-nav a i { color: #0057e7; font-size: .9rem; }
.pr-nav a:hover { background: #eef3ff; color: #0057e7; }

.pr-cat { scroll-margin-top: 170px; margin-bottom: 72px; }
.pr-cat-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.pr-cat-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(135deg, #1a7bff, #003db5); color: #fff; font-size: 1.4rem;
  box-shadow: 0 12px 26px rgba(0, 87, 231, .28);
}
.pr-cat-head h2 { margin: 0 0 4px; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.pr-cat-head p { margin: 0; font-size: 1.08rem; color: #6e6e73; line-height: 1.55; }

.pr-rows { display: grid; gap: 14px; }
.pr-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px;
  padding: 26px 30px; border-radius: 22px; background: #fff;
  border: 1px solid #e6e8ee; box-shadow: 0 1px 2px rgba(15, 35, 80, .03);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}
.pr-row:hover { transform: translateY(-3px); border-color: #c9d9fb; box-shadow: 0 18px 40px rgba(15, 35, 80, .09); }
.pr-row-main h3 { margin: 0 0 8px; font-size: 1.32rem; font-weight: 800; color: #0b1f4d; }
.pr-row-main p { margin: 0; font-size: 1.04rem; line-height: 1.7; color: #5b6777; max-width: 780px; }
.pr-extra { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: #f3f7ff; color: #0057e7; font-size: .92rem; font-weight: 700; }
.pr-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; text-align: left; direction: rtl; white-space: nowrap; }
.pr-price-val { direction: ltr; unicode-bidi: isolate; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; color: #0057e7; line-height: 1; }
.pr-price-val i { font-style: normal; font-size: 1.15rem; margin-right: 3px; font-weight: 700; color: #4a7ad6; }
.pr-price-pre, .pr-price-suf, .pr-price-note { font-size: 1rem; font-weight: 700; color: #6e6e73; }

.pr-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.pr-note { padding: 28px 30px; border-radius: 22px; background: #f5f7fb; border: 1px solid #e6e8ee; }
.pr-note--no { background: #fff7f5; border-color: #f6dcd5; }
.pr-note h3 { margin: 0 0 14px; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 10px; color: #0b1f4d; }
.pr-note--no h3 i { color: #e5533d; } .pr-note h3 i { color: #0057e7; }
.pr-note ul { margin: 0; padding: 0 20px 0 0; display: grid; gap: 8px; color: #4a5565; font-size: 1.04rem; line-height: 1.6; }

@media (max-width: 900px) {
  .pr-nav { top: 72px; border-radius: 22px; }
  .pr-notes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pr-section { padding: 64px 0 70px; }
  .pr-nav { position: static; margin-bottom: 44px; }
  .pr-nav a { padding: 9px 14px; font-size: .92rem; }
  .pr-cat { margin-bottom: 52px; }
  .pr-cat-head { gap: 14px; } .pr-cat-icon { width: 50px; height: 50px; font-size: 1.15rem; border-radius: 15px; }
  .pr-row { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .pr-price { justify-content: flex-start; }
  .pr-price-val { font-size: 1.9rem; }
}

/* Stylized 3D calculator for the pricing hero */
.pr-visual .pc-wrap { position: relative; z-index: 1; width: min(330px, 74%); perspective: 1200px; }
.pc-body {
  position: relative; padding: 18px 18px 20px; border-radius: 34px;
  background: linear-gradient(160deg, #2b6dff 0%, #0b3fc9 55%, #072a8f 100%);
  box-shadow: 0 40px 70px rgba(5, 35, 120, .38), 0 12px 24px rgba(5, 35, 120, .25), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -6px 14px rgba(0, 0, 0, .22);
  transform: rotateY(-14deg) rotateX(7deg) rotateZ(-3deg);
  transform-style: preserve-3d; animation: pc-float 6s ease-in-out infinite;
}
.pc-body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 38%); }
@keyframes pc-float { 0%, 100% { transform: rotateY(-14deg) rotateX(7deg) rotateZ(-3deg) translateY(0); } 50% { transform: rotateY(-10deg) rotateX(5deg) rotateZ(-2deg) translateY(-12px); } }
.pc-screen {
  position: relative; direction: ltr; margin-bottom: 16px; padding: 14px 16px 12px; border-radius: 20px; min-height: 104px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 4px;
  background: linear-gradient(180deg, #0a1a4d 0%, #10296e 100%);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.pc-label { align-self: flex-start; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: #7fa6ff; font-family: 'Assistant', sans-serif; direction: rtl; }
.pc-value { font-family: 'Assistant', sans-serif; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: #fff; text-shadow: 0 0 18px rgba(122, 176, 255, .6); }
.pc-value i { font-style: normal; font-size: 1.5rem; color: #7fc2ff; margin-right: 4px; }
.pc-bar { width: 100%; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pc-bar b { display: block; height: 100%; width: 68%; border-radius: 4px; background: linear-gradient(90deg, #36e0b0, #7fc2ff); animation: pc-bar 3.6s ease-in-out infinite; }
@keyframes pc-bar { 0%, 100% { width: 55%; } 50% { width: 88%; } }
.pc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; direction: ltr; }
.pc-k {
  display: grid; place-items: center; height: 44px; border-radius: 14px;
  font-family: 'Assistant', sans-serif; font-size: 1.15rem; font-weight: 800; color: #1d2a55;
  background: linear-gradient(180deg, #ffffff 0%, #dfe7fb 100%);
  box-shadow: 0 4px 0 #b4c4ee, 0 7px 12px rgba(0, 20, 90, .3), inset 0 1px 0 #fff;
}
.pc-fn { background: linear-gradient(180deg, #e9eefc 0%, #c8d5f6 100%); color: #3a4d8f; }
.pc-op { background: linear-gradient(180deg, #7fb1ff 0%, #3d82ff 100%); color: #fff; box-shadow: 0 4px 0 #2358c9, 0 7px 12px rgba(0, 20, 90, .3), inset 0 1px 0 rgba(255, 255, 255, .5); }
.pc-eq { background: linear-gradient(180deg, #4df0c0 0%, #11c993 100%); color: #05382b; box-shadow: 0 4px 0 #0a8f6a, 0 7px 12px rgba(0, 20, 90, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pc-coin {
  position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%;
  font-family: 'Assistant', sans-serif; font-weight: 800; color: #8a5a00;
  background: radial-gradient(circle at 32% 28%, #fff3b0 0%, #ffd23f 42%, #e8a400 100%);
  box-shadow: 0 14px 26px rgba(160, 100, 0, .35), inset 0 -4px 8px rgba(150, 90, 0, .35), inset 0 3px 5px rgba(255, 255, 255, .8);
  animation: pc-coin 5s ease-in-out infinite;
}
.pc-coin--1 { width: 76px; height: 76px; font-size: 2rem; top: -28px; left: -26px; }
.pc-coin--2 { width: 52px; height: 52px; font-size: 1.4rem; bottom: 70px; left: -40px; animation-delay: -1.7s; }
.pc-coin--3 { width: 38px; height: 38px; font-size: 1rem; top: 46%; right: -44px; animation-delay: -3.2s; }
@keyframes pc-coin { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
@media (max-width: 600px) {
  .pr-visual .pc-wrap { width: min(280px, 72%); }
  .pc-value { font-size: 2.1rem; } .pc-k { height: 38px; }
  .pr-visual { padding-top: 44px; } .pc-coin--1 { left: -14px; width: 60px; height: 60px; font-size: 1.6rem; } .pc-coin--2 { left: -22px; } .pc-coin--3 { right: -24px; }
}
@media (prefers-reduced-motion: reduce) { .pc-body, .pc-coin, .pc-bar b { animation: none; } }

/* English (LTR) pages */
html[dir="ltr"] .sh-lead-input { text-align:left; }
html[dir="ltr"] .sh-hero-text, html[dir="ltr"] .sh-lead-consent { text-align:left; direction:ltr; }
html[dir="ltr"] .sh-lead-input { direction:ltr; text-align:left; }
html[dir="ltr"] .main-nav { direction:ltr; }
html[dir="ltr"] .pr-price-val i { font-family:"Heebo","Assistant",Arial,sans-serif; font-size:1.3rem; margin:0 3px 0 0; }
html[dir="ltr"] .pr-cat-head, html[dir="ltr"] .pr-cat-head > div, html[dir="ltr"] .pr-row-main { text-align:left; direction:ltr; } @media (max-width:700px) { html[dir="ltr"] .pr-price { justify-content:flex-start; direction:ltr; } }