/* ══════════════════════════════════════
   SHEVAIA — Agent Page Stylesheet
   ══════════════════════════════════════ */

:root {
  --accent: #0ea87e;
  --accent-dim: #0ea87e18;
  --accent-mid: #0ea87e40;
  --dark: #0D0D0D;
  --off-white: #F5F4F0;
  --mid: #E8E6E0;
  --text: #1a1a1a;
  --muted: #717171;
  --border: #e0ddd7;
  --card: #ffffff;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',sans-serif;background:var(--off-white);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;}

/* NAV — identical to main site */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;height:64px;
  background:rgba(247,246,243,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text);text-decoration:none;}
.logo em{font-style:normal;color:var(--accent);}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none;}
.nav-links a{font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .3s;letter-spacing:.2px;}
.nav-links a:hover{color:var(--text);}
.nav-cta{background:var(--text)!important;color:#fff!important;padding:9px 20px;border-radius:8px;font-weight:600!important;font-size:13px!important;transition:all .3s cubic-bezier(.2,0,.2,1)!important;}
.nav-cta:hover{opacity:.85!important;transform:translateY(-1px)!important;box-shadow:0 4px 12px rgba(26,24,20,.15)!important;}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;}
.nav-burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s;}
.nav-mobile{display:none;position:fixed;inset:64px 0 0 0;background:var(--off-white);z-index:99;padding:32px 24px;flex-direction:column;gap:0;border-top:1px solid var(--border);}
.nav-mobile.open{display:flex;}
.nav-mobile a{font-size:17px;font-weight:500;color:var(--text);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--border);}
.nav-mobile .nav-cta-mobile{background:var(--text);color:#fff;text-align:center;border-radius:10px;padding:16px;margin-top:20px;border:none;font-size:16px;font-weight:700;}
@media(max-width:900px){
  nav{padding:0 20px;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
}

/* HERO */
.hero{min-height:100vh;padding:80px clamp(20px,6vw,80px) 60px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;top:-300px;right:-300px;width:800px;height:800px;background:radial-gradient(circle,color-mix(in srgb, var(--accent) 6%, transparent) 0%,transparent 65%);pointer-events:none}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:90px;gap:40px}.hero-right{order:-1;display:flex;justify-content:center}}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-dim);border:1px solid var(--accent-mid);border-radius:100px;padding:5px 14px;font-size:11px;font-weight:600;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px}
.hero-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-mid);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--accent-mid)}50%{box-shadow:0 0 0 7px transparent}}

.hero-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(72px,10vw,110px);font-weight:800;color:var(--accent);line-height:.88;letter-spacing:-4px;margin-bottom:16px}
.hero-subtitle{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(20px,2.8vw,30px);font-weight:600;color:var(--text);line-height:1.3;letter-spacing:-.5px;margin-bottom:20px}
.hero-desc{font-size:15px;line-height:1.8;color:var(--muted);margin-bottom:10px;max-width:460px}
.hero-note{font-size:13px;color:var(--accent);font-weight:500;margin-bottom:36px}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:var(--text);color:#fff;padding:15px 26px;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none;transition:all .25s}
.hero-cta:hover{background:var(--accent);transform:translateY(-2px)}

