/* =============================================
   STYLES.CSS — RAY Digital
   Shared across all pages
   ============================================= */

/* ---------- THEMES ---------- */
:root {
  --bg-primary:    #071a17;
  --bg-surface:    #0d2620;
  --bg-card:       #112e27;
  --bg-card2:      #173d34;
  --text-primary:  #e0f7f4;
  --text-secondary:#7abfb8;
  --text-muted:    #3d7a72;
  --accent:        #2dd4bf;
  --accent-dim:    rgba(45,212,191,0.12);
  --accent-glow:   rgba(45,212,191,0.25);
  --border:        #1a3f38;
  --border-hover:  rgba(45,212,191,0.40);
  --nav-bg:        rgba(7,26,23,0.92);
  --shadow:        none;
  --btn-text:      #071a17;
}

[data-theme="light"] {
  --bg-primary:    #f0faf8;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-card2:      #dff5f1;
  --text-primary:  #0a2e28;
  --text-secondary:#2d6a62;
  --text-muted:    #5a9e94;
  --accent:        #0d9488;
  --accent-dim:    rgba(13,148,136,0.10);
  --accent-glow:   rgba(13,148,136,0.20);
  --border:        rgba(0,0,0,0.07);
  --border-hover:  rgba(13,148,136,0.40);
  --nav-bg:        rgba(240,250,248,0.96);
  --shadow:        0 2px 16px rgba(0,0,0,0.06);
  --btn-text:      #ffffff;
}

/* ---------- TRANSITIONS ---------- */
*,*::before,*::after {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- THEME-AWARE COMPONENTS ---------- */
html,body { background-color:var(--bg-primary); color:var(--text-primary); }

nav,.nav,.nav.scrolled {
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}

.service-card,.blog-card,.pricing-card,
.stat-card,.process-card,.testimonial-card,
.hero-card,.form-card,.contact-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.stats-section,.stats-strip,footer,.contact-section,
.services-section,.blog-section { background:var(--bg-surface); }

.service-icon,.step-icon {
  background:var(--accent-dim);
  border:1px solid var(--accent-glow);
}
.service-icon svg { stroke:var(--accent); }
.blog-tag,.section-tag,.eyebrow { color:var(--accent); }

.result-badge {
  background:var(--accent-dim);
  color:var(--accent);
  border:1px solid var(--accent-glow);
}

.form-group input,.form-group textarea,.form-group select {
  background:var(--bg-card2);
  border:1px solid var(--border);
  color:var(--text-primary);
}
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--text-muted); }
.form-group input:focus,.form-group textarea:focus { border-color:var(--accent); outline:none; }
.form-group label { color:var(--text-secondary); }
.step-number { color:var(--accent-dim); }
.testimonial-card::before { color:var(--accent-dim); }
.hero::before { background:radial-gradient(ellipse,var(--accent-glow) 0%,transparent 70%); }
.process-grid::before {
  background:repeating-linear-gradient(
    to right,var(--border-hover) 0px,var(--border-hover) 6px,transparent 6px,transparent 14px
  );
}
.stars { color:var(--accent); }
footer { background:var(--bg-surface); border-top:1px solid var(--border); }
.footer-col a { color:var(--text-muted); }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom { color:var(--text-muted); border-top:1px solid var(--border); }

.btn-outline {
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-primary);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }

