/* wtt.digital — production stylesheet
   WTT.Digital Design System v1: Deep Navy + AI Teal + Soft White */

:root{
  color-scheme: dark;
  --c-deep-navy:    #071426;
  --c-midnight:     #0B1F3A;
  --c-dark-card:    #101827;
  --c-charcoal:     #111827;
  --c-ai-teal:      #14B8A6;
  --c-teal-glow:    #5EEAD4;
  --c-electric:     #2563EB;
  --c-soft-white:   #F8FAFC;
  --c-cool-gray:    #EEF2F7;
  --c-text:         #F8FAFC;
  --c-text-muted:   rgba(255,255,255,0.6);
  --c-text-faint:   rgba(255,255,255,0.4);
  --c-border:       rgba(255,255,255,0.08);
  --c-border-hover: rgba(255,255,255,0.18);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-sans);color:var(--c-text);background:var(--c-deep-navy);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}

/* WORDMARK */
.wordmark{font-family:var(--font-sans);font-weight:700;font-size:22px;letter-spacing:-0.02em;text-decoration:none;display:inline-flex;align-items:center;}
.wordmark .wm-w{color:var(--c-soft-white);}
.wordmark .wm-dot{color:var(--c-ai-teal);}
.wordmark .wm-d{color:var(--c-soft-white);}
.wordmark-large{font-size:48px;font-weight:800;}

/* NAV */
nav{background:rgba(7,20,38,0.95);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);padding:0 56px;display:flex;align-items:center;justify-content:space-between;height:72px;position:sticky;top:0;z-index:200;border-bottom:1px solid var(--c-border);}
.nl{display:flex;list-style:none;align-items:center;gap:8px;}
.nl>li{position:relative;}
.nl>li>a,.nl>li>span{color:var(--c-text-muted);text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;display:block;cursor:pointer;transition:color .2s;white-space:nowrap;}
.nl>li>a:hover,.nl>li>span:hover{color:var(--c-soft-white);}
.nl>li.cta>a{background:var(--c-ai-teal);color:var(--c-deep-navy)!important;padding:9px 20px;border-radius:6px;font-weight:600;margin-left:12px;}
.nl>li.cta>a:hover{background:var(--c-teal-glow);color:var(--c-deep-navy)!important;}
.dropdown{position:absolute;top:calc(100% + 4px);left:0;background:var(--c-dark-card);border:1px solid var(--c-border);border-radius:8px;min-width:240px;display:none;z-index:300;box-shadow:0 12px 28px rgba(0,0,0,0.4);overflow:hidden;}
.nl>li:hover .dropdown,.nl>li:focus-within .dropdown{display:block;}
.dropdown a{display:block;padding:12px 18px;color:var(--c-text-muted);font-size:13px;text-decoration:none;border-bottom:1px solid var(--c-border);}
.dropdown a:last-child{border-bottom:none;}
.dropdown a:hover{color:var(--c-ai-teal);background:rgba(20,184,166,0.06);}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none;}
.ham span{display:block;width:22px;height:2px;background:var(--c-ai-teal);border-radius:2px;}
.mob-menu{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;background:var(--c-deep-navy);z-index:150;overflow-y:auto;padding:24px;}
.mob-menu.open{display:block;}
.mob-menu a{display:block;padding:14px 16px;color:var(--c-text-muted);text-decoration:none;font-size:15px;border-bottom:1px solid var(--c-border);}
.mob-menu .mob-cta{background:var(--c-ai-teal);color:var(--c-deep-navy)!important;border-radius:6px;font-weight:600;margin-top:16px;text-align:center;border-bottom:none;}

