/* ============================================
   DigiHub - Complete Design System
   Sections: 1.Reset & Props | 2.Typography | 3.Layout | 4.Nav | 5.Buttons & Forms | 6.Sections | 7.Animations | 8.Responsive | 9.Accessibility
   ============================================ */

/* ---------- 1. RESET + CUSTOM PROPERTIES ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none;outline:none}
button{cursor:pointer}
html{scroll-behavior:smooth}

:root{
  --bg-base:#ffffff;
  --bg-surface:#f0f5ff;
  --bg-card:#ffffff;
  --text-primary:#0a0f1e;
  --text-secondary:#4a5568;
  --text-muted:#8899aa;
  --accent:#004aad;
  --accent-alt:#38b6ff;
  --border:rgba(0,74,173,0.12);
  --shadow:0 4px 32px rgba(0,74,173,0.08);
  --shadow-hover:0 12px 48px rgba(0,74,173,0.16);

  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --text-2xl:1.5rem;
  --text-3xl:2rem;
  --text-4xl:2.75rem;
  --text-5xl:3.75rem;

  --radius:16px;
  --radius-sm:10px;
  --container:1200px;
  --pad-h:clamp(24px,5vw,80px);
  --section-py:clamp(64px,8vw,96px);
  --font-display:'Outfit',sans-serif;
  --font-body:'Inter',sans-serif;
}

[data-theme="dark"]{
  --bg-base:#070c18;
  --bg-surface:#0c1524;
  --bg-card:#101e35;
  --text-primary:#eef2ff;
  --text-secondary:#8899bb;
  --text-muted:#3d5070;
  --accent:#38b6ff;
  --accent-alt:#004aad;
  --border:rgba(56,182,255,0.1);
  --shadow:0 4px 32px rgba(56,182,255,0.06);
  --shadow-hover:0 12px 48px rgba(56,182,255,0.14);
}

/* ---------- 2. TYPOGRAPHY ---------- */
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--text-primary);
  background:var(--bg-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.15;font-weight:700;letter-spacing:-0.01em}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
@media(min-width:768px){
  h1{font-size:var(--text-4xl)}
  h2{font-size:var(--text-3xl)}
}
@media(min-width:1280px){
  h1{font-size:var(--text-5xl)}
  h2{font-size:var(--text-4xl)}
}

/* ---------- 3. LAYOUT UTILITIES ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-h)}
.section{padding:var(--section-py) 0}
.surface{background:var(--bg-surface)}
.section-heading{text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.section-heading h2{margin-bottom:10px}
.section-heading p{color:var(--text-secondary);font-size:var(--text-lg);max-width:600px;margin:0 auto}
.eyebrow{font-size:var(--text-xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:16px;display:inline-block}


/* ---------- 4. NAVIGATION ---------- */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:14px var(--pad-h);
  display:flex;align-items:center;justify-content:space-between;
  transition:background 0.3s,backdrop-filter 0.3s,border 0.3s;
  background:transparent;
}
#navbar.scrolled{background:rgba(255,255,255,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
[data-theme="dark"] #navbar.scrolled{background:rgba(7,12,24,0.88)}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:42px;width:auto;padding-top:8px}
@media(min-width:1280px){.nav-logo img{height:54px;padding-top:10px}}
.nav-center{display:none;gap:32px}
.nav-center a{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);position:relative;padding:4px 0;transition:color 0.2s}
.nav-center a::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease}
.nav-center a:hover{color:var(--accent)}
.nav-center a:hover::after{transform:scaleX(1)}
.nav-center a.active{color:var(--accent)}
.nav-center a.active::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:12px}
@media(max-width:767px){.nav-right>.cta-btn{display:none}}
.lang-pill{display:flex;border:1px solid var(--border);border-radius:100px;overflow:hidden;font-size:var(--text-xs);font-weight:600}
.lang-pill button{padding:4px 10px;transition:background 0.2s,color 0.2s;color:var(--text-muted)}
.lang-pill button.active{background:var(--accent);color:#fff}
.theme-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s;color:var(--text-secondary)}
.theme-btn:hover{background:var(--border)}
.theme-btn svg{width:18px;height:18px}
.cta-btn,.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:100px;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);transition:transform 0.2s,box-shadow 0.2s;white-space:nowrap}
.cta-btn,.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.cta-btn:hover,.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}

