/* styles.css */

/* =====================
   Base / Theme
===================== */
:root{
  --bg: #04060c;
  --text: #dff7ff;
  --muted: #8fb7c2;

  --cyan: #00f6ff;
  --blue: #64b5ff;
  --violet: #8b7bff;
  --magenta: #ff4fd8;

  --panel: rgba(6, 10, 20, .55);
  --border: rgba(0, 246, 255, .18);

  --shadow: 0 30px 90px rgba(0,0,0,.65);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
    overflow-x:hidden;   /* prevent sideways scroll */
  overflow-y:auto;     /* allow vertical scroll */
}

/* =====================
   Background layers
===================== */
.bg{ position:fixed; inset:0; z-index:-1; }

.bg__gradient{
  position:absolute; inset:-30%;
  background:
    radial-gradient(900px 520px at 35% 45%, rgba(0,246,255,.22), transparent 55%),
    radial-gradient(900px 520px at 70% 55%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(680px 420px at 55% 30%, rgba(100,181,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.55) 100%);
  filter: blur(0px);
  animation: drift 22s ease-in-out infinite alternate;
}

@keyframes drift{
  0%   { transform: translate3d(-1.2%, 0.8%, 0) scale(1.02); }
  100% { transform: translate3d( 1.0%,-1.0%, 0) scale(1.04); }
}

.bg__vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%);
}

.bg__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .35;
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,1) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 80%);
}

.bg__noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.12;
  mix-blend-mode: overlay;
}

/* =====================
   Topbar (optional)
===================== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 28px;
  z-index:10;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
}

.brand{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-decoration: none;

  background: linear-gradient(
    90deg,
    #00f6ff 0%,
    #4fb3ff 40%,
    #a78bfa 75%,
    #ff4fd8 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  padding: 0;          /* remove box spacing */
  border: none;        /* remove outline */
  background-color: transparent;
  box-shadow: none;
}


.brand:hover{
  opacity: .85;
}



.nav{
  display:flex;
  gap:18px;
}

.nav a{
  position: relative;
  color: rgba(223,247,255,.85);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,246,255,.20);   /* always visible */
  background: rgba(0,246,255,.05);         /* subtle fill */
  transition: all .2s ease;
}

.nav a:hover{
  color: rgba(223,247,255,1);
  border-color: rgba(0,246,255,.40);
  background: rgba(0,246,255,.10);
}



/* =====================
   Hero
===================== */
.hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 120px 22px 60px; /* top padding accounts for nav */
  text-align:center;
}

.hero__inner{
  width:100%;
  max-width:1400px;   /* allow the headline to breathe */
  padding: 28px 40px 30px;
  margin:0 auto;
}


.hero__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(42px, 6vw, 115px);  /* reduced slightly */
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;

  background: linear-gradient(
    90deg,
    #00f6ff 0%,
    #4fb3ff 40%,
    #a78bfa 75%,
    #ff4fd8 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 40px 120px rgba(0, 246, 255, .15);
}




.hero__titleAccent{
  display:inline-block;
  background: linear-gradient(90deg, rgba(120,140,255,1), rgba(255,79,216,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.hero__tag{
  margin: 18px 0 28px;
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(223,247,255,.55);
}

.hero__meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
  margin-bottom: 18px;
}

.hero__name{
  font-size: 16px;
  color: rgba(223,247,255,.92);
}

.hero__role{
  font-size: 14px;
  color: rgba(143,183,194,.85);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(223,247,255,.95);
  background: rgba(0,246,255,.06);
  border: 1px solid rgba(0,246,255,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-weight: 600;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(0,246,255,.10);
  border-color: rgba(0,246,255,.35);
  box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 0 6px rgba(0,246,255,.07);
}

.btn:active{
  transform: translateY(0px);
}

/* =====================
   Mobile tweaks
===================== */
@media (max-width: 720px){
  body{ overflow:auto; }
  .nav{ display:none; } /* keep it clean on mobile */
  .hero{ padding-top: 110px; }
}

/* =====================
   Compact Form Styles
===================== */

.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px; /* tighter */
  box-shadow: var(--shadow);
}

.form-title{
  font-size:18px;
  margin-bottom:2px;
}

.form-sub{
  font-size:12px;
  color: var(--muted);
  margin-bottom:14px; /* tighter */
}

.form-grid{
  display:flex;
  flex-direction:column;
  gap:14px; /* reduced */
}

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px; /* reduced */
}

label{
  display:block;
  margin-top:8px;  /* reduced */
  margin-bottom:3px;
  font-size:11px;
  letter-spacing:.06em;
  color: var(--muted);
}

input, select, textarea{
  width:100%;
  padding:8px 10px; /* tighter */
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,246,255,.18);
  border-radius: 8px;
  color: var(--text);
  font-size:13px;
}

textarea{
  min-height:90px; /* reduce vertical dominance */
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: rgba(0,246,255,.45);
}

.full-width{
  width:100%;
}



@media (max-width: 720px){
  .form-row{
    grid-template-columns: 1fr;
  }
}



/* =====================
   Services Cards Layout
===================== */

.services-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  margin-top:10px;
}

.service-card{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,246,255,.18);
  border-radius: 12px;
  padding:16px;
  text-align:center;
  transition: all .2s ease;
}

.service-card:hover{
  border-color: rgba(0,246,255,.35);
  background: rgba(0,246,255,.05);
  transform: translateY(-2px);
}

.service-title{
  font-size:13px;
  letter-spacing:.08em;
  margin-bottom:8px;
  color: var(--cyan);
}

.service-text{
  font-size:12px;
  line-height:1.6;
  color: rgba(223,247,255,.85);
}

.link-card{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* lock content to top */
  gap:14px;
  text-align:center;
  padding:32px 22px;
  transition: all .25s ease;
}

.service-icon{
  font-size:44px;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0,246,255,.25);
}


.link-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,246,255,.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.link-card:hover .service-icon{
  opacity:1;
}












.service-icon svg{
  width:48px;
  height:48px;
  color: var(--cyan);
  transition: all .25s ease;
}

.link-card:hover .service-icon svg{
  transform: scale(1.1);
  color: #00f6ff;
}

.primfeed-icon svg{
  width:58px;
  height:58px;
  color: var(--cyan);
  transition: all .25s ease;
}

.link-card:hover .primfeed-icon svg{
  transform: scale(1.1);
  filter: drop-shadow(0 0 12px rgba(0,246,255,.6));
}


.service-title {
  min-height: 48px; /* adjust if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.service-card {
  height:100%;
}

.services-grid {
  align-items:stretch;
}


.service-icon svg{
  width:48px;
  height:48px;
  color: var(--cyan);
  transition: all .25s ease;
}

.link-card:hover .service-icon svg{
  transform: scale(1.1);
  filter: drop-shadow(0 0 14px rgba(0,246,255,.6));
}


.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-text {
  font-size: 14px;
  margin-bottom: 18px;
}

.testimonial-meta {
  margin-top: auto; /* pushes name/role to bottom */
}

.testimonial-name {
  font-size: 13px;
  color: var(--cyan);
  font-weight: 600;
}

.testimonial-role {
  font-size: 12px;
  color: var(--muted);
}

/* =====================
   Testimonials Layout (Force 3 per row)
===================== */

.testimonials-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px){
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}