/* ============================================================
   Myth Digital — Professional Polish & Animation Layer
   Injected into every page after the original styles.
   ============================================================ */

:root {
  --md-accent: #FFA07A;
  --md-highlight: #81d4fa;
  --md-ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: 'Inter','Roboto',system-ui,-apple-system,sans-serif;
}

/* Subtle animated gradient accent on hero areas */
.hero, .hero-section, .hero-title {
  letter-spacing: -0.01em;
}

/* Better images */
img { image-rendering: -webkit-optimize-contrast; }

/* Smooth focus ring */
a:focus-visible, button:focus-visible, .cta-button:focus-visible {
  outline: 2px solid var(--md-highlight);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Refined header shadow and blur */
.header {
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background-color: rgba(18,18,18,0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
  transition: background-color .35s var(--md-ease), padding .35s var(--md-ease);
}
.light-mode .header {
  background-color: rgba(255,255,255,0.78) !important;
  border-bottom-color: rgba(0,0,0,0.06);
}
.header.md-scrolled { padding: 0.7rem 2rem; }

/* Nav link underline animation */
.nav-menu a {
  position: relative;
  padding-bottom: 4px;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--md-accent), var(--md-highlight));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--md-ease);
  border-radius: 2px;
}
.nav-menu a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Elevate primary CTA */
.get-started-btn, .cta-button, .btn, .announcement-button {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--md-ease), box-shadow .3s var(--md-ease), background-color .3s var(--md-ease) !important;
}
.get-started-btn:hover, .cta-button:hover, .btn:hover, .announcement-button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 30px rgba(255,160,122,0.35) !important;
}
.get-started-btn::before, .cta-button::before, .btn::before, .announcement-button::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .7s var(--md-ease);
  pointer-events: none;
}
.get-started-btn:hover::before, .cta-button:hover::before, .btn:hover::before, .announcement-button:hover::before {
  transform: translateX(100%);
}

/* Card hover polish — apply broadly */
.tip, .card, .service-card, .service, .work-card, .post, .feature, .price-card {
  transition: transform .45s var(--md-ease), box-shadow .45s var(--md-ease), border-color .45s var(--md-ease) !important;
  will-change: transform;
}
.tip:hover, .card:hover, .service-card:hover, .service:hover,
.work-card:hover, .post:hover, .feature:hover, .price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(0,0,0,0.28) !important;
}

/* Image hover zoom inside cards */
.tip img, .card img, .service-card img, .work-card img, .post img, .featured-image {
  transition: transform .8s var(--md-ease), filter .5s var(--md-ease);
}
.tip:hover img, .card:hover img, .service-card:hover img,
.work-card:hover img, .post:hover img, .image-container:hover .featured-image {
  transform: scale(1.05);
  filter: saturate(1.1);
}

/* Featured image frame */
.featured-image {
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.image-container { overflow: hidden; border-radius: 22px; }

/* Section headings — refined weight */
h1, h2, h3 { letter-spacing: -0.015em; }

/* Reveal-on-scroll (added via JS) */
.md-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--md-ease), transform .8s var(--md-ease);
  will-change: opacity, transform;
}
.md-reveal.md-visible { opacity: 1; transform: none; }

/* Staggered children */
.md-reveal.md-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--md-ease), transform .7s var(--md-ease);
}
.md-reveal.md-visible.md-stagger > *:nth-child(1) { transition-delay: .05s; opacity: 1; transform: none; }
.md-reveal.md-visible.md-stagger > *:nth-child(2) { transition-delay: .15s; opacity: 1; transform: none; }
.md-reveal.md-visible.md-stagger > *:nth-child(3) { transition-delay: .25s; opacity: 1; transform: none; }
.md-reveal.md-visible.md-stagger > *:nth-child(4) { transition-delay: .35s; opacity: 1; transform: none; }
.md-reveal.md-visible.md-stagger > *:nth-child(5) { transition-delay: .45s; opacity: 1; transform: none; }
.md-reveal.md-visible.md-stagger > *:nth-child(6) { transition-delay: .55s; opacity: 1; transform: none; }

/* Floating shimmer for holiday section */
.christmas-strategy-section {
  position: relative;
  overflow: hidden;
}
.christmas-strategy-section::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(600px circle at 20% 20%, rgba(255,215,0,0.10), transparent 60%),
              radial-gradient(500px circle at 80% 80%, rgba(129,212,250,0.10), transparent 60%);
  animation: mdFloat 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mdFloat {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(3%, -3%) rotate(6deg); }
}

/* Announcement bar shine */
.announcement-text { position: relative; }