/* Mobile menu */
.hamburger{display:flex;flex-direction:column;gap:4px;padding:4px;background:none;border:none;cursor:pointer;z-index:1101}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform 0.3s,opacity 0.3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1099;opacity:0;pointer-events:none;transition:opacity 0.3s}
.mobile-overlay.open{opacity:1;pointer-events:all}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:300px;background:var(--bg-base);z-index:1100;padding:100px 32px 32px;transform:translateX(100%);transition:transform 0.3s;display:flex;flex-direction:column;visibility:hidden}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu a{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;color:var(--text-primary);padding:12px 0;border-bottom:1px solid var(--border);opacity:0;transform:translateX(20px);transition:opacity 0.3s,transform 0.3s}
.mobile-menu.open a{opacity:1;transform:translateX(0)}
.mobile-menu.open a:nth-child(1){transition-delay:0.06s}
.mobile-menu.open a:nth-child(2){transition-delay:0.12s}
.mobile-menu.open a:nth-child(3){transition-delay:0.18s}
.mobile-menu.open a:nth-child(4){transition-delay:0.24s}
.mobile-menu a.active{color:var(--accent)}

@media(min-width:768px){
  .hamburger{display:none}
  .nav-center{display:flex}
  .mobile-overlay,.mobile-menu{display:none}
}

/* ---------- 5. BUTTONS + FORM ELEMENTS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;border-radius:100px;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);transition:transform 0.2s ease,box-shadow 0.2s ease;position:relative;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-secondary{background:transparent;border:2px solid var(--accent);color:var(--accent)}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-white{background:#fff;color:#004aad;white-space:nowrap}
.btn-white:hover{transform:scale(1.03);box-shadow:0 8px 32px rgba(255,255,255,0.25)}

/* Form fields */
.field-group{position:relative;margin-bottom:20px}
.field-group label{position:absolute;left:16px;top:18px;font-size:var(--text-base);color:var(--text-muted);pointer-events:none;transition:transform 0.25s cubic-bezier(0.4,0,0.2,1),color 0.25s cubic-bezier(0.4,0,0.2,1),font-size 0.25s cubic-bezier(0.4,0,0.2,1);transform-origin:left top;font-weight:400;background:var(--bg-card);padding:0 4px;z-index:1}
.field-group.has-value label,.field-group.focused label{transform:translateY(-24px) scale(0.8);color:var(--accent)}
.field-group input,.field-group select,.field-group textarea{width:100%;padding:20px 16px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);font-size:var(--text-base);transition:border-color 0.2s,box-shadow 0.2s}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{border-color:var(--accent)}
.field-group input:-webkit-autofill,
.field-group input:-webkit-autofill:hover,
.field-group input:-webkit-autofill:focus,
.field-group select:-webkit-autofill,
.field-group select:-webkit-autofill:hover,
.field-group select:-webkit-autofill:focus,
.field-group textarea:-webkit-autofill,
.field-group textarea:-webkit-autofill:hover,
.field-group textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--bg-card) inset!important;-webkit-text-fill-color:var(--text-primary)!important;caret-color:var(--text-primary);border-color:var(--accent);transition:background-color 9999s ease-in-out 0s}
.field-group textarea{min-height:120px;resize:vertical}
.field-group select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238899aa' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field-group .error-msg{font-size:var(--text-xs);color:#e53e3e;margin-top:4px;display:none}
.field-group.error input,.field-group.error select,.field-group.error textarea{border-color:#e53e3e}
.field-group.error .error-msg{display:block}

/* Submit spinner */
.submit-btn{position:relative;width:100%;height:52px;border-radius:100px;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);transition:transform 0.2s,box-shadow 0.2s;display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}
.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.submit-btn:disabled{opacity:0.85;cursor:not-allowed}
.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spinnerRotate 0.6s linear infinite;display:none}
.submit-btn.sending .spinner{display:inline-block}
.submit-btn.sending .btn-text{display:none}

/* ---------- 6. SECTION-SPECIFIC STYLES ---------- */

