/* Tẹramọ́ṣẹ — styles.css
   Theme: Black, Dark‑Turquoise with hints of Orange
   Typeface: Inter
   Lightweight, responsive, accessible
*/

:root{
  --black:#0b0d0f;
  --bg:#0e1114;
  --muted:#151a20;
  --ink:#e9f1f5;
  --ink-dim:#b7c4cb;
  --turq:#0fb7b7; /* Dark‑Turquoise accent */
  --turq-600:#0aa0a0;
  --orange:#ff7a1a; /* small hints */
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:56px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#0a0c0f 60%,var(--bg));
  color:var(--ink);
  font:400 16px/1.55 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--turq);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-4)}

/* Header / Nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(12,14,18,.8);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.brand:hover{text-decoration:none;opacity:.95}
.logo-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--turq),#0cd5d5);box-shadow:0 0 0 3px rgba(15,183,183,.18),0 0 18px rgba(15,183,183,.6)}
.brand-name{font-size:18px}
.menu{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{display:inline-flex;padding:8px 12px;border-radius:999px;color:var(--ink-dim);border:1px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a.active{color:#0d1216;background:var(--turq);border-color:transparent;text-decoration:none}

/* Hero */
.hero{position:relative;border-bottom:1px solid rgba(255,255,255,.06);}
.hero{--hero-h1-size: clamp(28px, 5.2vw, 40px);}/* responsive H1 size used for vertical hero padding */
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:var(--space-6);padding-block:var(--hero-h1-size);padding-inline:0}
.hero-copy h1{font-size:var(--hero-h1-size);line-height:1;margin:0 0 var(--space-3)}
.hero-copy p{color:var(--ink-dim);max-width:52ch;margin:0 0 var(--space-4)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);color:var(--ink);background:transparent;cursor:pointer;transition:.2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:linear-gradient(135deg,var(--turq),#11d6d6);color:#001315;border-color:transparent;font-weight:600}
.btn-accent:hover{filter:saturate(115%)}
.btn-ghost{background:rgba(255,255,255,.03)}

.hero-art{display:flex;align-items:center;justify-content:center}
.hero-art img{width:100%;height:auto;max-height:180px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06)}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);padding:var(--space-6) 0}
.feature-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow)}
.fc-icon{font-size:22px;margin-bottom:8px}
.feature-card h3{margin:0 0 6px}
.feature-card p{margin:0;color:var(--ink-dim)}

/* Page intro */
.page-intro{padding:var(--space-6) 0 var(--space-4)}
.page-intro h1{margin:0 0 var(--space-2);font-size:32px;line-height:1.15}
.page-intro p{margin:0;color:var(--ink-dim)}

/* Forms on content pages */
main .container .form{max-width:720px;margin:0 auto}

/* Domains grid */
.domain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:var(--space-6) 0}
.domain-card{border-radius:var(--radius-sm);padding:16px 18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));color:var(--ink);text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .2s}
.domain-card:after{content:"Inquire";font-size:12px;color:#001315;background:var(--turq);padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08)}
.domain-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.domain-card:focus{outline:2px solid var(--turq)}

/* Modal */
.modal{position:fixed;inset:0;display:none}
.modal[open]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
/* Make modal non-transparent with a solid background */
.modal-window{position:relative;z-index:2;max-width:560px;margin:8vh auto;background:#0f1317;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.modal-body{padding:18px}
/* Validation/message area at top of modal */
.modal-feedback{min-height:0;margin:0 0 12px}
.modal .alert{margin:0 0 12px}
.icon-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--ink);width:34px;height:34px;cursor:pointer}
 
/* Selected domain header inside modal */
.modal-domain{display:flex;align-items:baseline;gap:12px;justify-content:flex-start;margin:6px 2px 18px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.2)}
.modal-domain .label{font-size:13px;color:var(--ink-dim)}
.modal-domain .value{font-size:22px;font-weight:700;letter-spacing:.2px;color:var(--turq)}
 
/* Form */
.form{display:block}
.form-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.form-row.inline{flex-direction:row;gap:10px;align-items:center}
label{font-size:14px;color:var(--ink-dim)}
input,textarea{width:100%;padding:12px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--turq);outline-offset:1px}
.hint{color:var(--ink-dim)}
 
/* Alerts */
.alert{margin:var(--space-3) auto; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--ink); box-shadow:var(--shadow)}
.alert strong{font-weight:600}
.alert-success{border-color:rgba(15,183,183,.35); background:linear-gradient(180deg,rgba(15,183,183,.12),rgba(15,183,183,.08)); color:#d9ffff}
.alert-error{border-color:rgba(255,122,26,.4); background:linear-gradient(180deg,rgba(255,122,26,.14),rgba(255,122,26,.08)); color:#ffe9db}
 
/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);margin-top:var(--space-6)}
.footer-inner{display:flex;flex-direction:column;gap:6px;padding:16px 0;color:var(--ink-dim)}
.small{font-size:13px}

