/* ===================================================================
   tag.lafym.studio — identidade própria (teal/tech, "toque pra conectar")
   Reaproveita o DNA estrutural do institucional (cantos "+", labels mono,
   numeração em colchetes, tipografia Space Grotesk/Hanken/Space Mono) —
   só a paleta muda, igual fizemos no Vincere.
   =================================================================== */
:root{
  --t-ink:#10201D;
  --t-ink-soft:#4B6661;
  --t-ink-faint:#86A39D;
  --t-bg:#F1F6F5;
  --t-bg-card:#FFFFFF;
  --t-line:#D8E6E3;
  --t-accent:#0F9C8E;
  --t-accent-deep:#0B776C;
  --t-mono: 'Space Mono', ui-monospace, monospace;
  --t-display: 'Space Grotesk', -apple-system, sans-serif;
  --t-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--t-sans);background:var(--t-bg);color:var(--t-ink-soft);line-height:1.6;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.mono{font-family:var(--t-mono);}
.muted{color:var(--t-ink-soft);}
section{padding:60px 0;}
h1,h2,h3{font-family:var(--t-display);font-weight:700;color:var(--t-ink);margin:0 0 .5rem;letter-spacing:-0.01em;}

.eyebrow{font-family:var(--t-mono);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--t-accent);text-transform:uppercase;margin:0 0 16px;}
.eyebrow::before{content:"// ";}

.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--t-sans);font-weight:600;font-size:14px;padding:14px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--t-accent);color:#fff;}
.btn-primary:hover{background:var(--t-accent-deep);}
.btn-outline{background:transparent;color:var(--t-ink);border-color:var(--t-line);}
.btn-outline:hover{border-color:var(--t-accent);}
.btn-whatsapp{background:var(--t-accent);color:#fff;border:none;width:100%;padding:14px;font-size:14px;font-weight:600;border-radius:999px;cursor:pointer;}
.btn-whatsapp:hover{background:var(--t-accent-deep);}

/* Hero com sinal NFC animado */
.hero{position:relative;padding:80px 0 70px;overflow:hidden;}
.nfc-signal{position:absolute;top:50%;right:6%;transform:translateY(-50%);width:280px;height:280px;opacity:.5;pointer-events:none;}
.nfc-signal circle{fill:none;stroke:var(--t-accent);stroke-width:2;transform-origin:center;animation:nfc-pulse 2.4s ease-out infinite;}
.nfc-signal circle:nth-child(2){animation-delay:.5s;}
.nfc-signal circle:nth-child(3){animation-delay:1s;}
@keyframes nfc-pulse{0%{opacity:.9;transform:scale(.4);}100%{opacity:0;transform:scale(1.15);}}
.hero-inner{position:relative;z-index:1;max-width:620px;}
.hero h1{font-size:46px;line-height:1.12;}
.hero h1 .accent{color:var(--t-accent);}
.hero p.sub{font-size:16px;max-width:480px;margin:18px 0 30px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}

/* Processo */
.process-band{background:var(--t-bg-card);border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line);}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.process-step{border-left:1px solid var(--t-line);padding:0 22px;}
.process-step:first-child{border-left:none;padding-left:0;}
.step-num{font-family:var(--t-mono);color:var(--t-accent);font-size:13px;margin-bottom:8px;}
.process-step h3{font-size:17px;margin-bottom:6px;}
.process-step p{font-size:13px;color:var(--t-ink-soft);margin:0;}

/* Casos de uso */
.usecase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.usecase-card{position:relative;background:var(--t-bg-card);border:1px solid var(--t-line);padding:22px;}
.usecase-card .corner{position:absolute;font-family:var(--t-mono);font-size:11px;color:var(--t-accent);}
.usecase-card .corner.tl{top:8px;left:10px;} .usecase-card .corner.tr{top:8px;right:10px;}
.usecase-card h3{font-size:16px;margin-bottom:6px;}
.usecase-card p{font-size:13px;color:var(--t-ink-soft);margin:0;}

/* Formatos */
.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.format-card{text-align:center;background:var(--t-bg-card);border:1px solid var(--t-line);padding:24px 16px;}
.format-shape{width:56px;height:56px;margin:0 auto 14px;border:2px solid var(--t-accent);}
.format-shape.redonda{border-radius:50%;}
.format-shape.retangular{border-radius:6px;width:64px;height:44px;}
.format-shape.chaveiro{border-radius:6px;position:relative;}
.format-shape.chaveiro::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:10px;height:10px;border:2px solid var(--t-accent);border-radius:50%;background:var(--t-bg-card);}
.format-shape.adesiva{border-radius:6px;border-style:dashed;}
.format-card h3{font-size:15px;margin-bottom:6px;}
.format-card p{font-size:12px;color:var(--t-ink-soft);margin:0;}

/* CTA band */
.cta-band{background:var(--t-ink);color:#EAF3F1;text-align:center;padding:64px 0;}
.cta-band h2{color:#fff;font-size:30px;max-width:540px;margin:0 auto 14px;}
.cta-band p{color:#9FC2BC;max-width:460px;margin:0 auto 26px;font-size:15px;}

/* Builder (criar minha tag) */
.builder-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;}
.tag-preview-col{position:sticky;top:90px;}
.tag-preview{position:relative;aspect-ratio:1/1;max-width:280px;margin:0 auto;background:var(--t-ink);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:10px;padding:24px;}
.tag-preview-hole{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--t-bg);}
.tag-preview-icon{width:46px;height:46px;}
.tag-preview-domain{font-family:var(--t-mono);font-size:13px;color:var(--t-accent);word-break:break-all;text-align:center;}
.tag-preview-caption{font-size:11px;color:#9FC2BC;text-align:center;}
.preview-caption{font-size:12px;color:var(--t-ink-faint);margin-top:14px;text-align:center;}
.form-col .form-grid{max-width:none;}
.form-grid{display:flex;flex-direction:column;gap:14px;}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--t-ink-soft);font-weight:600;font-family:var(--t-display);}
.form-grid input,.form-grid select,.form-grid textarea{padding:10px 12px;border:1px solid var(--t-line);border-radius:8px;font-size:14px;font-family:var(--t-sans);color:var(--t-ink);background:#fff;}
.field-hint{font-size:12px;color:var(--t-ink-faint);font-weight:400;margin:-4px 0 0;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--t-line);padding:16px 0;}
.faq-item summary{cursor:pointer;font-family:var(--t-display);font-weight:600;color:var(--t-ink);font-size:15px;}
.faq-item p{margin:10px 0 0;color:var(--t-ink-soft);font-size:14px;}

.coming-soon{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;}

@media (max-width:880px){
  .nfc-signal{display:none;}
  .process-grid,.format-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .process-step{border-left:none;padding-left:0;}
  .builder-grid{grid-template-columns:1fr;}
  .tag-preview-col{position:relative;top:0;}
}