﻿@charset "UTF-8";

/* ================================================
   PROFESSIONAL PORTFOLIO UI v6.0
   Clean Design • Perfect Organization • Flawless Formatting
   ================================================ */

/* ===== ABOUT PAGE ===== */
.about{max-width:1080px;margin:0 auto;padding:var(--s-80) var(--s-32)}

/* About Intro Section */
.about-intro{text-align:center;padding:var(--s-48) 0 var(--s-64);position:relative}
.about-intro::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:120px;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));border-radius:2px}
.about-intro h1{font-size:clamp(32px,5vw,44px);margin-bottom:var(--s-24);background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.intro-lead{font-size:clamp(18px,2.5vw,22px);line-height:1.6;color:var(--text-light);max-width:850px;margin:0 auto;font-weight:500}

/* About Sections */
.about-section{margin-bottom:var(--s-64);padding:var(--s-40) 0}
.about-section h2{font-size:clamp(26px,4vw,32px);margin-bottom:var(--s-32);background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;padding-bottom:var(--s-16);font-weight:700}
.about-section h2::after{content:'';position:absolute;bottom:0;left:0;width:80px;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));border-radius:2px}
.about-section p{font-size:16px;line-height:1.8;color:var(--text-light);margin-bottom:var(--s-20)}

/* Philosophy Grid */
.philosophy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-24);margin-top:var(--s-40)}
.philosophy-card{background:linear-gradient(135deg,var(--card),var(--bg-alt));padding:var(--s-28) var(--s-24);border-radius:12px;border:2px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,.06);transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.philosophy-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.philosophy-card:hover::before{transform:scaleX(1)}
.philosophy-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(26,115,232,.15);border-color:var(--brand)}
.philosophy-card h3{font-size:19px;color:var(--brand);margin-bottom:var(--s-14);font-weight:700}
.philosophy-card p{font-size:15px;line-height:1.7;color:var(--text-light);margin:0}

/* Approach Timeline */
.approach-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s-28);margin-top:var(--s-40)}
.timeline-step{background:var(--card);padding:var(--s-24);border-radius:10px;border:2px solid var(--border);box-shadow:0 3px 10px rgba(0,0,0,.05);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}
.timeline-step:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(26,115,232,.12);border-color:var(--brand)}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:8px;font-size:18px;font-weight:800;margin-bottom:var(--s-16);box-shadow:0 4px 10px rgba(26,115,232,.25)}
.timeline-step h3{font-size:18px;color:var(--text);margin-bottom:var(--s-12);font-weight:700}
.timeline-step p{font-size:15px;line-height:1.7;color:var(--text-light);margin:0}

/* Differences Grid */
.differences-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-24);margin-top:var(--s-40)}
.diff-item{background:linear-gradient(135deg,var(--card),var(--bg-alt));padding:var(--s-28) var(--s-24);border-radius:12px;border:2px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,.06);transition:all .35s cubic-bezier(.4,0,.2,1);text-align:center}
.diff-item:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(26,115,232,.15);border-color:var(--brand)}
.diff-icon{font-size:42px;margin-bottom:var(--s-16);line-height:1}
.diff-item h3{font-size:18px;color:var(--brand);margin-bottom:var(--s-14);font-weight:700}
.diff-item p{font-size:15px;line-height:1.7;color:var(--text-light);margin:0}

/* Mission Box */
.mission-box{background:linear-gradient(135deg,var(--brand-light),rgba(26,115,232,.08));padding:var(--s-40) var(--s-32);border-radius:16px;border-left:5px solid var(--brand);box-shadow:0 8px 20px rgba(26,115,232,.12);margin-top:var(--s-32);position:relative;overflow:hidden}
.mission-box::before{content:'';position:absolute;top:0;right:0;width:200px;height:200px;background:radial-gradient(circle,rgba(26,115,232,.1) 0%,transparent 70%);border-radius:50%;transform:translate(30%,-30%)}
.mission-box p{font-size:17px;line-height:1.8;color:var(--text);margin-bottom:var(--s-16);position:relative;z-index:1}
.mission-box p:last-child{margin-bottom:0}
.mission-box strong{color:var(--brand);font-weight:700}

