/* DataDab AI Workflow Gallery — matches the datadab.com design system.
   Design tokens ported from html/assets/css/main.css + header-footer.css. */

:root{
  --color-ivory:#FDFBF7;--color-sand:#F5F1E8;--color-warm-gray:#D4CFC4;
  --color-charcoal:#2C2C2C;--color-deep-navy:#1A2332;--color-forest:#2F4538;
  --color-sage:#7B9B85;--color-bronze:#B8956A;--color-rust:#A85C49;--color-cream:#FAF8F3;
  --font-display:'Cormorant Garamond',serif;--font-body:'DM Sans',sans-serif;--font-accent:'Instrument Serif',serif;
  --space-xs:0.5rem;--space-sm:1rem;--space-md:2rem;--space-lg:4rem;--space-xl:6rem;
  --transition-smooth:cubic-bezier(0.4,0,0.2,1);
  --radius:18px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);background:var(--color-ivory);color:var(--color-charcoal);
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;opacity:0.03;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");z-index:1;}

a{color:var(--color-bronze);text-decoration:none;transition:color 0.3s var(--transition-smooth);}
a:hover{color:var(--color-rust);}

.wrap{max-width:1200px;margin:0 auto;padding:0 2rem;}

/* ---- Header (matches datadab.com nav) ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(253,251,247,0.95);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(212,207,196,0.3);padding:1.25rem 0;}
.nav-container{max-width:1400px;margin:0 auto;padding:0 3rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;transition:opacity 0.3s var(--transition-smooth);}
.logo:hover{opacity:0.8;}
.logo img{height:22px;width:auto;}
.nav-links{display:flex;gap:2rem;align-items:center;flex-wrap:nowrap;}
.nav-links a:not(.cta-button){font-size:0.95rem;font-weight:500;color:var(--color-charcoal);text-decoration:none;transition:color 0.3s var(--transition-smooth);white-space:nowrap;}
.nav-links a:not(.cta-button):hover{color:var(--color-bronze);}
.cta-button{padding:0.75rem 1.75rem;background:var(--color-deep-navy);color:var(--color-ivory)!important;border:none;border-radius:100px;
  font-family:var(--font-body);font-size:0.9rem;font-weight:600;cursor:pointer;transition:background-color 0.3s var(--transition-smooth),transform 0.3s var(--transition-smooth),box-shadow 0.3s var(--transition-smooth);text-decoration:none;display:inline-block;white-space:nowrap;flex-shrink:0;}
.cta-button:hover{background:var(--color-forest);transform:translateY(-2px);box-shadow:0 8px 20px rgba(47,69,56,0.2);}

/* ---- Hero (deep-navy -> forest gradient with bronze/sage glows) ---- */
.hero{min-height:60vh;display:flex;align-items:center;padding:8rem 2rem 4rem;position:relative;overflow:hidden;
  background:radial-gradient(circle at 78% 20%,rgba(184,149,106,.22),transparent 28%),radial-gradient(circle at 16% 72%,rgba(123,155,133,.16),transparent 30%),linear-gradient(135deg,#111a27 0%,var(--color-deep-navy) 52%,var(--color-forest) 100%);color:var(--color-ivory);}
.hero::before{content:'';position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 20%,rgba(253,251,247,.06) 42%,transparent 60%);pointer-events:none;}
.hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%;}
.hero-eyebrow{font-size:0.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-bronze);margin-bottom:1rem;}
.hero-title{font-family:var(--font-display);font-size:clamp(2.8rem,5.5vw,4.6rem);font-weight:500;line-height:.98;letter-spacing:-.04em;color:var(--color-ivory);margin-bottom:1.25rem;max-width:850px;text-shadow:0 22px 60px rgba(0,0,0,.28);}
.hero-subtitle{font-size:1.12rem;line-height:1.8;color:rgba(253,251,247,.78);max-width:700px;margin-bottom:2rem;}
.hero-trust-row{display:flex;flex-wrap:wrap;gap:.75rem;color:rgba(253,251,247,.82);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.hero-trust-row span{border:1px solid rgba(253,251,247,.18);background:rgba(253,251,247,.08);border-radius:999px;padding:.5rem .8rem;backdrop-filter:blur(8px);}

/* ---- Sections ---- */
main{padding-bottom:var(--space-lg);}
.section-header{text-align:left;margin:var(--space-xl) 0 var(--space-md);}
.section-eyebrow{font-size:0.85rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-sage);margin-bottom:0.75rem;}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:500;color:var(--color-deep-navy);line-height:1.15;letter-spacing:-.02em;}