/* Orange spark accents */
.brand .logo-dot{box-shadow:0 0 0 3px rgba(15,183,183,.18),0 0 18px rgba(15,183,183,.6), 0 0 0 0 rgba(255,122,26,.0)}
.feature-card:hover{border-color:rgba(255,122,26,.25)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;gap:var(--space-4)}
  .hero-art img{max-height:160px}
  .features{grid-template-columns:1fr}
  .domain-grid{grid-template-columns:1fr}
}






:root{
  --black:#0b0d0f;
  --bg:#0e1114;
  --muted:#151a20;
  --ink:#e9f1f5;
  --ink-dim:#b7c4cb;
  --turq:#0fb7b7; /* Dark‑Turquoise accent */
  --turq-600:#0aa0a0;
  --orange:#ff7a1a; /* small hints */
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:56px;
  --maxw:1100px;
}

:root{
  --black:#0b0d0f;
  --bg:#0e1114;
  --muted:#151a20;
  --ink:#e9f1f5;
  --ink-dim:#b7c4cb;
  --turq:#0fb7b7; /* Dark‑Turquoise accent */
  --turq-600:#0aa0a0;
  --orange:#ff7a1a; /* small hints */
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:56px;
  --maxw:1100px;
}


/* --- Domain cards scaling overrides (Issue: increase domain name text 3x, button 2x) --- */
/* Base desktop/tablet sizing */
.domain-grid .domain-card{
  /* ~2x overall button size compared to previous padding */
  padding: 32px 36px;
  gap: 16px;
  font-size: 32px; /* base text inside card (non-domain parts) */
}
/* The label span added by JS is the second child (after img). Make it ~2x (≈32px). */
.domain-grid .domain-card > span{
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .2px;
}
/* Enlarge favicon to visually match larger text. Inline sizes are overridden. */
.domain-grid .domain-card img{
  width: 36px !important;
  height: 36px !important;
  margin-right: 12px;
}
/* Scale the trailing "Inquire" pill for balance */
.domain-grid .domain-card:after{
  font-size: 16px;
  padding: 10px 14px;
}

/* Responsive adjustment for small screens */
@media (max-width: 900px){
  .domain-grid .domain-card{ padding: 20px 22px; font-size: 22px; }
  .domain-grid .domain-card > span{ font-size: 28px; }
  .domain-grid .domain-card img{ width: 28px !important; height: 28px !important; margin-right: 10px; }
  .domain-grid .domain-card:after{ font-size: 14px; padding: 8px 12px; }
}


/* Responsive enhancements & fixes — make site fully responsive across devices */
:root{
  /* Theme tokens */
  --black:#0b0d0f;
  --bg:#0e1114;
  --muted:#151a20;
  --ink:#e9f1f5;
  --ink-dim:#b7c4cb;
  --turq:#0fb7b7;
  --turq-600:#0aa0a0;
  --orange:#ff7a1a;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:56px;
  --maxw:1100px;
}

/* Fluid typography for key headings */
.hero-copy h1{ font-size: clamp(28px, 3.8vw, 40px); }
.page-intro h1{ font-size: clamp(22px, 3.2vw, 32px); }
.brand-name{ font-size: clamp(16px, 2.2vw, 18px); }

/* Make modal adapt to short/small viewports */
.modal-window{ width: min(560px, calc(100% - 24px)); max-height: 88vh; display:flex; flex-direction:column; }
.modal-body{ overflow:auto; }

/* Improve container side paddings on very small screens */
@media (max-width: 600px){
  .container{ padding: 0 var(--space-3); }
}

/* Navigation usability on small screens (wrap nicely) */
@media (max-width: 700px){
  .nav{ height:auto; padding: 8px 0; flex-wrap: wrap; gap: 8px; }
  .menu{ flex-wrap: wrap; gap: 10px; }
}