/* Responsive About Page */
@media(max-width:768px){
  .about{padding:var(--s-56) var(--s-20)}
  .about-intro{padding:var(--s-40) 0 var(--s-48)}
  .about-section{margin-bottom:var(--s-48);padding:var(--s-32) 0}
  .philosophy-grid,.approach-timeline,.differences-grid{grid-template-columns:1fr;gap:var(--s-20)}
  .mission-box{padding:var(--s-32) var(--s-24)}
}

/* ===== HOME PAGE ===== */
.hero{padding:var(--s-64) 0;position:relative}
.hero.container{gap:var(--s-56);position:relative;z-index:10}
.hero-left{max-width:650px}
.hero-left h1{margin-bottom:var(--s-24);line-height:1.15}
.hero-left .lead{margin-bottom:var(--s-20);font-size:20px;line-height:1.6}
.hero-left>p{margin-bottom:var(--s-24);font-size:16px}

.metrics{margin:var(--s-48) 0;gap:var(--s-24)}
.value-statement{margin:var(--s-40) 0;padding:var(--s-28) var(--s-24)}
.specialisations{margin:var(--s-40) 0;padding:var(--s-48) var(--s-40);background:linear-gradient(135deg,var(--card),var(--bg-alt));border-radius:var(--r-2xl);border:2px solid var(--brand);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.specialisations::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-dark),var(--brand))}
.specialisations h3{margin:0 0 var(--s-32) 0;color:var(--text);font-size:26px;text-align:center;font-weight:700}
.specialisations ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-16);list-style:none;padding:0;margin:0}
.specialisations li{padding:var(--s-14) var(--s-18);position:relative;color:var(--text);font-size:16px;font-weight:500;line-height:1.5;background:var(--card);border-radius:var(--r-md);border:2px solid var(--border);transition:all var(--t-base);text-align:center;box-shadow:var(--shadow-xs)}
.specialisations li:hover{color:var(--brand);transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand);background:var(--brand-light)}

.trust{margin:var(--s-28) 0;padding:var(--s-24);font-size:16px}
.cta-row{margin-top:var(--s-32);gap:var(--s-16)}

.hero-right{gap:var(--s-20)}
.hero-right .hero-image-wrapper{width:100%;max-width:440px;margin:0 auto;position:relative}
.hero-right .hero-image-wrapper::before{content:'';position:absolute;inset:-16px;background:linear-gradient(135deg,rgba(26,115,232,.08),rgba(26,115,232,.04));border-radius:var(--r-2xl);z-index:-1;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.03);opacity:.4}}
.hero-right .hero-image-wrapper img{width:100%;height:auto;border-radius:var(--r-2xl);box-shadow:0 20px 40px rgba(26,115,232,.18);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);object-fit:cover;aspect-ratio:1/1;position:relative;z-index:1}
.hero-right .hero-image-wrapper img:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 28px 56px rgba(26,115,232,.25)}

.hover-card{background:linear-gradient(135deg,var(--card),var(--bg-alt));padding:var(--s-24);border-radius:var(--r-lg);border:2px solid var(--border);box-shadow:var(--shadow-md);transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.hover-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.hover-card:hover::before{transform:scaleX(1)}
.hover-card:hover{box-shadow:0 15px 30px rgba(26,115,232,.18);transform:translateY(-6px);border-color:var(--brand)}
.hover-card h4{margin:0 0 var(--s-10);background:linear-gradient(135deg,var(--brand),var(--brand-dark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:18px;font-weight:700}
.hover-card p{margin:0;color:var(--text-light);font-size:15px;line-height:1.6}

.features{padding:var(--s-80) 0;text-align:center;position:relative}
.features::before{content:'';position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(180deg,var(--bg-alt) 0%,transparent 100%);pointer-events:none;z-index:0}
.features h2{margin-bottom:var(--s-48);position:relative;z-index:1}
.features .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-28);max-width:1100px;margin:0 auto;position:relative;z-index:1}
.feature{text-align:center}
.feature h3{color:var(--text);margin-bottom:var(--s-14)}
.feature p{color:var(--text-light)}

/* ===== EXPERIENCE PAGE ===== */
.experience-section{padding:var(--s-80) var(--s-32)}

.founder-header{max-width:900px;margin:0 auto var(--s-64);background:linear-gradient(135deg,rgba(26,115,232,.1),rgba(26,115,232,.05));padding:var(--s-48) var(--s-40);border-radius:var(--r-xl);border:2px solid var(--brand);box-shadow:0 20px 40px rgba(26,115,232,.12);position:relative;overflow:hidden}
.founder-header::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-dark),var(--brand))}
.founder-header::after{content:'';position:absolute;bottom:-80px;right:-80px;width:240px;height:240px;background:radial-gradient(circle,rgba(26,115,232,.06) 0%,transparent 70%);border-radius:50%}
.founder-header h2{background:linear-gradient(135deg,var(--brand),var(--brand-dark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--s-14);font-size:clamp(26px,3.8vw,32px)}
.founder-meta{color:var(--text);font-size:16px;font-weight:600;margin-bottom:var(--s-20)}
.founder-intro{font-size:17px;line-height:1.7;margin-bottom:0;color:var(--text)}

.verticals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:var(--s-40);max-width:1150px;margin:0 auto}