/* --- Hero --- */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;padding-top:90px;padding-bottom:var(--section-py)}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--accent-alt) 1px,transparent 1px);background-size:32px 32px;opacity:0.18;animation:gridDrift 20s ease-in-out infinite alternate;pointer-events:none;z-index:0}
[data-theme="dark"] .hero::before{opacity:0.1}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.hero h1{font-weight:700;line-height:1.1;margin-bottom:20px;letter-spacing:-0.02em;font-size:clamp(3.75rem,10vw,5.5rem)}
[data-lang="fr"] .hero{padding-top:110px;padding-bottom:clamp(96px,12vw,140px)}
[data-lang="fr"] .hero h1{font-size:clamp(3.5rem,8vw,4.5rem)}
@media(min-width:768px){.hero h1{font-size:clamp(3rem,8vw,5rem)}[data-lang="fr"] .hero h1{font-size:clamp(3.25rem,8vw,4.75rem)}}
@media(min-width:1280px){.hero h1{font-size:clamp(3.75rem,9vw,6rem)}[data-lang="fr"] .hero h1{font-size:clamp(3.5rem,8vw,4.75rem)}}
.hero h1 .gradient-text{background:linear-gradient(90deg,#38b6ff,#004aad,#38b6ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 4s linear infinite}
.hero-sub{font-size:var(--text-lg);color:var(--text-secondary);max-width:520px;margin-bottom:32px}
.hero-btns{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:32px}
@media(min-width:768px){.hero-btns .btn:first-child{min-width:290px}}
@media(max-width:767px){.hero-btns{flex-direction:column;align-items:center}.hero-btns .btn{width:100%;text-align:center}}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:var(--text-sm);color:var(--text-secondary)}
.hero-trust span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero-trust svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
@media(max-width:767px){.trust-mobile-break{flex-basis:100%}}
.hero-visual{display:none;justify-content:center;align-items:center}
.hero-visual svg{animation:float 5s ease-in-out infinite;max-width:1050px;width:100%;height:auto}
[data-lang="fr"] .hero-visual svg{max-width:800px}

@media(min-width:768px){
  .hero-sub{font-size:var(--text-xl)}
}
@media(min-width:768px) and (max-width:1279px){
  .hero .container{grid-template-columns:1fr}
  .hero-visual{display:none}
  .hero-sub{max-width:640px}
}
@media(min-width:1280px){
  .hero .container{max-width:1600px;gap:32px;grid-template-columns:1fr 1.5fr}
  .hero-visual{display:flex}
  .hero h1{font-size:clamp(3.75rem,9vw,6rem)}
  [data-lang="fr"] .hero h1{font-size:clamp(3.5rem,8vw,4.75rem)}
  [data-lang="fr"] .hero .container{grid-template-columns:1.2fr 1.3fr;gap:8px;max-width:1600px}
}

/* CTA pulse ring */
.btn-pulse{position:relative}
.btn-pulse::after{content:'';position:absolute;inset:0;border-radius:100px;background:var(--accent);z-index:-1;animation:pulseRing 2.5s ease-in-out infinite}
@media(max-width:767px){.btn-pulse::after{animation-name:pulseRingSmall}}

/* --- Stats Bar --- */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;text-align:center}
.stat-number{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;color:var(--accent);line-height:1;letter-spacing:-0.02em}
.stat-label{font-size:var(--text-sm);color:var(--text-muted);margin-top:8px;max-width:160px;margin-left:auto;margin-right:auto}
.stat-break{max-width:125px}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}

/* --- Services Preview --- */
.services-grid{display:grid;gap:24px}
.service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:36px 28px;box-shadow:var(--shadow);transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#38b6ff,#004aad);opacity:0;transition:opacity 0.3s}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
.service-card:hover::before{opacity:1}
.service-icon{margin-bottom:20px;width:48px;height:48px;color:var(--accent);transition:transform 0.3s}
.service-card:hover .service-icon{transform:rotate(8deg) scale(1.1)}
.service-card h3{font-size:var(--text-2xl);margin-bottom:12px}
.service-card p{color:var(--text-secondary);margin-bottom:20px;font-size:var(--text-sm)}
.service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.service-tags span{padding:5px 14px;border-radius:100px;font-size:var(--text-xs);font-weight:500;background:var(--bg-surface);color:var(--accent);border:1px solid var(--border)}
.service-link{font-weight:600;color:var(--accent);font-size:var(--text-sm);transition:gap 0.2s;display:inline-flex;align-items:center;gap:4px}
.service-link:hover{gap:10px}