/* HERO */
.hero{padding:120px 56px 100px;position:relative;overflow:hidden;display:flex;align-items:center;min-height:600px;}
.hero-glow{position:absolute;top:-100px;right:-100px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,0.10) 0%,transparent 60%);pointer-events:none;}
.hero-inner{max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:1;}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:2.5px;color:var(--c-ai-teal);text-transform:uppercase;margin-bottom:16px;}
.hero h1{font-size:clamp(36px, 5vw, 64px);font-weight:800;letter-spacing:-0.02em;color:var(--c-soft-white);line-height:1.1;margin-bottom:24px;max-width:880px;}
.hero h1 em{color:var(--c-ai-teal);font-style:normal;}
.hero-sub{font-size:20px;color:var(--c-text-muted);line-height:1.6;margin-bottom:40px;max-width:640px;}
.btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn{padding:14px 26px;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none;display:inline-block;transition:all .2s;cursor:pointer;border:none;}
.btn-primary{background:var(--c-ai-teal);color:var(--c-deep-navy);}
.btn-primary:hover{background:var(--c-teal-glow);}
.btn-secondary{border:1px solid var(--c-border-hover);color:var(--c-soft-white);background:transparent;}
.btn-secondary:hover{border-color:var(--c-ai-teal);color:var(--c-ai-teal);}

/* AI ENGINE STRIP */
.engines{padding:32px 56px;background:var(--c-midnight);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.engines-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:space-between;}
.engines-label{font-size:11px;letter-spacing:2px;color:var(--c-text-faint);text-transform:uppercase;font-weight:600;}
.engines-list{display:flex;gap:24px;flex-wrap:wrap;}
.engine-pill{font-size:13px;color:var(--c-text-muted);font-weight:500;}

/* SECTIONS */
.sec{padding:96px 56px;}
.sec-inner{max-width:1200px;margin:0 auto;}
.sec-narrow{max-width:780px;margin:0 auto;}
.sec.alt{background:var(--c-midnight);}
.sec.dark-card{background:var(--c-dark-card);}
.sec-head{margin-bottom:60px;max-width:760px;}
.h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-0.02em;color:var(--c-soft-white);line-height:1.2;margin-bottom:18px;}
.h3{font-size:22px;font-weight:700;color:var(--c-soft-white);margin-bottom:12px;line-height:1.3;}
.lead{font-size:18px;color:var(--c-text-muted);line-height:1.7;}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-bottom:60px;}
.stat-card{background:rgba(255,255,255,0.03);border:1px solid var(--c-border);border-radius:12px;padding:32px 28px;}
.stat-num{font-size:42px;font-weight:800;color:var(--c-ai-teal);letter-spacing:-0.02em;line-height:1;margin-bottom:8px;}
.stat-label{font-size:14px;color:var(--c-text-muted);line-height:1.5;}
.stat-source{font-size:11px;color:var(--c-text-faint);margin-top:8px;}

/* VERDICT GRID */
.verdict-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;}
.verdict-card{background:rgba(20,184,166,0.04);border:1px solid rgba(20,184,166,0.18);border-radius:12px;padding:28px 22px;transition:border-color .2s,background .2s;text-decoration:none;color:inherit;display:block;}
.verdict-card:hover{border-color:var(--c-ai-teal);background:rgba(20,184,166,0.08);}
.verdict-letter{font-size:48px;font-weight:800;color:var(--c-ai-teal);line-height:1;margin-bottom:14px;font-family:var(--font-sans);}
.verdict-name{font-size:13px;font-weight:700;color:var(--c-soft-white);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;}
.verdict-deliverable{font-size:13px;color:var(--c-text-muted);line-height:1.6;}

/* PRACTICE TILES */
.practice-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.practice-tile{background:var(--c-dark-card);border:1px solid var(--c-border);border-radius:12px;padding:28px 24px;transition:transform .2s,border-color .2s;text-decoration:none;color:inherit;display:block;}
.practice-tile:hover{transform:translateY(-3px);border-color:var(--c-ai-teal);}
.practice-icon{font-size:30px;margin-bottom:14px;}
.practice-name{font-size:16px;font-weight:700;color:var(--c-soft-white);margin-bottom:8px;}
.practice-desc{font-size:13px;color:var(--c-text-muted);line-height:1.6;}

/* CASE STUDY CARDS */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;}
.cs-card{background:var(--c-dark-card);border:1px solid var(--c-border);border-radius:12px;padding:28px 26px;transition:border-color .2s;}
.cs-card:hover{border-color:var(--c-ai-teal);}
.cs-meta{font-size:11px;color:var(--c-ai-teal);letter-spacing:1.5px;text-transform:uppercase;font-weight:600;margin-bottom:12px;}
.cs-title{font-size:18px;font-weight:700;color:var(--c-soft-white);margin-bottom:14px;line-height:1.4;}
.cs-metrics{display:flex;gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--c-border);flex-wrap:wrap;}
.cs-metric{font-size:12px;color:var(--c-text-muted);}
.cs-metric-num{font-size:22px;color:var(--c-ai-teal);font-weight:800;display:block;}