.vertical{background:linear-gradient(135deg,var(--card),var(--bg-alt));padding:var(--s-32);border-radius:var(--r-xl);border:2px solid var(--border);box-shadow:0 10px 20px rgba(0,0,0,.07);transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.vertical::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--brand) 0%,var(--brand-dark) 50%,var(--brand) 100%)}
.vertical:hover{box-shadow:0 20px 40px rgba(26,115,232,.18);transform:translateY(-6px);border-color:var(--brand)}

.vertical .section-banner{margin-bottom:var(--s-24);background:none;padding:0;border-radius:0}
.vertical .section-banner h2{font-size:clamp(22px,3.5vw,28px);margin-bottom:var(--s-10);background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vertical .section-banner p{font-size:16px;color:var(--text-light);margin:0;line-height:1.6}

.vertical-indicator{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:var(--r-full);font-size:22px;font-weight:800;box-shadow:0 6px 12px rgba(26,115,232,.25);margin-bottom:var(--s-20);font-family:'Merriweather',serif}

.vertical-section{margin:var(--s-24) 0}
.vertical-section h4{color:var(--brand);font-size:18px;margin-bottom:var(--s-14);border-left:3px solid var(--brand);padding-left:var(--s-14);font-weight:700}

.vertical ul{list-style:none;padding:0;margin:var(--s-14) 0;display:grid;grid-template-columns:1fr;gap:var(--s-10)}
.vertical ul li{padding:var(--s-12) var(--s-16);position:relative;color:var(--text-light);line-height:1.65;font-size:15px;background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);transition:all .25s ease}
.vertical ul li:hover{background:var(--brand-light);color:var(--brand);transform:translateX(4px);border-color:var(--brand)}

.flagship-engagement,.vertical-outcome{background:linear-gradient(135deg,var(--bg-alt),var(--card));padding:var(--s-20);border-radius:var(--r-md);margin:var(--s-24) 0;border-left:4px solid var(--brand);box-shadow:var(--shadow-sm)}
.flagship-engagement strong{color:var(--brand);font-size:16px}
.vertical-outcome{font-size:16px;line-height:1.65;color:var(--text-light)}
.vertical-outcome strong{color:var(--brand);font-weight:700}

.strength-badges{display:flex;gap:var(--s-8);flex-wrap:wrap;margin-top:var(--s-14)}
.strength-badges .badge{background:linear-gradient(135deg,var(--brand-light),rgba(26,115,232,.06));color:var(--brand);padding:var(--s-8) var(--s-16);border-radius:var(--r-full);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border:2px solid var(--brand);transition:all .25s ease;box-shadow:var(--shadow-xs)}
.strength-badges .badge:hover{background:var(--brand);color:#fff;transform:translateY(-2px) scale(1.03);box-shadow:var(--shadow-md)}

.impact-summary{margin-top:var(--s-64);padding:var(--s-40);background:linear-gradient(135deg,var(--brand-light),rgba(26,115,232,.05));border-radius:var(--r-xl);border:2px solid var(--brand);box-shadow:0 16px 32px rgba(26,115,232,.12);position:relative;overflow:hidden}
.impact-summary::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark),var(--brand))}
.impact-summary h2{text-align:center;margin-bottom:var(--s-32);font-size:clamp(26px,3.8vw,32px)}
.summary-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s-16)}
.summary-item{display:flex;align-items:center;gap:var(--s-14);padding:var(--s-16);background:var(--card);border-radius:var(--r-md);border:2px solid var(--border);transition:all .25s ease;box-shadow:var(--shadow-xs)}
.summary-item:hover{transform:translateX(4px);border-color:var(--brand);box-shadow:var(--shadow-md);background:var(--brand-light)}
.summary-icon{font-size:20px;font-weight:800;color:var(--brand);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--brand-light);border-radius:var(--r-full);flex-shrink:0}
.summary-item span:last-child{font-size:15px;font-weight:600;color:var(--text);line-height:1.5}
.summary-closing{text-align:center;margin-top:var(--s-32);font-size:18px;color:var(--text);line-height:1.6}

