/* Full Grabzies styles (light/dark + components) */

/* Fonts */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Theme variables */
:root{
  --primary:#1dc9b7;
  --bg-color:#e6f0ff;
  --text-color:#09131f;
  --section-bg:#f5faff;
  --section-bg-light:rgba(0,0,0,.03);
  --header-gradient: linear-gradient(135deg,#66aaff,#3399ff);
  --btn-light-bg:#66b2ff;
  --btn-light-text:#09131f;
  --btn-dark-bg:#2b0344;
  --btn-dark-text:#ffffff;
}

[data-theme="dark"]{
  --bg-color:#1c0f2c;
  --text-color:#f0f8ff;
  --section-bg:#2b0e44;
  --section-bg-light:rgba(255,255,255,.05);
  --header-gradient: linear-gradient(135deg,#4b0033,#66004d);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Open Sans',sans-serif;background:var(--bg-color);color:var(--text-color);transition:background .3s,color .3s;line-height:1.5;}

header{ text-align:center; padding:2rem 2rem; min-height:400px; background:var(--header-gradient) center/cover no-repeat; border-radius:1rem; }
header h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:3rem; margin-bottom:1rem; line-height:1.2; background: linear-gradient(90deg,#ff7bac,#1dc9b7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
header p{ font-size:1.3rem; margin-bottom:2rem; }

.btn{ display:inline-block; margin:.5rem; padding:.8rem 2rem; border-radius:2rem; font-weight:600; cursor:pointer; border:none; text-decoration:none; }
.btn-primary{ background:var(--btn-light-bg); color:var(--btn-light-text); }
[data-theme="dark"] .btn-primary{ background:var(--btn-dark-bg); color:var(--btn-dark-text); }
.btn-secondary{ background:transparent; border:2px solid var(--primary); color:inherit; }

section{ padding:1rem; max-width:1200px; margin:10px auto; background:var(--section-bg); border-radius:1.25rem; box-shadow:0 8px 20px rgba(0,0,0,0.05); }

.features-wrap, .process-wrap{ display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; }
.feature-block, .process-block{ background:var(--section-bg-light); padding:10px; border-radius:10px; flex:1 1 calc(25% - 10px); min-width:200px; text-align:center; }

.portfolio-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:10px; }
.portfolio-grid img{ width:100%; height:auto; border-radius:10px; display:block; }

.testimonial{ margin-top:10px; background:var(--section-bg-light); border-left:4px solid var(--primary); padding:10px; border-radius:8px; font-style:italic; }

footer{ padding:1rem 0; text-align:center; color:var(--text-color); }
footer .footer-nav{ margin-top:8px; }

#theme-toggle{ position:fixed; top:1rem; right:1rem; cursor:pointer; font-size:1.8rem; z-index:999; }

@media(max-width:768px){
  .features-wrap, .process-wrap{ flex-direction:column; }
  .feature-block, .process-block{ flex:1 1 100%; }
}