.category{margin-bottom:var(--space-lg);}
.category-title{font-family:var(--font-display);font-size:1.85rem;font-weight:500;color:var(--color-deep-navy);margin:0 0 1.25rem;letter-spacing:-.01em;}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;}
.tool-card-link{display:flex;flex-direction:column;background:var(--color-ivory);border:1px solid rgba(212,207,196,.55);border-radius:var(--radius);
  padding:1.75rem;color:var(--color-charcoal);text-decoration:none;transition:transform 0.3s var(--transition-smooth),box-shadow 0.3s var(--transition-smooth),border-color 0.3s var(--transition-smooth);}
.tool-card-link:hover{transform:translateY(-3px);box-shadow:0 14px 42px rgba(26,35,50,.08);border-color:var(--color-bronze);text-decoration:none;}
.tool-card-link h3{font-family:var(--font-display);font-size:1.45rem;font-weight:500;color:var(--color-deep-navy);margin-bottom:0.5rem;line-height:1.2;}
.tool-card-link p{font-size:0.92rem;color:rgba(44,44,44,.72);line-height:1.6;flex:1;}
.badge{display:inline-block;margin-top:1rem;align-self:flex-start;padding:0.3rem 0.9rem;border-radius:999px;font-size:0.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--color-sand);color:var(--color-deep-navy);border:1px solid rgba(212,207,196,.6);}
.badge-flag{background:rgba(184,149,106,.14);color:var(--color-rust);border-color:rgba(184,149,106,.4);}

/* ---- Tool pages ---- */
.tool-wrap{padding-top:7rem;}
.breadcrumb{font-size:0.9rem;color:var(--color-sage);}
.breadcrumb a{color:var(--color-sage);}
.breadcrumb a:hover{color:var(--color-rust);}
.tool-title{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:500;color:var(--color-deep-navy);margin:0.5rem 0 0.25rem;letter-spacing:-.02em;line-height:1.05;}
.tool-tagline{color:rgba(44,44,44,.72);font-size:1.05rem;margin-top:0;max-width:640px;}

.tool-card{background:var(--color-ivory);border:1px solid rgba(212,207,196,.55);border-radius:var(--radius);padding:2rem;margin-top:2rem;box-shadow:0 4px 20px rgba(0,0,0,.04);}

.field{margin-bottom:1.5rem;}
.field label{display:block;font-weight:600;margin-bottom:0.5rem;font-size:0.95rem;color:var(--color-deep-navy);}
.field input[type="url"],.field input[type="text"],.field input[type="email"],.field textarea{
  width:100%;padding:0.85rem 1rem;background:var(--color-cream);color:var(--color-charcoal);
  border:1px solid var(--color-warm-gray);border-radius:10px;font-size:0.95rem;font-family:var(--font-body);transition:border-color 0.3s var(--transition-smooth);}
.field textarea{resize:vertical;min-height:80px;line-height:1.6;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-bronze);box-shadow:0 0 0 3px rgba(184,149,106,.12);}

.submit-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.btn{cursor:pointer;border:1px solid rgba(26,35,50,.22);background:transparent;color:var(--color-deep-navy);
  padding:0.7rem 1.4rem;border-radius:100px;font-family:var(--font-body);font-size:0.9rem;font-weight:700;transition:all 0.3s var(--transition-smooth);}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,35,50,.13);}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-primary{background:var(--color-deep-navy);border-color:var(--color-deep-navy);color:var(--color-ivory);}