/* ===== SKILLS PAGE ===== */
.skills-intro{text-align:center;max-width:850px;margin:0 auto var(--s-56);padding:var(--s-40) var(--s-28)}
.skills-intro h1{margin-bottom:var(--s-16)}
.intro-lead{font-size:20px;line-height:1.7;color:var(--text-light)}

.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--s-32);padding:0 var(--s-28);max-width:1150px;margin:0 auto}

.skill-category{background:linear-gradient(135deg,var(--card),var(--bg-alt));padding:var(--s-32);border-radius:var(--r-xl);border:2px solid var(--border);box-shadow:0 10px 20px rgba(0,0,0,.07);transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.skill-category::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--brand),var(--brand-dark));transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.skill-category:hover::before{transform:scaleY(1)}
.skill-category:hover{box-shadow:0 20px 40px rgba(26,115,232,.18);transform:translateY(-6px);border-color:var(--brand)}

.skill-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-20);flex-wrap:wrap;gap:var(--s-16)}
.skill-header h2{margin:0;font-size:26px;background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.skill-header .skill-badge{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;box-shadow:0 3px 8px rgba(26,115,232,.25);white-space:nowrap;line-height:1.4}

.skill-description{color:var(--text-light);margin-bottom:var(--s-24);line-height:1.7;font-size:16px;font-weight:500}

.skill-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:var(--s-10)}
.skill-list li{padding:var(--s-12) var(--s-16);background:var(--card);border-radius:var(--r-md);position:relative;color:var(--text);font-size:15px;font-weight:700;transition:all .25s ease;border:2px solid var(--border);box-shadow:var(--shadow-xs)}
.skill-list li:hover{background:var(--brand-light);color:var(--brand);transform:translateX(8px);border-color:var(--brand);box-shadow:var(--shadow-md)}

/* ===== CASE STUDIES ===== */
.case-studies-intro{text-align:center;padding:var(--s-64) var(--s-28) var(--s-56);max-width:900px;margin:0 auto}
.case-studies-intro h1{font-size:clamp(32px,5vw,44px);margin-bottom:var(--s-16);background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.intro-subtitle{font-size:clamp(18px,3vw,22px);background:linear-gradient(135deg,var(--brand),var(--brand-dark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;margin-bottom:var(--s-20)}
.intro-description{font-size:16px;line-height:1.7;color:var(--text-light);margin-bottom:var(--s-40);max-width:800px;margin-left:auto;margin-right:auto}

/* Filter Buttons - Clean & Professional */
.filter-section{display:flex;gap:var(--s-14);justify-content:center;flex-wrap:wrap;padding:var(--s-32) var(--s-20);margin:0 auto var(--s-48);max-width:1200px}
.filter-btn{padding:12px 24px;background:var(--card);border:2px solid var(--border);border-radius:8px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;box-shadow:0 2px 6px rgba(0,0,0,.05);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1.3}
.filter-btn:hover{background:var(--brand-light);border-color:var(--brand);color:var(--brand);box-shadow:0 4px 10px rgba(26,115,232,.15);transform:translateY(-2px)}
.filter-btn.active{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-color:var(--brand);color:#fff;box-shadow:0 6px 14px rgba(26,115,232,.25)}

/* Category Sections */
.cases-category{padding:0 var(--s-28);margin-bottom:var(--s-64)}
.category-title{font-size:clamp(22px,4vw,28px);margin-bottom:var(--s-32);padding-bottom:var(--s-14);border-bottom:3px solid var(--brand);background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}

/* Cases Grid */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s-28)}

/* Case Cards - Clean Design */
.case-card{background:var(--card);padding:24px;border-radius:12px;border:2px solid var(--border);box-shadow:0 3px 10px rgba(0,0,0,.06);transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;display:flex;flex-direction:column;min-height:auto}
.case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.case-card:hover::before{transform:scaleX(1)}
.case-card:hover{box-shadow:0 12px 28px rgba(26,115,232,.15);transform:translateY(-4px);border-color:var(--brand)}

/* Case Header - Title & Verified Badge */
.case-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--s-16);gap:var(--s-12)}
.case-header h3{margin:0;font-size:18px;color:var(--text);flex:1 1 auto;line-height:1.4;font-weight:700;word-break:break-word;overflow-wrap:break-word;min-width:0}
.verified-badge{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;padding:6px 14px;border-radius:6px;font-size:11px;font-weight:800;white-space:nowrap;flex-shrink:0;box-shadow:0 2px 6px rgba(22,163,74,.2);text-transform:uppercase;letter-spacing:.4px;line-height:1.3;align-self:flex-start}