.btn-primary,.form-submit,.booking-btn {
  background:linear-gradient(135deg,#2dd4bf,#22d3ee);
  color:var(--btn-text);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .form-submit,
[data-theme="light"] .booking-btn {
  background:linear-gradient(135deg,#0d9488,#0891b2);
  color:#ffffff;
}

/* ---------- LOADER ---------- */
#loader {
  position:fixed;
  inset:0;
  background:var(--bg-primary);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:1rem;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hide { opacity:0; visibility:hidden; pointer-events:none; }

.loader-logo {
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:2rem;
  color:var(--text-primary);
  display:flex;
  overflow:hidden;
}
.loader-logo span {
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  animation:letterUp 0.4s forwards;
}
.loader-logo .accent { color:var(--accent); }

.loader-bar {
  width:120px;
  height:2px;
  background:var(--border);
  border-radius:2px;
  overflow:hidden;
}
.loader-bar::after {
  content:'';
  display:block;
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:2px;
  animation:barFill 1.2s ease forwards;
}

@keyframes letterUp {
  to { opacity:1; transform:translateY(0); }
}
@keyframes barFill {
  to { width:100%; }
}

/* ---------- PARTICLES ---------- */
#particles-canvas {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  opacity:0.45;
}
body > *:not(#particles-canvas):not(#loader) {
  position:relative;
  z-index:1;
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg-primary); color:var(--text-primary); font-family:'DM Sans',sans-serif; }
h1,h2,h3,h4{ font-family:'Syne',sans-serif; margin:0 0 1rem; line-height:1.1; }
p{ color:var(--text-secondary); margin:.25rem 0 1rem; }
.container{ width:min(1200px,92%); margin:0 auto; }
.section{ padding:6rem 0; }
.pill{ color:var(--accent); letter-spacing:.14em; text-transform:uppercase; font-size:.75rem; font-weight:500; }
.section-tag{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); font-weight:500; text-align:center; margin-bottom:0.8rem; display:block; }
.section-sub{ text-align:center; color:var(--text-secondary); margin-bottom:1.2rem; }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-block; border-radius:10px; padding:.85rem 1.25rem; font-weight:500; text-decoration:none; transition:.25s ease; border:1px solid transparent; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-outline{ border-color:var(--border-hover); color:var(--text-primary); }
.btn-outline:hover{ border-color:var(--accent); transform:translateY(-2px); }

/* ---------- CARD ---------- */
.card{ background:var(--bg-card); border:1px solid var(--border); border-radius:12px; transition:.25s ease; }
.card:hover{ transform:translateY(-4px); border-color:var(--border-hover); }