.hero-stats{display:flex;margin-top:44px;border-left:3px solid var(--accent)}
.stat{padding:2px 24px;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
.stat-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:800;letter-spacing:-1px}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Hero card */
.hero-card{background:var(--card);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;width:100%;max-width:440px}
.hero-card-top{display:flex;flex-direction:column;align-items:center;padding:36px 28px 24px}
.avatar-wrap{width:150px;height:150px;border-radius:50%;border:3px solid var(--accent);overflow:hidden;margin-bottom:14px}
.avatar-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 5%}
.card-tag{font-size:10px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;font-weight:600;margin-bottom:4px}
.card-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.8px;margin-bottom:4px}
.card-timer{font-size:12px;color:var(--muted)}
.waveform{display:flex;align-items:center;gap:3px;margin:10px 0 2px}
.wave-bar{width:3px;border-radius:2px;background:var(--accent);animation:wave 1.2s ease-in-out infinite}
.wave-bar:nth-child(1){height:8px;animation-delay:0s}.wave-bar:nth-child(2){height:18px;animation-delay:.1s}.wave-bar:nth-child(3){height:28px;animation-delay:.2s}.wave-bar:nth-child(4){height:22px;animation-delay:.3s}.wave-bar:nth-child(5){height:14px;animation-delay:.4s}.wave-bar:nth-child(6){height:24px;animation-delay:.5s}.wave-bar:nth-child(7){height:18px;animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(1);opacity:.7}50%{transform:scaleY(1.5);opacity:1}}
.chat-messages{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px}
.msg{display:flex;gap:8px;align-items:flex-start}
.msg-avatar{font-size:9px;font-weight:700;letter-spacing:.5px;background:var(--accent);color:#fff;padding:2px 7px;border-radius:4px;margin-top:2px;flex-shrink:0}
.msg.client .msg-avatar{background:var(--mid);color:var(--muted)}
.msg-text{font-size:12.5px;line-height:1.55;color:var(--text)}
.card-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}
.metric{text-align:center;padding:14px 0}
.metric:not(:last-child){border-right:1px solid var(--border)}
.metric-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.5px}
.metric-label{font-size:9px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}

/* SHARED */
section{padding:clamp(60px,8vw,110px) clamp(20px,6vw,80px)}
.eyebrow{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:"// "}
.section-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(30px,4.5vw,52px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;color:var(--text);margin-bottom:14px}
.section-sub{font-size:16px;color:var(--muted);line-height:1.75;max-width:540px;margin-bottom:52px}
.tag{background:var(--off-white);border:1px solid var(--border);border-radius:100px;padding:3px 11px;font-size:11.5px;color:var(--muted);font-weight:500}
.tag.g{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent)}

/* FEATURES — flip cards */
.features-section{background:var(--off-white)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features-grid{grid-template-columns:1fr}}

.flip-card{height:280px;perspective:1000px;cursor:default}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.flip-card:hover .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:28px 24px;display:flex;flex-direction:column}
.flip-front{background:var(--card);border:1px solid var(--border);justify-content:flex-end;overflow:hidden}
.flip-back{background:var(--dark);border:1px solid #222;transform:rotateY(180deg);justify-content:center;gap:10px}

.flip-front-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto;padding-top:4px}
.feat-num-label{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase}
.feat-icon-svg{width:48px;height:48px;background:var(--accent-dim);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-icon-svg svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flip-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.3px;line-height:1.25;margin-bottom:4px}
.flip-hint{font-size:11.5px;color:var(--muted);font-style:italic}