/* Case Metadata - Country, Vertical, Value */
.case-meta{display:flex;gap:var(--s-10);flex-wrap:wrap;margin-bottom:var(--s-16);font-size:12px;font-weight:700}
.case-meta span{padding:6px 12px;background:var(--bg-alt);border-radius:6px;color:var(--text);border:2px solid var(--border);transition:all .25s ease;line-height:1.3;white-space:nowrap}
.case-country{color:var(--brand)!important;background:var(--brand-light)!important;border-color:var(--brand)!important}
.case-vertical{font-weight:700}
.case-value{background:var(--brand-light)!important;color:var(--brand)!important;border-color:var(--brand)!important}

/* Case Summary */
.case-summary{color:var(--text-light);line-height:1.7;margin-bottom:var(--s-18);flex:1;font-size:15px;word-break:break-word;overflow-wrap:break-word}

/* Case Tags - Clean Pills */
.case-tags{display:flex;gap:var(--s-8);flex-wrap:wrap;margin-bottom:var(--s-16)}
.case-tags .tag{background:linear-gradient(135deg,var(--brand-light),rgba(26,115,232,.06));color:var(--brand);padding:6px 14px;border-radius:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border:2px solid var(--brand);line-height:1.3;white-space:nowrap;transition:all .25s ease}
.case-tags .tag:hover{background:var(--brand);color:#fff;box-shadow:0 3px 8px rgba(26,115,232,.2);transform:translateY(-1px)}

/* Case Insights */
.case-insight{background:linear-gradient(135deg,var(--bg-alt),var(--card));padding:14px 16px;border-radius:8px;border-left:3px solid var(--brand);font-size:14px;line-height:1.6;color:var(--text-light);box-shadow:0 2px 6px rgba(0,0,0,.04);margin-top:auto}
.case-insight strong{color:var(--brand);font-weight:800}

/* ===== FOOTER ===== */
.site-footer{padding:var(--s-56) 0 var(--s-24)}
.footer-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--s-28);position:relative;z-index:1}
.footer-branding{margin-bottom:var(--s-32)}
.footer-branding h2{color:#fff;margin-bottom:var(--s-14);font-size:28px;text-shadow:0 2px 6px rgba(0,0,0,.15)}
.footer-branding p{color:rgba(255,255,255,.95);font-size:16px;line-height:1.65}
.footer-social{display:flex;gap:var(--s-12);margin-top:var(--s-16)}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.12);border-radius:var(--r-md);color:#fff;font-weight:700;transition:all .25s cubic-bezier(.4,0,.2,1);font-size:18px;border:2px solid rgba(255,255,255,.18)}
.footer-social a:hover{background:rgba(255,255,255,.22);transform:translateY(-3px) scale(1.08);box-shadow:0 6px 12px rgba(0,0,0,.25)}

