/* ============================================================
   TUMSLY — Main Stylesheet v2
   Aesthetic: Dark Editorial · Ink & Crimson
   Fonts: Fraunces (display) + Outfit (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --ink:        #0a0a0f;
  --ink-mid:    #3d3d4d;
  --ink-light:  #7c7c96;
  --surface:    #f7f6f3;
  --surface-2:  #eeecea;
  --white:      #ffffff;
  --border:     #e0ddd8;
  --border-2:   #d0ccc6;
  --card-bg:    #ffffff;
  --header-bg:  #0a0a0f;
  --footer-bg:  #0a0a0f;
  --accent:     #e63946;
  --accent-2:   #457b9d;
  --accent-3:   #2d6a4f;
  --tag-bg:     #fff0f0;
  --tag-color:  #c1121f;
  --tag-border: #ffc8bb;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06);
  --font-head:  'Fraunces',Georgia,serif;
  --font-body:  'Outfit',system-ui,sans-serif;
  --transition: .2s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--surface);color:var(--ink);line-height:1.65;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:#c1121f}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* HEADER */
header{background:var(--header-bg);position:sticky;top:0;z-index:200;border-bottom:1px solid rgba(255,255,255,.07)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;gap:20px}
.logo a{font-family:var(--font-head);font-size:1.9rem;font-weight:900;letter-spacing:-2px;color:#fff;text-decoration:none;line-height:1}
.logo a em{font-style:italic;color:var(--accent)}
.header-search{flex:1;max-width:380px}
.header-search form{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;overflow:hidden;transition:border-color var(--transition)}
.header-search form:focus-within{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.header-search input{flex:1;border:none;background:transparent;padding:9px 16px;font-size:.88rem;font-family:var(--font-body);outline:none;color:#fff}
.header-search input::placeholder{color:rgba(255,255,255,.4)}
.header-search button{border:none;background:var(--accent);color:#fff;padding:9px 16px;cursor:pointer;font-size:.82rem;font-weight:600;transition:background var(--transition)}
.header-search button:hover{background:#c1121f}
.header-nav{display:flex;align-items:center;gap:4px}
.header-nav a{color:rgba(255,255,255,.6);font-size:.85rem;font-weight:500;padding:6px 12px;border-radius:var(--radius-sm);transition:all var(--transition)}
.header-nav a:hover{color:#fff;background:rgba(255,255,255,.09)}

/* HERO */
.hero{background:var(--ink);color:#fff;text-align:center;padding:100px 24px 90px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 20% 80%,rgba(230,57,70,.18) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 80% 20%,rgba(69,123,157,.14) 0%,transparent 70%);pointer-events:none}
.hero-content{position:relative;z-index:1}
.hero-eyebrow{display:inline-block;background:rgba(230,57,70,.2);border:1px solid rgba(230,57,70,.35);color:#ff8080;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;padding:5px 14px;border-radius:999px;margin-bottom:22px}
.hero h1{font-family:var(--font-head);font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:900;letter-spacing:-2px;line-height:1.05;margin-bottom:20px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{font-size:1.1rem;color:rgba(255,255,255,.6);margin-bottom:44px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7}
.hero-forms{display:flex;flex-direction:column;gap:12px;align-items:center}
.hero-form{display:flex;background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:999px;overflow:hidden;width:100%;max-width:540px;transition:border-color var(--transition)}
.hero-form:focus-within{border-color:rgba(255,255,255,.35)}
.hero-form input{flex:1;border:none;background:transparent;padding:14px 22px;font-size:1rem;font-family:var(--font-body);color:#fff;outline:none}
.hero-form input::placeholder{color:rgba(255,255,255,.4)}
.hero-form button{border:none;background:var(--accent);color:#fff;padding:14px 28px;cursor:pointer;font-size:.93rem;font-weight:600;font-family:var(--font-body);transition:background var(--transition);white-space:nowrap}
.hero-form button:hover{background:#c1121f}
.hero-divider{color:rgba(255,255,255,.3);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

/* SECTIONS */
.section{padding:72px 0}
.section-alt{background:var(--white)}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}
.section-title{font-family:var(--font-head);font-size:1.85rem;font-weight:700;color:var(--ink);letter-spacing:-.5px}
.section-subtitle{font-size:.93rem;color:var(--ink-light);margin-top:4px}
.section-link{font-size:.85rem;font-weight:600;color:var(--accent);border:1.5px solid var(--accent);padding:6px 18px;border-radius:999px;transition:all var(--transition);white-space:nowrap}
.section-link:hover{background:var(--accent);color:#fff}

/* BLOG CARDS */
.blogs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}
.blog-card{background:var(--card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border);padding:20px 12px 16px;text-align:center;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);cursor:pointer}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.blog-card a{text-decoration:none;color:inherit}
.blog-card .bc-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;margin:0 auto 10px;border:3px solid var(--surface-2);box-shadow:var(--shadow-sm);background:var(--surface-2);transition:border-color var(--transition)}
.blog-card:hover .bc-avatar{border-color:var(--accent)}
.blog-card .bc-name{font-size:.8rem;font-weight:600;color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blog-card .bc-handle{font-size:.72rem;color:var(--ink-light);display:block;margin-top:2px}

/* INFO BANDS */
.info-band{padding:80px 0}
.info-band+.info-band{border-top:1px solid var(--border)}
.info-band .container{max-width:860px}
.info-band-title{font-family:var(--font-head);font-size:2rem;font-weight:700;color:var(--ink);margin-bottom:28px;display:flex;align-items:center;gap:14px}
.info-band-title::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,var(--accent) 0%,transparent 100%);max-width:60px}
.info-band p{color:var(--ink-mid);line-height:1.85;margin-bottom:16px;font-size:.97rem}
.info-band a{color:var(--accent);font-weight:500}
.info-band .alert-box{background:#fff5f5;border:1.5px solid #fed7d7;border-radius:var(--radius-md);padding:18px 22px;color:#9b2335;font-weight:500;margin:20px 0;display:flex;gap:12px;align-items:flex-start}

/* POWERED BY */
.powered-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;margin-top:36px}
.powered-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ink-light);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;transition:all var(--transition);padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card-bg);min-width:90px}
.powered-item:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.powered-item img{height:40px;opacity:.7;transition:opacity var(--transition);filter:grayscale(30%)}
.powered-item:hover img{opacity:1;filter:none}
.powered-item .claude-icon{width:40px;height:40px;background:linear-gradient(135deg,#c77a30,#a05c1a);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;font-family:var(--font-head);font-weight:900;font-style:italic}

/* FOOTER */
footer{background:var(--footer-bg);color:#6b7280;padding:60px 24px 32px;margin-top:auto}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand .footer-logo a{font-family:var(--font-head);font-size:1.7rem;font-weight:900;letter-spacing:-1.5px;color:#fff;display:inline-block;margin-bottom:14px}
.footer-brand .footer-logo a em{font-style:italic;color:var(--accent)}
.footer-brand p{font-size:.85rem;line-height:1.7;color:#4b5563;max-width:240px}
.footer-col h4{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#9ca3af;margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{color:#4b5563;font-size:.87rem;transition:color var(--transition)}
.footer-col ul li a:hover{color:#fff}
.footer-bottom{max-width:1200px;margin:28px auto 0;display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#374151;flex-wrap:wrap;gap:12px}

/* STATIC PAGES */
.static-hero{background:var(--ink);color:#fff;padding:64px 24px 52px;text-align:center;position:relative;overflow:hidden}
.static-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(230,57,70,.12) 0%,transparent 70%)}
.static-hero h1{font-family:var(--font-head);font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-1.5px;position:relative;margin-bottom:8px}
.static-hero p{color:rgba(255,255,255,.5);font-size:.9rem;position:relative}
.static-page{max-width:780px;margin:56px auto 80px;padding:0 24px}
.static-page h2{font-family:var(--font-head);font-size:1.45rem;font-weight:700;color:var(--ink);margin:40px 0 14px;padding-top:28px;border-top:1px solid var(--border)}
.static-page h2:first-child{border-top:none;padding-top:0;margin-top:0}
.static-page p{color:var(--ink-mid);line-height:1.85;margin-bottom:16px;font-size:.97rem}
.static-page ul,.static-page ol{padding-left:24px;margin-bottom:16px;color:var(--ink-mid);line-height:1.85;font-size:.97rem}
.static-page li{margin-bottom:8px}
.static-page a{color:var(--accent);font-weight:500}
.static-page .callout{background:#fffbf0;border:1.5px solid #fde68a;border-radius:var(--radius-md);padding:18px 22px;margin:24px 0;color:#78350f;font-size:.93rem;line-height:1.7}
.static-page .callout-danger{background:#fff5f5;border-color:#fed7d7;color:#9b2335}
.static-page .callout-info{background:#eff8ff;border-color:#bfdbfe;color:#1e3a8a}
.report-form-wrap{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-md);margin-top:36px}
.form-row{margin-bottom:22px}
.form-row label{display:block;font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mid);margin-bottom:7px}
.form-row input,.form-row select,.form-row textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:.95rem;font-family:var(--font-body);color:var(--ink);background:var(--surface);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(230,57,70,.09);background:var(--white)}
.form-row textarea{min-height:130px;resize:vertical}
.btn-submit{background:var(--accent);color:#fff;border:none;padding:13px 36px;border-radius:999px;font-size:.95rem;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:background var(--transition),transform var(--transition);display:inline-block}
.btn-submit:hover{background:#c1121f;transform:translateY(-1px)}

/* BREADCRUMB */
.breadcrumb-bar{background:var(--white);border-bottom:1px solid var(--border);padding:10px 24px}
.breadcrumb-bar .bc-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-light)}
.breadcrumb-bar a{color:var(--ink-light)}
.breadcrumb-bar a:hover{color:var(--accent)}
.breadcrumb-bar .sep{color:var(--border-2)}
.breadcrumb-bar .current{color:var(--ink);font-weight:600}

/* RESPONSIVE */
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:768px){.header-inner{padding:0 16px}.header-search{display:none}.header-nav{display:none}.hero{padding:70px 16px 60px}.section{padding:52px 0}.blogs-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.footer-grid{grid-template-columns:1fr;gap:28px}.footer-brand p{max-width:none}.footer-bottom{flex-direction:column;text-align:center}}
@media(max-width:480px){.blogs-grid{grid-template-columns:repeat(3,1fr)}}