/* ═══════════════════════════════════════════════
   DESCONTEI — DESIGN TOKENS GLOBAL
   ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* Brand Colors */
  --teal:        #16A085;
  --teal-dark:   #0e7a65;
  --teal-mid:    #128a71;
  --teal-light:  #e8f8f5;
  --teal-glow:   rgba(22,160,133,.25);
  --green:       #27AE60;
  --green-light: #eafaf1;
  --solar:       #FFD600;
  --solar-dark:  #e6c200;
  --solar-glow:  rgba(255,214,0,.3);
  --dark:        #1a2535;
  --dark-card:   #222f3e;
  --dark-mid:    #2C3E50;
  --mid:         #5d7285;
  --mist:        #F2F6F9;
  --border:      #dde6ed;
  --white:       #FFFFFF;

  /* Gradients */
  --grad-main:   linear-gradient(135deg,#16A085 0%,#27AE60 100%);
  --grad-dark:   linear-gradient(135deg,#1a2535 0%,#2C3E50 100%);
  --grad-solar:  linear-gradient(135deg,#FFD600 0%,#f5a623 100%);
  --grad-glow:   radial-gradient(ellipse at 60% 0%,rgba(22,160,133,.18) 0%,transparent 65%);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --section-pad: 88px;

  /* Radius */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-pill:100px;

  /* Shadows */
  --shadow-card:  0 2px 16px rgba(26,37,53,.08), 0 8px 40px rgba(22,160,133,.07);
  --shadow-cta:   0 6px 28px rgba(22,160,133,.38);
  --shadow-solar: 0 6px 28px rgba(255,214,0,.38);
  --shadow-float: 0 12px 48px rgba(26,37,53,.22);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);color:var(--dark-mid);background:var(--white);line-height:1.6;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;outline:none}

/* ─── UTIL ─── */
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ─── TAG ─── */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--teal-light);color:var(--teal-dark);
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(22,160,133,.22);
}
.tag::before{content:'';width:6px;height:6px;background:var(--teal);border-radius:50%;flex-shrink:0}
.tag.solar{background:rgba(255,214,0,.12);color:#7a6200;border-color:rgba(255,214,0,.3)}
.tag.solar::before{background:var(--solar)}

/* ─── SECTION HEADING ─── */
.s-title{font-family:var(--font-display);font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--dark)}
.s-sub{font-size:clamp(15px,1.7vw,18px);color:var(--mid);margin-top:14px;line-height:1.65}
.s-center{text-align:center}
.s-center .s-sub{max-width:580px;margin-left:auto;margin-right:auto}

/* ─── CTA BUTTON ─── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad-main);color:#fff;
  font-family:var(--font-display);font-size:16px;font-weight:800;
  padding:16px 32px;border-radius:var(--r-md);
  box-shadow:var(--shadow-cta);
  transition:transform .18s,box-shadow .18s;
  letter-spacing:-.01em;white-space:nowrap;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(22,160,133,.48)}
.btn-primary:active{transform:translateY(0)}

.btn-solar{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--solar);color:var(--dark);
  font-family:var(--font-display);font-size:16px;font-weight:800;
  padding:16px 32px;border-radius:var(--r-md);
  box-shadow:var(--shadow-solar);
  transition:transform .18s,box-shadow .18s;
  letter-spacing:-.01em;white-space:nowrap;
}
.btn-solar:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(255,214,0,.5)}

/* ─── SCROLL REVEAL ─── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .6s ease,transform .6s ease}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .6s ease,transform .6s ease}
.reveal-right.visible{opacity:1;transform:none}

/* ─── NOISE TEXTURE OVERLAY ─── */
.noise::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;
}
.noise>*{position:relative;z-index:1}

/* ─── FORM ─── */
.form-label{display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mid);margin-bottom:6px}
.form-input,.form-select{
  width:100%;padding:13px 16px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:15px;color:var(--dark);
  background:var(--mist);outline:none;
  transition:border-color .15s,background .15s,box-shadow .15s;
  appearance:none;-webkit-appearance:none;
}
.form-input:focus,.form-select:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(22,160,133,.12)}
.form-input::placeholder{color:#aab5c0}
.form-group{margin-bottom:14px}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
  :root{--section-pad:56px}
  .hide-mobile{display:none!important}
}
@media(min-width:769px){
  .hide-desktop{display:none!important}
}