/* ===== SKILLS SUMMARY ===== */
.skills-summary{padding:var(--s-64) var(--s-32);background:linear-gradient(135deg,var(--bg-alt),var(--card));border-radius:var(--r-xl);margin:var(--s-80) var(--s-28);border:2px solid var(--border);box-shadow:0 10px 20px rgba(0,0,0,.07);position:relative;overflow:hidden}
.skills-summary::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-dark),var(--brand))}
.skills-summary h2{text-align:center;margin-bottom:var(--s-48);font-size:clamp(28px,5vw,36px);background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.competency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-32);max-width:1200px;margin:0 auto}
.competency{background:var(--card);padding:var(--s-28) var(--s-24);border-radius:var(--r-lg);border:2px solid var(--border);transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.competency::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.competency:hover::before{transform:scaleX(1)}
.competency:hover{transform:translateY(-6px);box-shadow:0 15px 30px rgba(26,115,232,.18);border-color:var(--brand)}
.competency strong{display:block;color:var(--brand);font-size:16px;font-weight:800;margin-bottom:var(--s-12);text-transform:uppercase;letter-spacing:.5px}
.competency p{margin:0;color:var(--text-light);font-size:15px;line-height:1.7;word-break:break-word;white-space:normal;overflow-wrap:break-word}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero.container{grid-template-columns:1fr 380px;gap:var(--s-44)}
  .hero-right .hero-image-wrapper{max-width:380px}
  .skills-grid{grid-template-columns:1fr}
  .verticals-grid{grid-template-columns:1fr}
  .cases-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}

@media(max-width:768px){
  .hero.container{grid-template-columns:1fr;gap:var(--s-36)}
  .hero-right{order:-1}
  .hero-left{text-align:center;max-width:100%}
  .cta-row{justify-content:center}
  .features .grid{grid-template-columns:1fr}
  .founder-header{padding:var(--s-36) var(--s-28)}
  .vertical{padding:var(--s-28)}
  .skill-category{padding:var(--s-28)}
  .skills-grid{grid-template-columns:1fr}
  .cases-grid{grid-template-columns:1fr}
  .verticals-grid{grid-template-columns:1fr}
  .summary-metrics{grid-template-columns:1fr}
  .specialisations ul{grid-template-columns:1fr}
  .filter-section{flex-direction:column;align-items:center}
  .filter-btn{width:100%;max-width:400px}
}

@media(max-width:480px){
  .hero{padding:var(--s-40) 0}
  .metrics{grid-template-columns:1fr;gap:var(--s-16)}
  .specialisations{padding:var(--s-32) var(--s-24)}
  .specialisations h3{font-size:22px}
  .specialisations ul{grid-template-columns:1fr}
  .founder-header{padding:var(--s-28) var(--s-20)}
  .vertical{padding:var(--s-20)}
  .skill-category{padding:var(--s-20)}
  .case-card{padding:var(--s-18)}
  .case-header h3{font-size:16px}
  .case-header{flex-direction:column;align-items:flex-start}
  .verified-badge{align-self:flex-start}
  .impact-summary{padding:var(--s-28) var(--s-20)}
  .filter-btn{font-size:12px;padding:var(--s-8) var(--s-14)}
}