@media(min-width:768px){.services-grid{grid-template-columns:1fr 1fr}}

/* --- Process --- */
.process-steps{display:grid;grid-template-columns:1fr;gap:20px;position:relative;counter-reset:step}
.process-line{display:none}
@media(min-width:768px){
  .process-steps{grid-template-columns:repeat(4,1fr);gap:20px}
  .process-line{display:block;position:absolute;top:56px;left:0;right:0;height:2px;background:var(--border);z-index:0}
  .process-line-fill{height:100%;background:var(--accent);width:0;transition:width 1s cubic-bezier(0.16,1,0.3,1)}
  .process-line.revealed .process-line-fill{width:100%}
}
.step-card{text-align:center;position:relative;z-index:1;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 20px;box-shadow:var(--shadow);transition:transform 0.3s}
.step-card:hover{transform:translateY(-3px)}
.step-num{font-family:var(--font-display);font-size:4rem;font-weight:700;color:var(--accent);opacity:0.08;line-height:1;position:absolute;top:8px;right:16px;pointer-events:none}
.step-icon{width:40px;height:40px;color:var(--accent);margin:0 auto 16px}
.step-card h4{font-weight:600;font-size:var(--text-lg);margin-bottom:6px}
.step-card p{font-size:var(--text-sm);color:var(--text-secondary);max-width:200px;margin:0 auto}

/* --- Results / Social Proof --- */
.results-grid{display:grid;gap:20px}
.result-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);transition:transform 0.3s,box-shadow 0.3s}
.result-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.result-badge{display:inline-block;padding:4px 12px;border-radius:100px;font-size:var(--text-xs);font-weight:500;background:var(--bg-surface);color:var(--accent);margin-bottom:16px;border:1px solid var(--border)}
.result-metric{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;color:var(--accent);margin-bottom:10px;line-height:1;letter-spacing:-0.02em}
.result-card p{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:10px}
.result-muted{font-size:var(--text-xs);color:var(--text-muted);font-style:italic}
@media(min-width:768px){.results-grid{grid-template-columns:repeat(3,1fr)}}

/* --- Why DigiHub --- */
.why-grid{display:grid;grid-template-columns:1fr;gap:20px}
.why-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 24px;box-shadow:var(--shadow);transition:transform 0.3s,box-shadow 0.3s}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.why-icon{width:36px;height:36px;color:var(--accent);margin-bottom:16px}
.why-card h4{font-weight:600;font-size:var(--text-lg);margin-bottom:6px}
.why-card p{font-size:var(--text-sm);color:var(--text-secondary)}
@media(min-width:768px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.why-grid{grid-template-columns:repeat(3,1fr)}}