.btn-primary:hover{background:var(--color-forest);border-color:var(--color-forest);}
.btn-lg{padding:0.85rem 1.9rem;font-size:1rem;}
.btn-secondary{background:var(--color-ivory);}
.btn-copy{padding:0.4rem 1rem;font-size:0.8rem;}

.status,.lead-status{margin:1rem 0 0;min-height:1rem;font-size:0.85rem;}
.error{color:var(--color-rust);}
.ok{color:var(--color-forest);}
.muted{color:rgba(44,44,44,.6);}
.small{font-size:0.85rem;}
.hidden{display:none !important;}

.form-note{margin-top:1rem;}

/* ---- Results ---- */
.results{margin-top:2.5rem;}
.results-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.25rem;border-bottom:1px solid rgba(212,207,196,.4);padding-bottom:1rem;}
.results-head h2{font-family:var(--font-display);font-size:1.6rem;font-weight:500;color:var(--color-deep-navy);margin:0;}
.results-actions{display:flex;gap:0.5rem;}

.section-block{background:var(--color-ivory);border:1px solid rgba(212,207,196,.55);border-radius:var(--radius);margin-bottom:1rem;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04);}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.85rem 1.5rem;background:var(--color-sand);border-bottom:1px solid rgba(212,207,196,.4);}
.section-head h3{font-family:var(--font-display);font-size:1.2rem;font-weight:500;color:var(--color-deep-navy);margin:0;}
.section-desc{margin:0;padding:0.75rem 1.5rem 0;color:rgba(44,44,44,.6);font-size:0.85rem;}
.section-content{padding:1.25rem 1.5rem;white-space:pre-wrap;word-break:break-word;font-size:0.93rem;color:var(--color-charcoal);line-height:1.7;max-height:480px;overflow-y:auto;}
.cached-note{margin-top:0.75rem;}

/* ---- Lead capture ---- */
.lead-card h3{font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:var(--color-deep-navy);margin:0 0 0.5rem;}
.lead-form{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1rem;align-items:center;}
.lead-form input{flex:1;min-width:220px;padding:0.85rem 1rem;background:var(--color-cream);color:var(--color-charcoal);border:1px solid var(--color-warm-gray);border-radius:100px;font-size:0.95rem;font-family:var(--font-body);}
.lead-form input:focus{outline:none;border-color:var(--color-bronze);}

/* ---- Footer (deep-navy, matches datadab.com) ---- */
footer{background:var(--color-deep-navy);color:var(--color-ivory);padding:4rem 2rem 2rem;margin-top:var(--space-lg);}
.footer-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem;}
.footer-brand{display:flex;align-items:center;margin-bottom:1rem;}
.footer-brand img{height:24px;width:auto;filter:brightness(0)invert(1);}
.footer-tagline{font-size:0.9rem;opacity:0.7;line-height:1.6;max-width:360px;}
.footer-column h3{font-size:0.85rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.25rem;color:var(--color-bronze);}
.footer-links{list-style:none;}
.footer-links a{color:var(--color-ivory);text-decoration:none;font-size:0.9rem;opacity:0.7;transition:all 0.3s var(--transition-smooth);}
.footer-links a:hover{opacity:1;color:var(--color-bronze);padding-left:5px;}
.footer-links li{margin-bottom:0.75rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:2rem;text-align:center;font-size:0.85rem;opacity:0.6;max-width:1200px;margin:0 auto;}

@media (max-width:1024px){.nav-container{padding:0 1.5rem;}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}}
@media (max-width:768px){
  .nav-container{padding:0 1.5rem;}.nav-links{gap:1rem;}.nav-links a:not(.cta-button){display:none;}.cta-button{padding:0.6rem 1.25rem;font-size:0.85rem;}
  .hero{padding:6rem 1.5rem 3rem;min-height:auto;}.hero-title{font-size:2.6rem;}
  .footer-container{flex-direction:column;gap:1.5rem;}
  .tool-card{padding:1.5rem;}
}
@media (max-width:480px){.hero{padding:5rem 1rem 2.5rem;}.hero-title{font-size:2.1rem;}.hero-subtitle{font-size:1rem;}.tool-title{font-size:2rem;}}