/* ===== DARK MODE FIXES ===== */
[data-theme="dark"] .case-tags .tag{background:rgba(26,115,232,.25);border-color:rgba(26,115,232,.6)}
[data-theme="dark"] .case-tags .tag:hover{background:var(--brand);border-color:var(--brand)}
[data-theme="dark"] .case-country,[data-theme="dark"] .case-value{background:rgba(26,115,232,.2)!important;border-color:rgba(26,115,232,.5)!important}
[data-theme="dark"] .strength-badges .badge{background:rgba(26,115,232,.25);border-color:rgba(26,115,232,.6)}
[data-theme="dark"] .strength-badges .badge:hover{background:var(--brand)}
[data-theme="dark"] .mission-box{background:rgba(26,115,232,.15)}
[data-theme="dark"] .founder-header{background:rgba(26,115,232,.15)}
[data-theme="dark"] .impact-summary{background:rgba(26,115,232,.15)}
[data-theme="dark"] .hero-right .hero-image-wrapper::before{background:linear-gradient(135deg,rgba(26,115,232,.15),rgba(26,115,232,.08))}
[data-theme="dark"] .filter-btn{background:var(--card);color:var(--text)}
[data-theme="dark"] .filter-btn:hover{background:rgba(26,115,232,.25);color:var(--text)}
[data-theme="dark"] .filter-btn.active{background:var(--brand);color:#fff}

/* ===== SUPPORT SECTION ===== */
.support-section{max-width:700px;margin:var(--s-64) auto var(--s-48) auto;padding:var(--s-48) var(--s-40);text-align:center;background:linear-gradient(135deg,rgba(26,115,232,.08),rgba(26,115,232,.03));border-radius:20px;border:2px solid rgba(26,115,232,.2);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.support-section h2{margin:0 0 var(--s-16) 0;font-size:28px;font-weight:700;color:var(--text)}
.support-section p{margin:0 0 var(--s-32) 0;font-size:16px;color:var(--text-secondary);line-height:1.6}
.support-buttons{display:flex;justify-content:center}
.coffee-page-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:600;border-radius:var(--r-md);text-decoration:none;transition:all var(--t-base);margin-right:10px}
.coffee-page-btn .btn-icon{font-size:20px}
[data-theme="dark"] .support-section{background:linear-gradient(135deg,rgba(26,115,232,.15),rgba(26,115,232,.08));border-color:rgba(26,115,232,.3)}
@media(max-width:640px){.support-section{padding:var(--s-32) var(--s-24)}.support-section h2{font-size:24px}.coffee-page-btn{padding:var(--s-12) var(--s-24)}}

/* ===== CONTACT PAGE ===== */
.contact-page{max-width:1000px;margin:0 auto;padding:var(--s-80) var(--s-32)}

.contact-header{text-align:center;margin-bottom:var(--s-64);position:relative}
.contact-header::after{content:'';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:100px;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));border-radius:2px}
.contact-header h1{font-size:clamp(32px,5vw,42px);margin-bottom:var(--s-20);background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.contact-header p{font-size:18px;line-height:1.7;color:var(--text-light);max-width:700px;margin:0 auto}

/* Contact Cards Grid */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-24);margin-bottom:var(--s-56)}
.contact-card{background:linear-gradient(135deg,var(--card),var(--bg-alt));padding:var(--s-28) var(--s-24);border-radius:12px;border:2px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,.06);transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-align:center}
.contact-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.contact-card:hover::before{transform:scaleX(1)}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(26,115,232,.15);border-color:var(--brand)}
.contact-card-icon{font-size:36px;margin-bottom:var(--s-16);line-height:1}
.contact-card h3{font-size:18px;color:var(--brand);margin-bottom:var(--s-12);font-weight:700}
.contact-card p{margin:0;color:var(--text);line-height:1.7;font-size:15px}
.contact-card a{color:var(--brand);text-decoration:none;font-weight:600;transition:color .2s ease}
.contact-card a:hover{color:var(--brand-dark)}

/* Contact Form Section */
.contact-form-section{max-width:700px;margin:0 auto;padding:var(--s-48) var(--s-40);background:linear-gradient(135deg,var(--card),var(--bg-alt));border-radius:16px;border:2px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.08);position:relative;overflow:hidden}
.contact-form-section::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-dark),var(--brand))}
.contact-form-section h2{margin:0 0 var(--s-12);color:var(--text);font-size:clamp(24px,4vw,30px);font-weight:700;background:linear-gradient(135deg,var(--text),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.contact-form-section>p{color:var(--text-light);font-size:15px;line-height:1.7;margin:var(--s-12) 0 var(--s-32)}

/* Form Styles */
.contact-form{display:flex;flex-direction:column;gap:var(--s-24)}
.form-group{display:flex;flex-direction:column;gap:var(--s-8)}
.form-group label{font-size:14px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.3px}
.form-group input,.form-group textarea{padding:14px 16px;border:2px solid var(--border);border-radius:8px;font-size:15px;color:var(--text);background:var(--bg);font-family:inherit;transition:all .25s ease;line-height:1.5}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,115,232,.1)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted)}
.form-group textarea{resize:vertical;min-height:140px}

.form-submit{margin-top:var(--s-12)}
.form-loader{display:none;text-align:center;margin-top:var(--s-12)}
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top:3px solid var(--brand);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.form-status{font-size:15px;text-align:center;margin-top:var(--s-12);font-weight:600}
.form-status.success{color:#16a34a}
.form-status.error{color:#dc2626}

/* Responsive Contact Page */
@media(max-width:768px){
  .contact-page{padding:var(--s-56) var(--s-20)}
  .contact-header{margin-bottom:var(--s-48)}
  .contact-cards{grid-template-columns:1fr;gap:var(--s-20)}
  .contact-form-section{padding:var(--s-36) var(--s-28)}
}

@media(max-width:480px){
  .contact-form-section{padding:var(--s-28) var(--s-20)}
  .contact-cards{margin-bottom:var(--s-40)}
}