/* FOUNDER */
.founder-block{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;}
.founder-photo{border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:var(--c-dark-card);}
.founder-photo img{width:100%;height:100%;object-fit:cover;}
.founder-meta{padding-top:8px;}
.founder-name{font-size:24px;font-weight:800;color:var(--c-soft-white);margin-bottom:4px;}
.founder-title{font-size:13px;color:var(--c-ai-teal);letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-bottom:16px;}
.founder-bio{font-size:15px;color:var(--c-text-muted);line-height:1.8;margin-bottom:14px;}
.founder-links{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}
.founder-links a{font-size:13px;color:var(--c-ai-teal);text-decoration:none;border:1px solid rgba(20,184,166,0.3);padding:8px 14px;border-radius:6px;transition:background .2s;}
.founder-links a:hover{background:rgba(20,184,166,0.08);}

/* INSIGHTS / ARTICLE CARDS */
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.article-card{background:var(--c-dark-card);border:1px solid var(--c-border);border-radius:12px;padding:28px 26px;transition:border-color .2s;text-decoration:none;color:inherit;display:block;}
.article-card:hover{border-color:var(--c-ai-teal);}
.article-meta{font-size:11px;color:var(--c-text-faint);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
.article-title{font-size:18px;font-weight:700;color:var(--c-soft-white);margin-bottom:12px;line-height:1.4;}
.article-excerpt{font-size:14px;color:var(--c-text-muted);line-height:1.65;}

/* FAQ */
.faq-list{max-width:820px;}
.fi{border-bottom:1px solid var(--c-border);}
.fq{width:100%;text-align:left;background:none;border:none;padding:24px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:16px;font-weight:600;color:var(--c-soft-white);gap:16px;line-height:1.4;font-family:inherit;}
.fq:hover{color:var(--c-ai-teal);}
.fi-icon{width:28px;height:28px;border-radius:50%;background:rgba(20,184,166,0.15);color:var(--c-ai-teal);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;transition:transform .25s;line-height:1;}
.fa{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.fai{padding:0 0 24px;font-size:15px;color:var(--c-text-muted);line-height:1.8;max-width:780px;}
.fi.open .fa{max-height:600px;}
.fi.open .fi-icon{transform:rotate(45deg);}

/* CTA STRIP */
.cta-strip{background:var(--c-midnight);text-align:center;padding:96px 56px;position:relative;overflow:hidden;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,0.06) 0%,transparent 65%);pointer-events:none;}
.cta-eyebrow{position:relative;z-index:1;font-size:12px;letter-spacing:2.5px;color:var(--c-ai-teal);text-transform:uppercase;font-weight:600;margin-bottom:14px;}
.cta-h2{position:relative;z-index:1;font-size:clamp(28px,3.6vw,40px);font-weight:800;color:var(--c-soft-white);margin-bottom:18px;letter-spacing:-0.02em;}
.cta-sub{position:relative;z-index:1;font-size:17px;color:var(--c-text-muted);max-width:560px;margin:0 auto 32px;line-height:1.6;}
.cta-strip .btns{position:relative;z-index:1;justify-content:center;}

/* FOOTER */
footer{background:#020a18;color:var(--c-text-muted);padding:64px 56px 32px;font-size:13px;}
.foot{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:48px;}
.foot h4{color:var(--c-ai-teal);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;font-weight:700;}
.foot a{color:var(--c-text-muted);text-decoration:none;display:block;padding:5px 0;font-size:13px;}
.foot a:hover{color:var(--c-ai-teal);}
.foot-bot{max-width:1200px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--c-border);font-size:11px;color:var(--c-text-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.disclaimer{font-size:11px;color:var(--c-text-faint);line-height:1.7;max-width:720px;margin:24px auto 0;text-align:center;}

/* FORMS */
.form-card{background:var(--c-dark-card);border:1px solid var(--c-border);border-radius:12px;padding:36px 32px;}
.form-row{margin-bottom:18px;}
.form-label{font-size:12px;font-weight:600;color:var(--c-text-muted);margin-bottom:8px;display:block;letter-spacing:.5px;}
.form-input,.form-textarea,.form-select{width:100%;padding:12px 14px;border:1px solid var(--c-border);border-radius:8px;font-family:inherit;font-size:16px;color:var(--c-soft-white);background:rgba(255,255,255,0.03);transition:border-color .2s;}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--c-ai-teal);}
.form-textarea{min-height:120px;resize:vertical;}