/* --- CTA Banner --- */
.cta-banner{background:linear-gradient(135deg,#004aad 0%,#1a7fd4 50%,#38b6ff 100%);padding:var(--section-py) 0;text-align:center;position:relative;overflow:hidden}
.cta-banner h2{font-size:var(--text-3xl);color:#fff;margin-bottom:16px}
.cta-banner h2{font-size:var(--text-3xl);color:#fff;margin-bottom:16px}
.cta-banner p{color:rgba(255,255,255,0.9);max-width:620px;margin:0 auto 28px;font-size:var(--text-lg)}
.cta-banner .btn{background:#fff;color:#004aad}
.cta-banner .btn:hover{transform:scale(1.03);box-shadow:0 8px 32px rgba(255,255,255,0.2)}
@media(min-width:768px){.cta-banner h2{font-size:var(--text-5xl)}.cta-banner p{max-width:800px}}

/* Particles */
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;width:8px;height:8px;background:rgba(255,255,255,0.35);border-radius:50%;animation:particleDrift 6s ease-in-out infinite;box-shadow:0 0 12px rgba(255,255,255,0.15)}
.particle:nth-child(1){left:15%;bottom:10%;animation-delay:0s;width:10px;height:10px}
.particle:nth-child(2){left:30%;bottom:20%;animation-delay:1.2s;width:6px;height:6px}
.particle:nth-child(3){left:50%;bottom:5%;animation-delay:2.4s;width:12px;height:12px}
.particle:nth-child(4){left:65%;bottom:30%;animation-delay:0.8s;width:5px;height:5px}
.particle:nth-child(5){left:80%;bottom:15%;animation-delay:3.6s;width:9px;height:9px}
.particle:nth-child(6){left:20%;bottom:40%;animation-delay:1.8s;width:7px;height:7px}
.particle:nth-child(7){left:70%;bottom:8%;animation-delay:2.0s;width:4px;height:4px}
.particle:nth-child(8){left:90%;bottom:25%;animation-delay:4.2s;width:6px;height:6px}
.particle:nth-child(9){left:40%;bottom:12%;animation-delay:1.0s;width:8px;height:8px}
.particle:nth-child(10){left:10%;bottom:35%;animation-delay:3.0s;width:5px;height:5px}

/* --- Footer --- */
.footer{background:var(--bg-surface);border-top:1px solid var(--border);padding:64px 0 0}
.footer-grid{display:flex;flex-direction:column;align-items:center;gap:24px}
.footer-logo img{height:52px;width:auto}
.footer-social{display:flex;gap:12px}
.footer-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);color:var(--text-secondary);transition:background 0.2s,color 0.2s}
.footer-social a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.footer-social svg{width:22px;height:22px}
.footer-bottom{border-top:1px solid var(--border);margin-top:48px;padding:24px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:var(--text-sm);color:var(--text-muted)}
@media(min-width:768px){.footer-grid{flex-direction:row;justify-content:space-between}}

/* --- Services Page: Service Detail --- */
.service-detail{display:grid;gap:40px;align-items:start}
.service-detail.reverse .service-content{order:2}
.service-detail.reverse .service-visual-col{order:1}
.service-visual-col{display:flex;flex-direction:column;gap:20px}
.service-content h2{font-size:var(--text-2xl);margin-bottom:16px}
.service-content p{color:var(--text-secondary);margin-bottom:14px;font-size:var(--text-sm)}
.service-sub-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:20px}
.service-sub-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;transition:transform 0.2s,box-shadow 0.2s}
.service-sub-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.service-sub-card h4{font-size:var(--text-base);margin-bottom:4px;font-weight:600}
.service-sub-card p{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:0}
.service-cta{width:100%;display:flex;margin-top:8px}
.service-visual{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
@media(min-width:768px) and (max-width:1279px){
  .service-detail{display:flex;flex-wrap:wrap;gap:24px}
  .service-content{display:contents}
  .service-content>p{width:100%;margin-bottom:0}
  .service-sub-grid{width:calc(50% - 12px)}
  .service-visual-col{width:calc(50% - 12px);display:flex;flex-direction:column;gap:0}
  .service-cta{margin-top:30px}
  .service-stat:last-child{border-bottom:none}
}
.service-stat{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.service-stat:last-child{border-bottom:none}
.service-stat svg{width:28px;height:28px;color:var(--accent);flex-shrink:0}
.service-stat span{font-size:var(--text-sm);color:var(--text-secondary)}

@media(min-width:768px){
  .service-detail{grid-template-columns:1fr 1fr}
  .service-sub-grid{grid-template-columns:1fr 1fr}
}

/* --- Portfolio --- */
.portfolio-hero{text-align:center;padding-top:120px}
.portfolio-hero h1{font-size:clamp(2.5rem,6vw,4rem);margin-bottom:16px}
.portfolio-hero p{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;margin:0 auto 40px}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:48px}
.portfolio-filter{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);padding:10px 24px;border-radius:100px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);transition:all 0.25s;cursor:pointer}
.portfolio-filter:hover{border-color:var(--accent);color:var(--accent)}
.portfolio-filter.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:24px;padding-bottom:40px}
.portfolio-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform 0.3s,box-shadow 0.3s;position:relative;opacity:1;transform:scale(1);will-change:transform}
.portfolio-card.hidden{display:none}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.portfolio-card-visual{height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.portfolio-card-visual img{width:auto;height:auto;z-index:1;transition:transform 0.4s}
.portfolio-card-visual svg{width:64px;height:64px;z-index:1;transition:transform 0.4s}
.portfolio-card:hover .portfolio-card-visual img,.portfolio-card:hover .portfolio-card-visual svg{transform:scale(1.15)}
.portfolio-card-body{padding:24px}
.portfolio-card-cat{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent);margin-bottom:6px}
.portfolio-card h3{font-size:var(--text-lg);margin-bottom:8px}
.portfolio-card p{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:0;text-align:justify}
.portfolio-card-link{position:absolute;inset:0;z-index:2;border-radius:var(--radius)}
.portfolio-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes portfolioFadeIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:768px){.portfolio-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1280px){.portfolio-grid{grid-template-columns:1fr 1fr 1fr}}

