/* ============================================================
   Roofze Client Network — Shared Styles
   Palette:  bg #0A0E1A | surface #121826 | surface-2 #171F30
             line #22293A | text #E7ECF3 | muted #8B96AB
             cyan #22D3EE | amber #FFB454
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (meta)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#0A0E1A;
  --surface:#121826;
  --surface-2:#171F30;
  --line:#22293A;
  --text:#E7ECF3;
  --muted:#8B96AB;
  --cyan:#22D3EE;
  --amber:#FFB454;
  --radius:10px;
  --max-w:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(34,211,238,0.07), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(255,180,84,0.05), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Space Grotesk', system-ui, sans-serif; margin:0 0 .4em; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:'JetBrains Mono', monospace; }

::selection{ background:rgba(34,211,238,0.25); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(10,14,26,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:1.05rem; }
.brand .dot{ width:9px; height:9px; border-radius:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); transform:rotate(45deg); }
.topbar nav a{ color:var(--muted); font-size:.9rem; margin-left:26px; transition:color .15s; }
.topbar nav a:hover{ color:var(--text); }

/* ---------- Hero ---------- */
.hero{ padding:76px 0 48px; border-bottom:1px solid var(--line); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); border:1px solid rgba(34,211,238,0.35); background:rgba(34,211,238,0.06);
  padding:5px 12px; border-radius:100px; margin-bottom:22px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); max-width:16ch; }
.hero p.lead{ color:var(--muted); max-width:56ch; font-size:1.05rem; margin-top:14px; }

/* ---------- Client grid ---------- */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:30px; flex-wrap:wrap; }
.section-head .count{ color:var(--muted); font-family:'JetBrains Mono'; font-size:.82rem; }

.grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }

.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 20px 22px; text-align:center;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(34,211,238,0.5); background:var(--surface-2); }

/* Hexagon photo frame — the signature motif */
.hex-frame{
  --size:96px; width:var(--size); height:calc(var(--size) * 1.02);
  margin:0 auto 16px; position:relative;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:linear-gradient(145deg, var(--cyan), var(--amber));
  padding:2px; transition:filter .18s ease;
}
.card:hover .hex-frame{ filter:drop-shadow(0 0 14px rgba(34,211,238,0.45)); }
.hex-frame img{
  width:100%; height:100%; object-fit:cover;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--surface-2);
}
.hex-frame.lg{ --size:150px; margin:0; }

.card h3{ font-size:1.02rem; margin-bottom:2px; }
.card .tag{ color:var(--muted); font-family:'JetBrains Mono'; font-size:.72rem; }

.card::after{
  content:'view case →'; display:block; margin-top:14px;
  font-family:'JetBrains Mono'; font-size:.72rem; letter-spacing:.04em;
  color:var(--cyan); opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.card:hover::after{ opacity:1; transform:translateY(0); }

.empty-state{ border:1px dashed var(--line); border-radius:var(--radius); padding:48px 24px; text-align:center; color:var(--muted); }

/* ---------- Client detail page ---------- */
.client-hero{ display:flex; gap:36px; align-items:center; flex-wrap:wrap; padding:64px 0 40px; border-bottom:1px solid var(--line); }
.client-hero .info{ flex:1; min-width:280px; }
.client-hero h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
.client-hero .desc{ color:var(--muted); margin-top:14px; max-width:60ch; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:.85rem;
  background:var(--cyan); color:#04121A; font-weight:500;
  padding:11px 20px; border-radius:6px; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(34,211,238,0.25); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.ghost:hover{ border-color:var(--cyan); box-shadow:none; }
.btn.danger{ background:#3A1620; color:#FF9AA8; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

.social-row{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.social-chip{
  border:1px solid var(--line); border-radius:100px; padding:7px 16px;
  font-family:'JetBrains Mono'; font-size:.78rem; color:var(--muted);
  transition:border-color .15s, color .15s;
}
.social-chip:hover{ border-color:var(--cyan); color:var(--cyan); }

.testimonial-section h2{ font-size:1.3rem; }
.testimonial-section .tag{ color:var(--cyan); font-family:'JetBrains Mono'; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.video-frame{ margin-top:20px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#000; aspect-ratio:16/9; }
.video-frame video, .video-frame iframe{ width:100%; height:100%; border:0; display:block; }

.back-link{ display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-family:'JetBrains Mono'; font-size:.82rem; margin:28px 0; }
.back-link:hover{ color:var(--cyan); }

/* ---------- Admin ---------- */
.admin-shell{ padding:48px 0 90px; }
.login-box{ max-width:380px; margin:80px auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; }
.login-box h2{ font-size:1.3rem; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:'JetBrains Mono'; font-size:.75rem; color:var(--muted); margin-bottom:7px; letter-spacing:.03em; text-transform:uppercase; }
.field input, .field textarea, .field select{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:6px; padding:11px 13px; font-family:'Inter'; font-size:.92rem;
}
.field input:focus, .field textarea:focus{ border-color:var(--cyan); }
.field textarea{ min-height:100px; resize:vertical; }
.field-hint{ color:var(--muted); font-size:.76rem; margin-top:6px; }
.error-text{ color:#FF6B7A; font-size:.82rem; margin-top:10px; min-height:1em; }
.success-text{ color:#4ADE80; font-size:.82rem; margin-top:10px; min-height:1em; }

.admin-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:34px; flex-wrap:wrap; gap:14px; }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:32px; }
.panel h2{ font-size:1.1rem; margin-bottom:20px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.social-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
@media (max-width:600px){ .two-col, .social-inputs{ grid-template-columns:1fr; } }

.video-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.video-toggle button{
  flex:1; padding:9px; border-radius:6px; border:1px solid var(--line);
  background:var(--bg); color:var(--muted); font-family:'JetBrains Mono'; font-size:.78rem; cursor:pointer;
}
.video-toggle button.active{ border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,0.06); }

table.client-table{ width:100%; border-collapse:collapse; }
table.client-table th{
  text-align:left; font-family:'JetBrains Mono'; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line);
}
table.client-table td{ padding:12px; border-bottom:1px solid var(--line); font-size:.88rem; vertical-align:middle; }
table.client-table img.thumb{ width:38px; height:38px; object-fit:cover; border-radius:6px; }
.row-actions{ display:flex; gap:8px; }
.row-actions button{
  font-family:'JetBrains Mono'; font-size:.72rem; padding:6px 10px; border-radius:5px;
  border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
}
.row-actions button:hover{ border-color:var(--cyan); color:var(--cyan); }
.row-actions button.del:hover{ border-color:#FF6B7A; color:#FF6B7A; }

.progress-bar{ height:6px; background:var(--line); border-radius:100px; overflow:hidden; margin-top:10px; display:none; }
.progress-bar .fill{ height:100%; width:0%; background:var(--cyan); transition:width .2s ease; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:30px 0; margin-top:40px; }
footer .wrap{ display:flex; justify-content:space-between; color:var(--muted); font-size:.8rem; flex-wrap:wrap; gap:10px; }

@media (max-width:640px){
  .hero{ padding:56px 0 36px; }
  .topbar nav a{ margin-left:16px; }
}