/* Features grid: 3→2→1 columns */
@media (max-width: 1200px){
  .features{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px){
  .features{ grid-template-columns: 1fr; }
}

/* Forms: stack inline actions on small screens and ensure comfy tap targets */
@media (max-width: 600px){
  .form-row.inline{ flex-direction: column; align-items: stretch; gap: 12px; }
  .form-row.inline .btn{ width: 100%; }
  .modal-header{ padding: 12px 14px; }
  .modal-body{ padding: 14px; }
}

/* Domains grid/cards — ensure readable/tappable on narrow screens */
@media (max-width: 480px){
  .domain-grid{ gap: 12px; }
  .domain-grid .domain-card{ padding: 16px 18px; font-size: 18px; }
  .domain-grid .domain-card > span{ font-size: 22px; }
  .domain-grid .domain-card img{ width: 22px !important; height: 22px !important; margin-right: 8px; }
  .domain-grid .domain-card:after{ font-size: 12px; padding: 6px 10px; }
}


/* Final variables override to ensure CSS custom properties are defined (fix ::root typos) */
:root{
  --black:#0b0d0f;
  --bg:#0e1114;
  --muted:#151a20;
  --ink:#e9f1f5;
  --ink-dim:#b7c4cb;
  --turq:#0fb7b7;
  --turq-600:#0aa0a0;
  --orange:#ff7a1a;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:56px;
  --maxw:1100px;
}

/* Extra small devices safety tweaks */
@media (max-width: 360px){
  .brand-name{ font-size: 15px; }
  .menu a{ padding:6px 10px; }
  .hero-art img{ max-height: 140px; }
}


/* Final responsive variables (correct :root) — ensures custom properties are set even if earlier blocks had typos */
:root{
  --black:#0b0d0f;
  --bg:#0e1114;
  --muted:#151a20;
  --ink:#e9f1f5;
  --ink-dim:#b7c4cb;
  --turq:#0fb7b7;
  --turq-600:#0aa0a0;
  --orange:#ff7a1a;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:56px;
  --maxw:1100px;
}

/* Hero banner as background of the entire hero section */
.hero{
  position: relative; /* container for layered background */
  min-height: 0; /* height defined by content + CSS padding */
}
/* Background pattern based on rs-bg.jpg recolored to site turquoise.
   Implemented with a pseudo-element so we can apply CSS filters
   and keep very thin line appearance. */
.hero::before{
  content: '';
  position: absolute; inset: 0;
  background-image: url('../img/rs-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* Bias artwork to the right/bottom so it stays clear of left-side CTAs */
  background-position: right -6% bottom 40%;
  filter: hue-rotate(170deg) saturate(140%) brightness(110%);
  z-index: 0;
}
/* Dark overlay to maintain ~40% perceived visibility and strong text contrast */
.hero::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,20,.6), rgba(14,17,20,.6));
  z-index: 0;
}
/* Elevate inner content above layered backgrounds */
.hero > *{ position: relative; z-index: 1; }
/* Hide inline hero art image to avoid duplication */
.hero-art{ display: none; }

/* Responsive tweaks: keep pattern away from CTAs and preserve thin-line look */
@media (max-width: 900px){
  /* only adjust artwork position on smaller screens */
  .hero::before{ background-position: right -10% bottom -12%; }
}
@media (max-width: 700px){
  /* only adjust artwork position on very small screens */
  .hero::before{ background-position: right -14% bottom -18%; }
}

/* --- Header responsive alignment & button visual consistency --- */
/* Align header container paddings with page containers and improve vertical rhythm */
.site-header .container{ padding-left: var(--space-4); padding-right: var(--space-4); }
@media (max-width: 600px){
  .site-header .container{ padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* Let the nav breathe on small screens and wrap neatly */
.nav{ min-height: 64px; }
@media (max-width: 700px){
  .nav{ height: auto; min-height: 56px; padding: 10px 0; gap: 10px; }
  .menu{ flex-wrap: wrap; gap: 10px; }
}

/* Make nav links adopt the same shape/look as primary buttons */
.menu a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px; /* match .btn */
  border-radius: 12px; /* match .btn radius */
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink);
  background: rgba(255,255,255,.03); /* ghost style by default */
  font-weight: 600;
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.menu a:hover{ text-decoration: none; transform: translateY(-1px); }
.menu a.active{
  background: linear-gradient(135deg, var(--turq), #11d6d6); /* match .btn-accent */
  color: #001315;
  border-color: transparent;
}

/* Make the Domains "Inquire" pill match the primary button look */
.domain-card:after{
  content: "Inquire";
  font-size: 16px;
  color: #001315;
  background: linear-gradient(135deg, var(--turq), #11d6d6);
  padding: 10px 14px;
  border-radius: 12px; /* match .btn */
  border: 1px solid transparent;
  font-weight: 600;
}
.domain-card:hover:after{ filter: saturate(115%); }

/* Ensure adequate spacing around header on very small screens */
@media (max-width: 480px){
  .nav{ padding: 12px 0; }
  .menu a{ padding: 9px 14px; }
}