.flip-back-label{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.flip-back-desc{font-size:13px;color:#ccc;line-height:1.7}
.flip-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.flip-tag{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:100px;padding:3px 10px;font-size:11px;color:#999;font-weight:500}
.flip-tag.g{border-color:var(--accent-mid);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent)}

/* PROCESS */
.process-section{background:var(--dark);position:relative;overflow:hidden}
.process-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,color-mix(in srgb, var(--accent) 4%, transparent) 0%,transparent 60%);pointer-events:none}
.process-section .section-title{color:#fff}
.process-section .section-sub{color:#888}
.process-section .eyebrow{color:var(--accent)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.process-grid::before{content:"";position:absolute;top:35px;left:calc(12.5% + 12px);right:calc(12.5% + 12px);height:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb, var(--accent) 30%, transparent),var(--accent));z-index:0}
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr;gap:32px 16px}.process-grid::before{display:none}}
@media(max-width:480px){.process-grid{grid-template-columns:1fr;gap:28px}}
.step{padding:0 20px;position:relative}
.step:first-child{padding-left:0}.step:last-child{padding-right:0}
@media(max-width:900px){.step{padding:0}}
.step-circle{width:70px;height:70px;border-radius:50%;border:1px solid #282828;background:#111;display:flex;align-items:center;justify-content:center;margin-bottom:24px;position:relative;z-index:1;transition:background .3s,border-color .3s}
.step-circle svg{width:26px;height:26px;stroke:#555;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.step:hover .step-circle{background:var(--accent);border-color:var(--accent)}
.step:hover .step-circle svg{stroke:#fff}
.step-num{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.step-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.2px}
.step-desc{font-size:13.5px;color:#888;line-height:1.7}
.step-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.step-pill{background:#1c1c1c;border:1px solid #2a2a2a;border-radius:6px;padding:4px 11px;font-size:11.5px;color:#999}

/* USE CASES */
.usecases-section{background:var(--off-white)}
.usecases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:560px){.usecases-grid{grid-template-columns:1fr}}
.uc-card{background:var(--card);border-radius:14px;border:1px solid var(--border);padding:24px 22px;display:flex;align-items:flex-start;gap:18px;transition:border-color .25s,box-shadow .25s,transform .25s}
.uc-card:hover{border-color:var(--accent);box-shadow:0 6px 30px color-mix(in srgb, var(--accent) 8%, transparent);transform:translateY(-2px)}
.uc-icon-wrap{width:44px;height:44px;border-radius:10px;background:var(--accent-dim);border:1px solid var(--accent-mid);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.uc-icon-wrap svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.uc-num{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.uc-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:-.2px}
.uc-desc{font-size:13px;color:var(--muted);line-height:1.65}

/* COMPARISON */
.comparison-section{background:var(--card)}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.comparison-grid{grid-template-columns:1fr}}
.comp-col{border-radius:16px;padding:36px 32px;overflow:hidden}
@media(max-width:600px){.comp-col{padding:24px 20px}}
.comp-col.without{background:#faf9f7;border:1px solid var(--border)}
.comp-col.with{background:var(--dark);border:1px solid #1e1e1e}
.comp-badge{display:inline-block;padding:5px 14px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}
.without .comp-badge{background:var(--mid);color:var(--muted)}
.with .comp-badge{background:var(--accent);color:#fff}
.comp-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.4px;margin-bottom:20px}
.without .comp-title{color:var(--text)}.with .comp-title{color:#fff}
.comp-items{display:flex;flex-direction:column;gap:10px}
.comp-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:10px}
.without .comp-item{background:var(--off-white)}.with .comp-item{background:#161616}
.comp-icon-wrap{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.without .comp-icon-wrap{background:var(--mid)}.with .comp-icon-wrap{background:#222}
.comp-icon-wrap svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.without .comp-icon-wrap svg{stroke:var(--muted)}.with .comp-icon-wrap svg{stroke:var(--accent)}
.comp-text{font-size:13.5px;font-weight:500}
.without .comp-text{color:var(--muted)}.with .comp-text{color:#d0d0d0}

/* DEMO */
.demo-section{background:var(--dark);text-align:center;padding:clamp(80px,10vw,130px) clamp(20px,6vw,80px);position:relative;overflow:hidden}
.demo-section::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,color-mix(in srgb, var(--accent) 4%, transparent) 0%,transparent 70%);pointer-events:none}
.demo-section .section-title{color:#fff;max-width:520px;margin:0 auto 14px}
.demo-section .section-sub{max-width:420px;margin:0 auto 44px;color:#888}
.demo-cta{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#fff;padding:17px 34px;border-radius:100px;font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 8px 40px color-mix(in srgb, var(--accent) 35%, transparent);transition:all .25s}
.demo-cta:hover{transform:scale(1.04);box-shadow:0 12px 60px color-mix(in srgb, var(--accent) 50%, transparent)}

/* FLOATING */
.floating-cta{position:fixed;bottom:24px;right:24px;z-index:150;display:flex;align-items:center;gap:9px;background:var(--dark);color:#fff;padding:12px 20px;border-radius:50px;font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 6px 28px rgba(0,0,0,.28);transition:all .25s}
.floating-cta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
.floating-cta:hover{background:var(--accent)}

/* FOOTER */
footer{background:var(--text);border-top:1px solid rgba(255,255,255,.08);padding:40px clamp(20px,6vw,52px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.footer-logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-.5px}
.footer-logo em{font-style:normal;color:var(--accent);}
.footer-links{display:flex;gap:20px;flex-wrap:wrap;}
.footer-links a{font-family:'DM Mono',monospace;font-size:11px;color:rgba(255,255,255,.4);text-decoration:none;letter-spacing:.5px;transition:color .2s;}
.footer-links a:hover{color:#fff;}
.footer-copy{font-family:'DM Mono',monospace;font-size:11px;color:rgba(255,255,255,.25);}

@media(max-width:900px){
  footer{flex-direction:column;text-align:center;padding:28px 24px;}
}