/* Page fade-in */
@keyframes mdPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
main, .hero, .hero-section, section:first-of-type {
  animation: mdPageIn .6s var(--md-ease) both;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--md-accent), var(--md-highlight));
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* Selection */
::selection { background: var(--md-accent); color: #111; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   HOME-THEME UNIFICATION — apply index.html palette site-wide
   ============================================================ */
:root, .light-mode {
  --bg-color:#05070b;
  --text-color:#e6edf7;
  --button-color:#FFA07A;
  --highlight-color:#FFA07A;
  --md-bg:#05070b;
  --md-bg-2:#0b0f16;
  --md-panel:#0f1520;
  --md-panel-2:#131b28;
  --md-line:rgba(255,255,255,.08);
  --md-line-2:rgba(255,255,255,.14);
  --md-text:#e6edf7;
  --md-muted:#8b98ad;
  --md-dim:#5f6b7f;
  --md-accent:#FFA07A;
  --md-accent-2:#ffd27a;
  --md-accent-3:#ff6a3d;
}

html, body {
  background:#05070b !important;
  color:#e6edf7 !important;
  font-family:'Inter','Roboto',system-ui,-apple-system,sans-serif !important;
}

/* Kill legacy light-mode toggle so themes stay consistent */
.side-mode-toggle { display:none !important; }

/* Headings */
body h1, body h2, body h3, body h4 {
  color:#fff;
  font-family:'Inter',sans-serif;
  letter-spacing:-.02em;
  line-height:1.15;
}
body h1 { font-weight:900; }
body h2 { font-weight:800; }
body p, body li, body span:not([class]) { color:#b6c1d3; }

/* Links */
body a { color:var(--md-accent); }
body a:hover { color:var(--md-accent-2); }

/* Header / Nav */
.header {
  background:rgba(5,7,11,.85) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--md-line);
  color:#e6edf7 !important;
}
.header .logo, .header .logo a { color:#fff !important; }
.nav-menu a, .header a { color:#cfd8e7 !important; }
.nav-menu a:hover { color:var(--md-accent) !important; }
.get-started, .get-started-btn, .cta-button, .cta-btn, .download-button {
  background:linear-gradient(135deg,var(--md-accent),var(--md-accent-2)) !important;
  color:#04121a !important;
  border:none !important;
  border-radius:12px !important;
  font-weight:700 !important;
  padding:.75rem 1.3rem !important;
  box-shadow:0 12px 28px rgba(255,160,122,.28) !important;
  transition:transform .3s, box-shadow .3s !important;
}
.get-started:hover, .get-started-btn:hover, .cta-button:hover, .cta-btn:hover, .download-button:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 18px 36px rgba(255,160,122,.4) !important;
}

/* Generic buttons */
.btn-outline, .btn-ghost {
  background:rgba(255,255,255,.02) !important;
  color:#e6edf7 !important;
  border:1px solid var(--md-line-2) !important;
  border-radius:12px !important;
}
.btn-outline:hover, .btn-ghost:hover { background:rgba(255,255,255,.06) !important; }

/* Hero sections on secondary pages */
.about-hero, .blog-hero, .blog-header, .breadcrumb-section,
.hero-section, .cta-section, .cta-panel {
  background:linear-gradient(180deg,#0b0f16,#05070b) !important;
  color:#fff !important;
  border-bottom:1px solid var(--md-line);
  position:relative;
  overflow:hidden;
}
.about-hero::before, .blog-hero::before, .hero-section::before {
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(600px circle at 20% 20%,rgba(255,160,122,.18),transparent 60%),
             radial-gradient(500px circle at 85% 30%,rgba(255,106,61,.14),transparent 60%);
  pointer-events:none;
}
.about-hero *, .blog-hero *, .hero-section * { position:relative; }
.hero-subtitle { color:#b6c1d3 !important; }

/* Cards / panels used across pages */
.card, .feature, .value, .team-member, .mission, .vision,
.blog-post, .case-card, .featured-work-section, .featured-work-container > *,
.founder-card, .mini, .badge, .cad, .svc, .tool, .comment, .author-bio,
.faq, .comment-form, .service-card, .pricing-card, .plan, .price-card,
.blog-content-container, .intro-section {
  background:var(--md-panel) !important;
  color:#e6edf7 !important;
  border:1px solid var(--md-line) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
.card:hover, .feature:hover, .value:hover, .team-member:hover,
.blog-post:hover, .case-card:hover, .service-card:hover, .pricing-card:hover {
  border-color:rgba(255,160,122,.35) !important;
  transform:translateY(-4px);
  transition:transform .35s var(--md-ease), border-color .35s;
}

/* Section backgrounds */
section, .about-page, .blog-page, .blog-preview-page, .privacy-page {
  background:#05070b !important;
  color:#e6edf7 !important;
}

/* Footer */
.footer {
  background:#0b0f16 !important;
  color:#8b98ad !important;
  border-top:1px solid var(--md-line);
  padding:40px 22px !important;
}
.footer a { color:#cfd8e7 !important; }
.footer a:hover { color:var(--md-accent) !important; }
.social-icons a { color:#cfd8e7 !important; }

/* Forms */
input, textarea, select {
  background:var(--md-panel-2) !important;
  color:#e6edf7 !important;
  border:1px solid var(--md-line) !important;
  border-radius:10px !important;
  padding:.7rem .9rem !important;
}
input:focus, textarea:focus, select:focus {
  outline:none !important;
  border-color:var(--md-accent) !important;
  box-shadow:0 0 0 3px rgba(255,160,122,.18) !important;
}

/* Images inside cards */
.team-member img, .blog-post img, .case-card img, .featured-work-container img {
  border-radius:12px;
}

/* Eyebrow / pills */
.breadcrumb, .case-pill, .featured {
  color:var(--md-accent) !important;
}

/* About page — team banner + dedication letter */
.team-banner{
  max-width:1180px;margin:32px auto 0;padding:0 22px;
}
.team-banner img{
  width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid var(--md-line-2);
  box-shadow:0 30px 80px rgba(255,106,61,.18), 0 0 0 1px rgba(255,160,122,.15);
  object-fit:cover;aspect-ratio:5/2;
}
.team-banner figcaption{
  text-align:center;color:#8b98ad;font-size:.85rem;margin-top:14px;
  letter-spacing:.02em;
}
.dedication{
  max-width:820px;margin:80px auto;padding:48px 44px;
  background:linear-gradient(180deg,#0f1520,#0b0f16);
  border:1px solid var(--md-line);border-radius:22px;
  text-align:left;line-height:1.75;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  position:relative;overflow:hidden;
}
.dedication::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--md-accent),var(--md-accent-2),var(--md-accent-3));
}
.dedication-eyebrow{
  display:inline-block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--md-accent);padding:.4rem .8rem;border:1px solid rgba(255,160,122,.28);
  border-radius:999px;background:rgba(255,160,122,.06);margin-bottom:20px;
}
.dedication h2{
  color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;
  letter-spacing:-.02em;margin-bottom:20px;line-height:1.2;
}
.dedication p{
  color:#c8d1e3;font-size:1.02rem;margin:0 0 1.1rem;
}
.dedication p strong{color:#fff;font-weight:700;}
.dedication .dedication-lead{
  font-size:1.15rem;color:#e6edf7;font-style:italic;
  padding-bottom:18px;border-bottom:1px solid var(--md-line);margin-bottom:24px;
}
.dedication .dedication-sign{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--md-line);
  color:#b6c1d3;font-size:.98rem;
}
.dedication .dedication-sign strong{color:var(--md-accent);font-size:1.05rem;}
@media(max-width:640px){
  .dedication{padding:32px 22px;margin:48px 16px;}
}

/* ============================================================
   Extended reveal variants — every section animates distinctly
   ============================================================ */
.md-reveal.md-up      { opacity: 0; transform: translateY(40px); }
.md-reveal.md-left    { opacity: 0; transform: translateX(-50px); }
.md-reveal.md-right   { opacity: 0; transform: translateX(50px); }
.md-reveal.md-zoom    { opacity: 0; transform: scale(.94); }
.md-reveal            { transition: opacity .9s var(--md-ease), transform .9s var(--md-ease); }
.md-reveal.md-visible { opacity: 1 !important; transform: none !important; }

/* Floating idle animation for hero portrait & badges */
@keyframes mdFloatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.founder-portrait, .hero img.portrait, .orbit-frame img {
  animation: mdFloatY 6s ease-in-out infinite;
}

/* Gradient sheen on section headings */
@keyframes mdSheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
section h2 {
  background: linear-gradient(90deg,#fff 0%,#fff 40%,var(--md-accent) 55%,#fff 70%,#fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mdSheen 8s linear infinite;
}

/* Card lift emphasized */
.md-reveal.md-visible .tool,
.md-reveal.md-visible .card,
.md-reveal.md-visible .service-card {
  animation: mdCardIn .8s var(--md-ease) both;
}
@keyframes mdCardIn {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Pulse glow on primary CTAs when visible */
.md-reveal.md-visible .cta-button,
.md-reveal.md-visible .get-started-btn {
  animation: mdPulse 2.6s ease-in-out infinite;
}
@keyframes mdPulse {
  0%,100% { box-shadow: 0 12px 28px rgba(255,160,122,.28); }
  50%     { box-shadow: 0 18px 40px rgba(255,160,122,.5); }
}

/* Comparison table row-by-row reveal + glow */
.compare .crow.md-reveal { opacity: 0; transform: translateX(-24px); transition: opacity .7s var(--md-ease), transform .7s var(--md-ease), background .4s ease; }
.compare .crow.md-reveal.md-visible { opacity: 1; transform: none; }
.compare .crow:not(.head):hover { background: rgba(255,160,122,.06); }
.compare .crow .yes { position: relative; overflow: hidden; }
.compare .crow.md-visible .yes::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,160,122,.35) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: mdSweep 1.4s var(--md-ease) .3s 1 forwards;
}
@keyframes mdSweep { to { transform: translateX(120%); } }

/* ============================================================
   MOBILE RESPONSIVE FIXES (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  body { padding-top: 64px; overflow-x: hidden; }
  html { overflow-x: hidden; }

  /* Header — grid layout so button never gets clipped */
  .header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    padding: .5rem .7rem !important;
    gap: .5rem !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .header .logo { display: flex !important; justify-content: center !important; width: auto !important; position: static !important; }
  .header .logo-image, .header .logo img { width: 36px !important; height: auto !important; }
  .menu-toggle { font-size: 1.35rem !important; padding: 0 !important; display: block !important; }

  /* Shrink Get Started button so it always fits */
  .get-started, .get-started-btn, .header .cta-button, .header .cta-btn {
    padding: .4rem .65rem !important;
    font-size: .7rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    box-shadow: 0 6px 16px rgba(255,160,122,.28) !important;
    flex-shrink: 0 !important;
    justify-self: end !important;
  }


  /* Announcement bar */
  .announcement, .announcement-bar, .announcement-text {
    font-size: .8rem !important;
    padding: .5rem .8rem !important;
    line-height: 1.35;
    text-align: center;
  }

  /* Hero */
  .hero { padding: 32px 16px 56px !important; }
  .hero > .container, .hero .hero-grid { padding-left: 0 !important; padding-right: 0 !important; }
  .container, .wrap, .inner { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  .hero-grid { gap: 32px !important; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
  .hero-sub { font-size: 1rem !important; }
  .hero-visual { min-height: 340px !important; }
  .hero-portrait { width: 74% !important; }
  .hero-chip { font-size: .68rem !important; padding: .4rem .65rem !important; }
  .hero-chip.c1 { left: 0 !important; }
  .hero-chip.c2 { right: 0 !important; }
  .hero-ctas .cta-button, .hero-ctas .btn { width: 100%; text-align: center; }

  /* Section spacing */
  section { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  h3 { font-size: 1.15rem !important; }

  /* Grids collapse to single column */
  .stats, .stats-grid, .metrics, .why-grid, .services-grid,
  .service-grid, .features, .feature-grid, .cards, .card-grid,
  .pricing, .pricing-grid, .plans, .team-grid, .values-grid,
  .footer-grid, .footer-columns, .process, .timeline,
  .video-gallery, .videos, .compare {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* 2-up on mobile for compact tool/tile grids to avoid endless scroll */
  .tools-grid, #stackGrid, .stack-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Keep stats 2-up if tight */
  .hero-stats, .metrics-inline { grid-template-columns: 1fr 1fr !important; }

  /* Compact stack tool cards */
  .tool { padding: .85rem !important; }
  .tool h4, .tool .tool-name, .tool .name { font-size: .9rem !important; }
  .tool .tool-ico, .tool-ico { width: 34px !important; height: 34px !important; }
  .tool .tool-tag, .tool-tag { font-size: .5rem !important; padding: .2rem .35rem !important; letter-spacing: .1em !important; }
  .tool .role, .tool p { font-size: .78rem !important; }

  /* Cards padding */
  .card, .feature, .service-card, .price-card, .plan,
  .team-member, .value, .founder-card, .dedication {
    padding: 22px 18px !important;
  }


  /* Comparison table stack */
  .compare .crow { grid-template-columns: 1fr !important; padding: 12px !important; gap: 6px !important; }
  .compare .crow.head { display: none !important; }

  /* Footer */
  .footer { padding: 32px 18px !important; text-align: center; }
  .footer .social-icons { justify-content: center; }

  /* Breadcrumbs */
  .breadcrumb, .breadcrumb-section { font-size: .85rem; padding: 12px 16px !important; }

  /* Nav menu when open */
  .nav-menu.menu-open {
    background: rgba(5,7,11,.98) !important;
    backdrop-filter: blur(16px);
    padding: 1.2rem 0 !important;
    border-bottom: 1px solid var(--md-line);
  }
  .nav-menu a { font-size: 1.05rem; padding: .5rem 0; }

  /* Video gallery */
  .video-gallery video, .videos video, .video-card video { width: 100% !important; height: auto !important; }

  /* Team banner */
  .team-banner img { aspect-ratio: 16/10; }

  /* Images fluid */
  img, video { max-width: 100%; height: auto; }

  /* Tables scroll */
  table { display: block; overflow-x: auto; }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .header { padding: .5rem .6rem !important; }
  .get-started, .get-started-btn { padding: .45rem .65rem !important; font-size: .72rem !important; }
  .header .logo-image { width: 34px !important; }
}