/* BREADCRUMB */
.bc{padding:14px 56px;font-size:12px;color:var(--c-text-faint);background:var(--c-midnight);border-bottom:1px solid var(--c-border);}
.bc a{color:var(--c-text-faint);text-decoration:none;}
.bc a:hover{color:var(--c-ai-teal);}
.bc .sep{margin:0 6px;}

/* PROSE */
.prose p{margin-bottom:18px;font-size:16px;color:var(--c-text-muted);line-height:1.85;}
.prose p strong{color:var(--c-soft-white);}
.prose ul{margin:0 0 24px 24px;}
.prose li{margin-bottom:10px;font-size:16px;color:var(--c-text-muted);line-height:1.75;}

/* RESPONSIVE — tablet (≤900px) */
@media(max-width:900px){
  .nl{display:none;}
  .ham{display:flex;}
  nav{padding:0 24px;}
  .hero,.sec,.cta-strip,.engines{padding-left:24px;padding-right:24px;}
  .sec{padding-top:64px;padding-bottom:64px;}
  .hero{padding-top:80px;padding-bottom:64px;min-height:480px;}
  .founder-block{grid-template-columns:1fr !important;gap:24px;}
  .founder-photo{max-width:280px;}
  .verdict-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  footer{padding:48px 24px 24px;}
  /* Inline-styled multi-column grids (used in methodology page) collapse to single column */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
}

/* RESPONSIVE — phone (≤700px) */
@media(max-width:700px){
  /* Letter+content split layouts (PROOF Reports, Series, Sample Report sections) stack */
  [style*="grid-template-columns:140px 1fr"],
  [style*="grid-template-columns:80px 1fr"],
  [style*="grid-template-columns:60px 1fr"]{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  /* Shrink the big letter glyphs when they're now above the content (was 96/56/40/32px) */
  .sec [style*="font-size:96px;font-weight:800;color:var(--c-ai-teal)"]{font-size:64px !important;}
  .sec [style*="font-size:56px;font-weight:800;color:var(--c-ai-teal)"]{font-size:48px !important;}
  .sec [style*="font-size:40px;font-weight:800;color:var(--c-ai-teal)"]{font-size:36px !important;}
  /* Buttons full-width on small phones for easier tap targets */
  .btns{flex-direction:column;align-items:stretch;}
  .btns .btn{width:100%;text-align:center;padding:16px 20px;font-size:15px;}
  /* Hero text smaller on phones */
  .hero{padding-top:64px;padding-bottom:48px;min-height:auto;}
  .hero h1{font-size:32px;line-height:1.15;}
  .hero-sub{font-size:16px;}
  /* Section headings smaller */
  .h2{font-size:26px;line-height:1.2;}
  /* Reduce inline padding inside sample report card and similar nested boxes */
  .sec [style*="padding:20px 28px"]{padding:16px 18px !important;}
  .sec [style*="padding:8px 28px 28px"]{padding:8px 18px 18px !important;}
  .sec [style*="padding:28px 32px"]{padding:20px 22px !important;}
  /* CTA strip on phones */
  .cta-h2{font-size:26px;line-height:1.2;}
  .cta-sub{font-size:15px;}
  /* Footer columns stack */
  .foot{grid-template-columns:1fr !important;gap:32px;}
  .foot-bot{flex-direction:column;align-items:flex-start;text-align:left;}
}

/* RESPONSIVE — small phone (≤380px) */
@media(max-width:380px){
  .hero h1{font-size:28px;}
  .h2{font-size:22px;}
  nav{padding:0 16px;}
  .hero,.sec,.cta-strip{padding-left:16px;padding-right:16px;}
  .wordmark{font-size:18px;}
}