/* --- Combined Flow --- */
.flow-diagram{text-align:center;padding:40px 0}
.flow-diagram svg{max-width:900px;width:100%;height:auto;margin:0 auto 20px}
.flow-arrow{animation:flowDash 1s linear infinite}
@keyframes flowDash{to{stroke-dashoffset:-20}}
.flow-caption{font-size:var(--text-lg);color:var(--text-secondary);text-align:center;max-width:100%;margin:0 auto;overflow-x:auto}

/* --- Pricing --- */
.pricing-grid{display:grid;gap:20px}
.pricing-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:36px 28px;box-shadow:var(--shadow);position:relative;transition:transform 0.3s,box-shadow 0.3s}
.pricing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.pricing-card.featured{border-color:var(--accent);position:relative}
.pricing-card.featured::after{content:'';position:absolute;inset:-3px;border-radius:var(--radius);border:2px solid var(--accent);opacity:0.4;filter:blur(2px);animation:pulseCard 2.5s ease-in-out infinite;pointer-events:none}
@keyframes pulseCard{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:0.6;transform:scale(1.02)}}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:4px 18px;border-radius:100px;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap}
.pricing-card h4{font-size:var(--text-2xl);margin-bottom:4px}
.pricing-sub{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:24px}
.pricing-card ul{margin-bottom:24px}
.pricing-card li{font-size:var(--text-sm);color:var(--text-secondary);padding:6px 0;display:flex;align-items:center;gap:8px}
.pricing-card li::before{content:'\2713';color:var(--accent);font-weight:700}
.pricing-card .btn{width:100%}
@media(min-width:768px) and (max-width:1279px){
  .pricing-card:last-child{grid-column:1/-1}
}
@media(min-width:768px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}

/* --- FAQ --- */
.faq-list{max-width:680px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-family:var(--font-body);font-size:var(--text-base);font-weight:500;text-align:left;background:none;color:var(--text-primary);cursor:pointer;gap:20px}
.faq-question:hover{color:var(--accent)}
.faq-icon{font-size:var(--text-xl);transition:transform 0.3s;flex-shrink:0;color:var(--text-muted);font-weight:300}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--accent)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease}
.faq-answer-inner{padding-bottom:24px;font-size:var(--text-sm);color:var(--text-secondary)}

/* --- Contact --- */
.contact-grid{display:grid;gap:48px}
.contact-info h1{font-size:var(--text-3xl);margin-bottom:16px}
.contact-info > p{color:var(--text-secondary);margin-bottom:28px;font-size:var(--text-lg)}
.contact-detail{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);font-size:var(--text-sm);color:var(--text-secondary)}
.contact-detail svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}
.availability{margin-top:28px;display:flex;align-items:center;gap:10px;font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}
.green-dot{width:12px;height:12px;border-radius:50%;background:#22c35e;animation:pulseDot 2s ease-in-out infinite}

/* Floating badges */
.floating-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.floating-badge{padding:8px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:100px;font-size:var(--text-sm);color:var(--text-secondary);box-shadow:var(--shadow);animation:badgeFloat 4s ease-in-out infinite}
.floating-badge:nth-child(2){animation-delay:0.8s}
.floating-badge:nth-child(3){animation-delay:1.6s}

/* Contact form */
.contact-form-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 28px;box-shadow:var(--shadow)}