/* ---------- NAV ---------- */
.nav{ position:fixed; top:0; width:100%; z-index:50; border-bottom:1px solid transparent; transition:.25s ease; }
.nav.scrolled{ background:var(--nav-bg); backdrop-filter:blur(16px); border-color:var(--border); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; position:relative; }
.logo{ color:var(--text-primary); text-decoration:none; font-family:'Syne',sans-serif; font-weight:800; }
.logo:before{ content:'" '; color:var(--accent); }
.nav-links{ display:flex; gap:1rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a{ color:var(--text-secondary); text-decoration:none; transition:.25s ease; }
.nav-links a:hover{ color:var(--text-primary); }
.nav-controls{ display:flex; align-items:center; gap:1rem; }

.theme-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-secondary);
  width:36px; height:36px;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.2s, color 0.2s, transform 0.2s;
  flex-shrink:0;
}
.theme-btn:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(20deg); }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span{ display:block; width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:all .25s; }

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:8rem 0 5rem;
  background:radial-gradient(circle at 85% 8%,rgba(45,212,191,.08),transparent 36%);
}
.hero-grid{ display:grid; grid-template-columns:1fr 380px; gap:4rem; align-items:center; width:100%; }
.hero h1{ font-size:clamp(2rem,5vw,3.8rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.hero-card{ max-width:380px; }
.ray-card{ padding:1.4rem; }
.ray-card p{ margin:.45rem 0; }
.discover-link{ color:var(--accent); text-decoration:none; font-weight:500; }
.trust-inline{ margin-top:1rem; color:var(--text-secondary); font-size:0.9rem; }
.trust{ color:var(--text-secondary); margin-top:1rem; font-size:0.9rem; }

/* ---------- STATS ---------- */
.stats-strip{ background:var(--bg-surface); padding:4rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:2.5rem 1.5rem; text-align:center; transition:border-color .25s, transform .25s; }
.stat-card:hover{ border-color:var(--border-hover); transform:translateY(-3px); }
.stat-number{ font-family:'Syne',sans-serif; font-size:64px; font-weight:800; line-height:1; color:var(--text-primary); margin-bottom:0.5rem; }
.stat-number span{ color:var(--accent); }
.stat-label{ font-size:0.88rem; color:var(--text-secondary); font-weight:300; text-align:center; }

/* ---------- SERVICES ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.service{ padding:1.15rem; }
.service svg{ color:var(--accent); }
.learn{ color:var(--accent); text-decoration:none; font-weight:500; }
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }

/* ---------- DEEP SERVICES (services page) ---------- */
.deep-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.deep{ padding:1.2rem; }
.deep ul{ padding-left:1.1rem; color:var(--text-secondary); }
.price{ color:var(--accent); font-weight:700; }

/* ---------- PROCESS ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; }
.process-grid::before{ content:''; position:absolute; top:3.5rem; left:15%; right:15%; height:1px; background:repeating-linear-gradient(to right,rgba(45,212,191,0.4) 0px,rgba(45,212,191,0.4) 6px,transparent 6px,transparent 14px); z-index:0; }
.process-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:2rem 1.5rem; position:relative; z-index:1; transition:border-color .25s, transform .25s; }
.process-card:hover{ border-color:var(--border-hover); transform:translateY(-4px); }
.step-number{ font-family:'Syne',sans-serif; font-size:3rem; font-weight:800; color:rgba(45,212,191,0.2); line-height:1; margin-bottom:1rem; display:block; }
.step-title{ font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text-primary); margin-bottom:0.6rem; }
.step-desc{ font-size:0.88rem; color:var(--text-secondary); line-height:1.65; font-weight:300; }

/* ---------- TESTIMONIALS ---------- */
.test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.testimonial-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.8rem; position:relative; transition:border-color .25s, transform .25s; }
.testimonial-card:hover{ border-color:var(--border-hover); transform:translateY(-3px); }
.testimonial-card::before{ content:'\201C'; font-family:'Syne',sans-serif; font-size:5rem; color:rgba(45,212,191,0.18); position:absolute; top:-0.5rem; left:1.2rem; line-height:1; pointer-events:none; }
.testimonial-quote{ font-size:0.97rem; color:var(--text-secondary); line-height:1.75; font-weight:300; font-style:italic; margin-bottom:1.2rem; padding-top:1.5rem; }
.testimonial-name{ font-family:'Syne',sans-serif; font-size:0.92rem; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.testimonial-role{ font-size:0.82rem; color:var(--text-secondary); margin-bottom:0.8rem; }
.stars{ color:var(--accent); font-size:0.85rem; letter-spacing:2px; margin-bottom:0.5rem; }
.result-badge{ display:inline-block; background:rgba(45,212,191,0.1); color:var(--accent); border:1px solid var(--accent-glow); font-size:0.78rem; font-weight:500; padding:3px 10px; border-radius:4px; }

/* ---------- BLOG ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.blog-row2{ display:grid; grid-template-columns:1fr; }
.blog-header{ text-align:center; }
.post{ padding:1.1rem; }
.mini{ color:var(--text-secondary); font-size:.95rem; }

/* blog page specific */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.meta{ font-size:.9rem; color:var(--text-muted); }
.pagination{ text-align:center; margin-top:1.1rem; }

/* ---------- CONTACT STRIP ---------- */
.contact-strip{ padding:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-strip form{ display:grid; gap:.65rem; }
.contact-inner{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ---------- FORM INPUTS ---------- */
input,textarea,select{ width:100%; border-radius:10px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); padding:.72rem .85rem; font-family:'DM Sans',sans-serif; }
input:focus,textarea:focus,select:focus{ border-color:var(--accent); outline:none; }
.success{ color:var(--accent); font-size:.9rem; display:none; }

/* ---------- MISC SECTIONS ---------- */
.dual-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.metric{ padding:1.5rem; text-align:center; }
.bottom-cta{ text-align:center; }
.cta-bottom{ text-align:center; }

/* ---------- PRICING ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pricing-card{ padding:1.2rem; position:relative; }
.pricing-card.popular{ border:2px solid rgba(45,212,191,0.5); transform:scale(1.02); }
.popular-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--btn-text); font-size:0.7rem; font-weight:700; padding:3px 12px; border-radius:20px; letter-spacing:.1em; }
.pricing-price{ font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800; color:var(--text-primary); margin:0.5rem 0 0; }
.pricing-period{ font-size:0.82rem; color:var(--text-muted); margin-bottom:1rem; }
.pricing-features{ padding-left:1.1rem; color:var(--text-secondary); }
.tag{ font-size:0.82rem; color:var(--text-secondary); }
.pkg{ padding:1.4rem; }
table{ width:100%; border-collapse:collapse; border:1px solid var(--border); overflow:hidden; border-radius:12px; }
th,td{ padding:.8rem; border-bottom:1px solid var(--border); text-align:left; }
th{ background:var(--bg-surface); }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Pricing FAQ */
.faq{ max-width:900px; margin:auto; }
.faq-item{ border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:.75rem; background:var(--bg-card); }
.faq-btn{ width:100%; background:none; border:0; color:var(--text-primary); text-align:left; padding:1rem; font:500 1rem 'DM Sans',sans-serif; cursor:pointer; }
.faq-content{ display:none; padding:0 1rem 1rem; }

/* ---------- ABOUT ---------- */
.about-hero-grid{ display:grid; grid-template-columns:1fr 380px; gap:4rem; align-items:center; }
.vision-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid-4{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.box{ padding:1.2rem; }

/* ---------- CONSULTATION ---------- */
.consultation-hero{ min-height:100vh; display:flex; align-items:center; padding:8rem 0; background:radial-gradient(circle at 85% 8%,rgba(45,212,191,.08),transparent 36%); }
.consultation-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:center; width:100%; }
.form-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2rem; }
.form-card label{ display:block; font-size:0.85rem; color:var(--text-secondary); margin-bottom:0.4rem; }
.form-card input,.form-card select,.form-card textarea{ margin-bottom:1rem; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--border); margin-top:4rem; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:1rem; padding:2.2rem 0; }
footer a{ color:var(--text-secondary); text-decoration:none; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
footer h3{ font-size:0.95rem; margin-bottom:0.75rem; }
.copyright{ border-top:1px solid var(--border); padding:1rem 0; color:var(--text-muted); text-align:center; font-size:0.85rem; }

.social-links{ display:flex; gap:0.75rem; margin-top:0.75rem; flex-wrap:wrap; }
.social-links a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:8px;
  border:1px solid var(--border);
  color:var(--text-muted);
  text-decoration:none;
  transition:border-color 0.2s, color 0.2s, transform 0.2s;
}
.social-links a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ---------- SERVICES DEEP GRID ---------- */
.services-deep-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }

/* =============================================
   TABLET — 768px
   ============================================= */
@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  .hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 74px;
    left: 0; right: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    z-index: 200;
  }
  .nav-links.open { display: flex; }
  nav { padding: 1rem; }
  .nav-links li:nth-child(2),   /* Services */
  .nav-links li:nth-child(6) {  /* Consultation */
    display: none;
  }
  .nav-links li a { display: block; padding: 0.85rem 2rem; font-size: 1rem; border-bottom: 1px solid var(--border); }

  .hero,
  .consultation-hero { padding: 7rem 0 3rem; align-items: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-card { max-width: 100%; }
  h1 { font-size: 2.2rem; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .services-deep-grid { grid-template-columns: 1fr; }
  .deep-grid { grid-template-columns: 1fr; }

  .process-grid { grid-template-columns: 1fr; }
  .process-grid::before { display: none; }

  .stats-strip { padding: 3rem 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 48px; }

  .test-grid { grid-template-columns: 1fr; }

  .blog-grid { grid-template-columns: 1fr; }
  .blog-row2 { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }

  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.popular { transform: scale(1); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-strip { grid-template-columns: 1fr; gap: 2rem; }
  .dual-stats { grid-template-columns: 1fr 1fr; }

  .consultation-grid { grid-template-columns: 1fr; gap: 2rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .vision-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }

  section { padding: 4rem 0; }
}

/* =============================================
   MOBILE — 480px
   ============================================= */
@media (max-width: 480px) {
  nav { padding: 1rem; }
  .nav-links li:nth-child(2),   /* Services */
  .nav-links li:nth-child(6) {  /* Consultation */
    display: none;
  }
  .nav-links li a {
    padding: 0.35rem 2rem;
  }
  .logo { font-size: 1rem; }

  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }

  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn-primary, .btn-outline { width: 100%; text-align: center; }

  .services-grid { grid-template-columns: 1fr; }
  .service-grid { display: none; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .stats-strip { padding: 2.5rem 0; overflow: hidden; }
  .stat-card { padding: 1.5rem 1rem; text-align: center; }
  .stat-number { font-size: 30px; }

  .test-grid { grid-template-columns: 1fr 1fr; }
  .testimonial-card:last-child { display: none; }

  .contact-strip { grid-template-columns: 1fr; gap: 1.5rem; }

  .dual-stats { grid-template-columns: 1fr; }

  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}