.form-success{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;animation:fadeIn 0.5s ease}
.form-success.show{display:flex}
.form-success svg{width:64px;height:64px;color:var(--accent);margin-bottom:24px}
.form-success h3{font-size:var(--text-2xl);margin-bottom:12px}
.form-success p{color:var(--text-secondary);font-size:var(--text-sm);max-width:340px}
.form-error{display:none;padding:16px 20px;border-radius:var(--radius-sm);background:rgba(229,62,62,0.1);border:1px solid #e53e3e;margin-top:16px;animation:fadeIn 0.3s ease}
.form-error.show{display:block}
.form-error p{color:#e53e3e;font-size:var(--text-sm)}
.checkmark-line{stroke-dasharray:100;stroke-dashoffset:100;animation:checkmarkDraw 0.8s ease forwards 0.3s}

@media(min-width:768px){
  .contact-grid{grid-template-columns:1fr 1fr}
  .contact-info h1{font-size:var(--text-4xl)}
}

/* --- Services Page Hero --- */
.page-hero{padding:120px var(--pad-h) 60px;background:var(--bg-surface);text-align:center}
.page-hero h1{font-size:var(--text-3xl);margin-bottom:12px}
.page-hero p{color:var(--text-secondary);font-size:var(--text-lg);max-width:560px;margin:0 auto}
@media(min-width:768px){.page-hero h1{font-size:var(--text-5xl)}}

/* --- Footer --- */
.footer-social{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.footer-social a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);color:var(--accent);transition:transform 0.2s,background 0.2s,color 0.2s}
.footer-social a:hover{transform:scale(1.1);background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- 7. ANIMATIONS + KEYFRAMES ---------- */
@keyframes gridDrift{0%{transform:translate(0,0)}100%{transform:translate(16px,16px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes gradientShift{0%{background-position:0%}100%{background-position:200%}}
@keyframes pulseRing{0%{opacity:0.5;transform:scale(1)}50%{opacity:0.2;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pulseRingSmall{0%{opacity:0.5;transform:scale(1)}50%{opacity:0.2;transform:scale(1.15)}100%{opacity:0;transform:scale(1.15)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
@keyframes particleDrift{0%,100%{transform:translateY(0) scale(1);opacity:0.25}50%{transform:translateY(-60px) scale(0.6);opacity:0.6}}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spinnerRotate{to{transform:rotate(360deg)}}
@keyframes checkmarkDraw{to{stroke-dashoffset:0}}

/* Page transitions */

/* Scroll reveal base */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ---------- 8. RESPONSIVE ---------- */
/* 375px+ is the default (mobile-first) */

/* 768px+ */
@media(min-width:768px){
  .hero-trust{flex-wrap:nowrap;gap:24px 40px}
  .mobile-menu{display:none}
  .hamburger{display:none}
}

/* 1280px+ */
@media(min-width:1280px){
}


/* --- Custom Cursor --- */
.cursor-follower{position:fixed;width:24px;height:24px;border-radius:50%;background:#38b6ff;opacity:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:opacity 0.3s}
@media(min-width:1280px){
  body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='2,2 18,10 2,18' fill='white'/%3E%3C/svg%3E") 10 10, auto}
  a,button,input,select,textarea,label{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='2,2 18,10 2,18' fill='%2338b6ff'/%3E%3C/svg%3E") 10 10, pointer}
  .cursor-follower{opacity:0.35;animation:cursorPulse 2.5s ease-in-out infinite}
}
@keyframes cursorPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.35}50%{transform:translate(-50%,-50%) scale(1.8);opacity:0.12}}
@media(prefers-reduced-motion:reduce){.cursor-follower{display:none}}

/* ---------- 9. ACCESSIBILITY ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.sr-only:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;padding:12px 24px;margin:0;overflow:visible;clip:auto;background:var(--bg-card);color:var(--accent);border:2px solid var(--accent);border-radius:8px;z-index:9999;font-weight:600;outline:none}

@media(prefers-reduced-motion:reduce){
  *,.hero::before,.hero-visual svg,.btn-pulse::after,.particle,.floating-badge,.green-dot{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .process-line-fill{width:0!important}
  .service-card:hover{transform:none!important}
  .result-card:hover{transform:none!important}
  .why-card:hover{transform:none!important}
  .pricing-card:hover{transform:none!important}
  .step-card:hover{transform:none!important}
  .portfolio-card:hover{transform:none!important}
}