*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:"Inter",sans-serif; background:#fff; color:#111111; overflow-x:hidden; line-height:1.6; }
:root {
  --navy: #111111;
  --navy2: #2a2a2a;
  --green: #00c758;
  --green2: #005f3d;
  --green3: #1a7a52;
  --gray: #f4faf7;
  --gray2: #e6f5ee;
  --muted: #527060;
  --border: #c8e8d8;
  --white: #ffffff;
  --shadow: 0 4px 24px rgba(0,95,61,.10);
  --shadow-md: 0 8px 32px rgba(0,95,61,.14);
}
::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:#f0f9f4} ::-webkit-scrollbar-thumb{background:var(--green2);border-radius:5px}
.container { max-width:1200px; margin:0 auto; padding:0 28px; }

/* -- NAVBAR -- */
.topbar { background:var(--white); border-bottom:1.5px solid var(--border); position:sticky; top:0; z-index:999; transition:box-shadow .3s; }
.topbar.shadow { box-shadow:var(--shadow-md); }
.nav-inner { display:flex; align-items:center; gap:28px; height:60px; }
.logo { font-size:1.5rem; font-weight:800; color:var(--navy); letter-spacing:-.5px; text-decoration:none; flex-shrink:0; margin-right:8px; }
.logo span { color:var(--green); }
.nav-links { display:flex; gap:2px; flex:1; justify-content:center; }
.nav-links a { font-size:.82rem; font-weight:600; color:var(--navy); padding:6px 11px; border-radius:6px; text-decoration:none; white-space:nowrap; transition:background .18s, color .18s; }
.nav-links a:hover { background:var(--gray); color:var(--green2); }
.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-right a.sign-in { background:transparent; color:var(--green2); font-weight:700; font-size:.82rem; padding:8px 18px; border-radius:6px; text-decoration:none; border:1.5px solid var(--green2); transition:all .2s; }
.nav-right a.sign-in:hover { background:var(--green2); color:var(--white); }
.nav-right a.sign-up { background:var(--navy); color:var(--white); font-weight:700; font-size:.82rem; padding:8px 20px; border-radius:6px; text-decoration:none; transition:background .2s; }
.nav-right a.sign-up:hover { background:var(--navy2); }
.nav-right .nav-search { color:var(--navy); font-size:1rem; cursor:pointer; padding:6px; border-radius:6px; transition:background .18s; }
.nav-right .nav-search:hover { background:var(--gray); }
@media(max-width:900px){.nav-links{display:none}}

/* -- HERO -- */
.hero { background:var(--green2); padding:52px 0 0; position:relative; overflow:hidden; border-radius:0 0 64px 64px; }
/* animated dot grid */
.hero-bg { position:absolute; inset:0; background-image: radial-gradient(circle, rgba(0,199,88,.18) 1px, transparent 1px); background-size:38px 38px; opacity:.5; }
/* blob glows */
.hero::before { content:''; position:absolute; top:-140px; right:-120px; width:700px; height:600px; border-radius:38% 62% 55% 45% / 45% 38% 62% 55%; background:radial-gradient(circle,rgba(0,199,88,.24) 0%,transparent 65%); pointer-events:none; animation:blobA 14s ease-in-out infinite; }
.hero::after { content:''; position:absolute; top:-140px; left:-120px; width:700px; height:600px; border-radius:62% 38% 45% 55% / 55% 62% 38% 45%; background:radial-gradient(circle,rgba(0,199,88,.24) 0%,transparent 65%); pointer-events:none; animation:blobB 14s ease-in-out infinite; }
@keyframes blobA { 0%,100%{border-radius:38% 62% 55% 45% / 45% 38% 62% 55%;transform:translate(0,0)} 33%{border-radius:55% 45% 62% 38% / 38% 55% 45% 62%;transform:translate(-20px,15px)} 66%{border-radius:45% 55% 38% 62% / 62% 45% 55% 38%;transform:translate(15px,-10px)} }
@keyframes blobB { 0%,100%{border-radius:62% 38% 45% 55% / 55% 62% 38% 45%;transform:translate(0,0)} 40%{border-radius:38% 62% 55% 45% / 38% 55% 62% 45%;transform:translate(18px,-14px)} 70%{border-radius:55% 45% 38% 62% / 62% 38% 55% 45%;transform:translate(-12px,20px)} }
/* corner arc accents */
.hero-stripe { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:0; }
.hero-stripe::before { content:''; position:absolute; top:-180px; left:-180px; width:420px; height:420px; border-radius:50%; border:40px solid rgba(0,199,88,.07); animation:arcSpin 28s linear infinite; }
.hero-stripe::after { content:''; position:absolute; bottom:-180px; right:-180px; width:420px; height:420px; border-radius:50%; border:40px solid rgba(0,199,88,.07); animation:arcSpin 22s linear infinite reverse; }
@keyframes arcSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.hero-text { text-align:center; padding-bottom:16px; position:relative; z-index:1; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(0,199,88,.15); border:1px solid rgba(0,199,88,.3); border-radius:50px; padding:6px 18px; font-size:.7rem; font-weight:800; color:var(--green); letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; }
.hero-text h1 { font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--white); letter-spacing:-1.5px; line-height:1.15; margin-bottom:12px; }
.hero-text h1 span { color:var(--green); }
.hero-text p { font-size:1rem; color:rgba(255,255,255,.72); max-width:540px; margin:0 auto; }
/* hero service grid */
.hero-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:rgba(0,0,0,.08); border:1.5px solid rgba(255,255,255,.1); border-radius:16px 16px 0 0; overflow:hidden; position:relative; z-index:1; margin-top:14px; }
.hcard { background:var(--white); padding:20px 14px 18px; text-align:center; cursor:pointer; transition:background .18s, transform .18s; border:none; text-decoration:none; display:flex; flex-direction:column; align-items:center; }
.hcard:hover { background:var(--gray); }
.hcard .hcard-icon { font-size:1.5rem; color:var(--green2); margin-bottom:8px; transition:transform .25s; }
.hcard:hover .hcard-icon { transform:scale(1.15) rotate(-6deg); }
.hcard .hcard-label { font-size:.8rem; font-weight:800; color:var(--navy); margin-bottom:3px; }
.hcard .hcard-desc { font-size:.68rem; color:var(--muted); font-weight:500; line-height:1.4; }
.hcard-row2 { grid-column: span 1; }
@media(max-width:700px){.hero-cards{grid-template-columns:repeat(2,1fr)}}
.hero-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); width:480px; height:480px; border-radius:38% 62% 55% 45% / 45% 38% 62% 55%; border:1.5px solid rgba(0,199,88,.18); pointer-events:none; z-index:0; animation:ringMorph 20s ease-in-out infinite; }
.hero-ring::before { content:''; position:absolute; inset:22px; border-radius:62% 38% 45% 55% / 55% 62% 38% 45%; border:1px solid rgba(0,199,88,.1); animation:ringMorph 16s ease-in-out infinite reverse; }
.hero-ring::after { content:''; position:absolute; inset:48px; border-radius:50%; background:radial-gradient(circle,rgba(0,199,88,.07) 0%,transparent 70%); animation:ringPulse 4s ease-in-out infinite; }
@keyframes ringMorph { 0%,100%{border-radius:38% 62% 55% 45% / 45% 38% 62% 55%;transform:translate(-50%,-58%) rotate(0deg)} 33%{border-radius:55% 45% 62% 38% / 38% 55% 45% 62%;transform:translate(-50%,-58%) rotate(60deg)} 66%{border-radius:45% 55% 38% 62% / 62% 45% 55% 38%;transform:translate(-50%,-58%) rotate(120deg)} }
@keyframes ringPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

/* -- DOMAIN SEARCH -- */
.domain-section { padding:52px 0 44px; border-bottom:1.5px solid var(--border); }
.domain-head { text-align:center; margin-bottom:28px; }
.domain-head h2 { font-size:1.7rem; font-weight:800; color:var(--navy); letter-spacing:-.5px; margin-bottom:8px; }
.domain-head h2 i { color:var(--green2); margin-right:8px; }
.domain-head p { color:var(--muted); font-size:.9rem; }
.domain-bar { display:flex; max-width:680px; margin:0 auto 22px; border-radius:12px; overflow:hidden; box-shadow:0 6px 28px rgba(0,95,61,.13); border:2px solid var(--border); transition:border-color .2s; }
.domain-bar:focus-within { border-color:var(--green2); box-shadow:0 6px 32px rgba(0,95,61,.2); }
.domain-bar select { border:none; outline:none; background:var(--gray); color:var(--navy); font-family:inherit; font-size:.88rem; font-weight:700; padding:0 14px; cursor:pointer; border-left:1.5px solid var(--border); border-right:1.5px solid var(--border); flex-shrink:0; }
.domain-bar input { flex:1; border:none; outline:none; padding:15px 18px; font-size:1rem; font-family:inherit; color:var(--navy); background:var(--white); min-width:0; }
.domain-bar input::placeholder { color:#aac4b4; }
.domain-bar button { background:var(--green2); color:var(--white); border:none; padding:0 28px; font-size:.9rem; font-weight:800; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:8px; white-space:nowrap; transition:background .2s; flex-shrink:0; }
.domain-bar button:hover { background:var(--green3); }
.domain-tlds { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.tld-badge { display:inline-flex; align-items:center; gap:7px; background:var(--white); border:1.5px solid var(--border); border-radius:50px; padding:7px 18px; font-size:.8rem; font-weight:700; color:var(--navy); cursor:pointer; transition:all .18s; text-decoration:none; }
.tld-badge:hover { border-color:var(--green2); background:var(--gray); color:var(--green2); }
.tld-badge .tld-price { color:var(--green2); font-size:.72rem; font-weight:800; }
@media(max-width:600px){.domain-bar{flex-direction:column;border-radius:12px}.domain-bar select,.domain-bar button{width:100%;padding:12px 18px;border-right:none;border-top:1.5px solid var(--border)}}

/* -- HOSTING PACKAGES -- */
.packages-section { padding:56px 0 52px; }
.pkg-head { text-align:center; margin-bottom:40px; }
.pkg-eyebrow { display:inline-flex; align-items:center; gap:7px; background:var(--gray); border:1.5px solid var(--border); color:var(--green2); font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:50px; margin-bottom:14px; }
.pkg-head h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--navy); letter-spacing:-.5px; margin-bottom:10px; }
.pkg-head p { color:var(--muted); font-size:.9rem; }
.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.pkg-card { border-radius:20px; border:2px solid var(--border); background:var(--white); padding:36px 30px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; transition:transform .22s, box-shadow .22s; }
.pkg-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.pkg-card.featured { background:var(--green2); border-color:var(--green2); }
.pkg-popular { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--green); color:#002a1a; font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 16px; border-radius:50px; white-space:nowrap; }
.pkg-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:20px; }
.pkg-card:not(.featured) .pkg-icon { background:var(--gray); color:var(--green2); }
.pkg-card.featured .pkg-icon { background:rgba(0,199,88,.2); color:var(--green); }
.pkg-name { font-size:.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.pkg-card:not(.featured) .pkg-name { color:var(--muted); }
.pkg-card.featured .pkg-name { color:rgba(255,255,255,.6); }
.pkg-price { font-size:2.6rem; font-weight:800; letter-spacing:-2px; line-height:1; margin-bottom:4px; }
.pkg-card:not(.featured) .pkg-price { color:var(--navy); }
.pkg-card.featured .pkg-price { color:var(--white); }
.pkg-price span { font-size:1rem; font-weight:600; letter-spacing:0; }
.pkg-period { font-size:.78rem; margin-bottom:24px; }
.pkg-card:not(.featured) .pkg-period { color:var(--muted); }
.pkg-card.featured .pkg-period { color:rgba(255,255,255,.55); }
.pkg-divider { height:1.5px; margin-bottom:22px; width:100%; }
.pkg-card:not(.featured) .pkg-divider { background:var(--border); }
.pkg-card.featured .pkg-divider { background:rgba(255,255,255,.12); }
.pkg-features { list-style:none; display:flex; flex-direction:column; gap:11px; flex:1; margin-bottom:28px; width:100%; }
.pkg-features li { display:flex; align-items:center; justify-content:center; gap:10px; font-size:.85rem; }
.pkg-card:not(.featured) .pkg-features li { color:var(--navy); }
.pkg-card.featured .pkg-features li { color:rgba(255,255,255,.85); }
.pkg-features li i { font-size:.75rem; flex-shrink:0; }
.pkg-card:not(.featured) .pkg-features li i { color:var(--green2); }
.pkg-card.featured .pkg-features li i { color:var(--green); }
.pkg-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:10px; font-weight:800; font-size:.88rem; text-decoration:none; transition:all .2s; width:100%; }
.pkg-card:not(.featured) .pkg-btn { background:var(--gray); color:var(--green2); border:2px solid var(--border); }
.pkg-card:not(.featured) .pkg-btn:hover { background:var(--green2); color:var(--white); border-color:var(--green2); }
.pkg-card.featured .pkg-btn { background:var(--green); color:#002a1a; }
.pkg-card.featured .pkg-btn:hover { background:#3be080; }
@media(max-width:760px){.pkg-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

/* -- STATS CARD -- */

/* -- FEATURES GRID -- */
.features-section { padding:56px 0; background:var(--gray); }
.features-head { text-align:center; margin-bottom:44px; }
.features-eyebrow { display:inline-flex; align-items:center; gap:7px; background:var(--white); border:1.5px solid var(--border); color:var(--green2); font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:50px; margin-bottom:14px; }
.features-head h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--navy); letter-spacing:-.5px; margin-bottom:10px; }
.features-head p { color:var(--muted); font-size:.9rem; max-width:500px; margin:0 auto; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat-card { background:var(--white); border-radius:18px; border:1.5px solid var(--border); padding:24px 20px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; transition:transform .22s, box-shadow .22s; }
.feat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feat-card.feat-dark { background:var(--green2); border-color:var(--green2); }
.feat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.feat-card:not(.feat-dark) .feat-icon { background:var(--gray); color:var(--green2); }
.feat-card.feat-dark .feat-icon { background:rgba(0,199,88,.2); color:var(--green); }
.feat-card h3 { font-size:.9rem; font-weight:800; line-height:1.3; margin:0; }
.feat-card:not(.feat-dark) h3 { color:var(--navy); }
.feat-card.feat-dark h3 { color:var(--white); }
.feat-card p { font-size:.78rem; line-height:1.7; margin:0; }
.feat-card:not(.feat-dark) p { color:var(--muted); }
.feat-card.feat-dark p { color:rgba(255,255,255,.65); }
.feat-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; justify-content:center; }
.feat-pill { display:inline-flex; align-items:center; gap:5px; font-size:.62rem; font-weight:700; padding:3px 10px; border-radius:50px; }
.feat-card:not(.feat-dark) .feat-pill { background:var(--gray); color:var(--green2); border:1px solid var(--border); }
.feat-card.feat-dark .feat-pill { background:rgba(0,199,88,.15); color:var(--green); border:1px solid rgba(0,199,88,.25); }
@media(max-width:760px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.features-grid{grid-template-columns:1fr}}
.feature-card { background:var(--green2); border-radius:20px; padding:0; display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden; min-height:260px; box-shadow:var(--shadow-md); }
.fc-left { padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }
.fc-tag { display:inline-block; background:rgba(0,199,88,.15); color:var(--green); font-size:.65rem; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; padding:5px 12px; border-radius:50px; margin-bottom:16px; border:1px solid rgba(0,199,88,.3); }
.fc-left h2 { font-size:1.65rem; font-weight:800; color:var(--white); letter-spacing:-.5px; line-height:1.25; margin-bottom:14px; }
.fc-left p { color:rgba(255,255,255,.72); font-size:.875rem; line-height:1.8; margin-bottom:22px; }
.fc-btn { display:inline-flex; align-items:center; gap:7px; background:var(--green); color:#002a1a; font-weight:800; font-size:.85rem; padding:11px 24px; border-radius:6px; text-decoration:none; width:fit-content; transition:background .2s; }
.fc-btn:hover { background:#3be080; }
.fc-right { background:linear-gradient(145deg,#004530,#003322); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.fc-right::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 60% 40%,rgba(0,199,88,.18),transparent 65%); }
.fc-illus { font-size:6rem; color:rgba(0,199,88,.5); position:relative; z-index:1; filter:drop-shadow(0 8px 28px rgba(0,199,88,.3)); }
@media(max-width:700px){.feature-card{grid-template-columns:1fr}.fc-right{display:none}}

/* -- STATS -- */
.stats-section { padding:52px 0; }
.stats-card { background:var(--green2); border-radius:24px; overflow:hidden; position:relative; padding:56px 56px 52px; display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:center; box-shadow:var(--shadow-md); }
/* decorative bg dots */
.stats-card::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(0,199,88,.15) 1px,transparent 1px); background-size:32px 32px; opacity:.6; pointer-events:none; }
/* glow orb */
.stats-card::after { content:''; position:absolute; right:-80px; top:-80px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(0,199,88,.2) 0%,transparent 65%); pointer-events:none; }
.stats-left { position:relative; z-index:1; }
.stats-eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(0,199,88,.15); border:1.5px solid rgba(0,199,88,.3); color:var(--green); font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 13px; border-radius:50px; margin-bottom:20px; }
.stats-eyebrow i { font-size:.7rem; }
.stats-left h2 { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800; color:var(--white); line-height:1.3; letter-spacing:-.5px; margin-bottom:18px; }
.stats-left h2 span { color:var(--green); }
.stats-left p { font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.8; max-width:320px; margin-bottom:28px; }
.stats-cta { display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#002a1a; font-weight:800; font-size:.85rem; padding:11px 24px; border-radius:8px; text-decoration:none; transition:background .2s; width:fit-content; }
.stats-cta:hover { background:#3be080; }
/* grid of 4 stat cards */
.stats-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-block { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:24px 22px 20px; backdrop-filter:blur(6px); transition:background .22s, transform .22s; position:relative; overflow:hidden; }
.stat-block:hover { background:rgba(255,255,255,.12); transform:translateY(-3px); }
.stat-block::after { content:''; position:absolute; bottom:-18px; right:-18px; width:80px; height:80px; border-radius:50%; background:rgba(0,199,88,.08); pointer-events:none; }
.sb-icon { width:42px; height:42px; border-radius:12px; background:rgba(0,199,88,.15); border:1px solid rgba(0,199,88,.25); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--green); margin-bottom:14px; box-shadow:0 0 14px rgba(0,199,88,.2); }
.sb-num { font-size:2.6rem; font-weight:800; color:var(--white); letter-spacing:-2px; line-height:1; margin-bottom:6px; }
.sb-num em { color:var(--green); font-style:normal; font-size:2rem; }
.sb-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1.8px; color:rgba(255,255,255,.5); }
@media(max-width:800px){.stats-card{grid-template-columns:1fr;padding:36px 28px;gap:36px}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr}}

/* -- PORTFOLIO -- */
.portfolio-section { padding:60px 0; }
.portfolio-head { text-align:center; margin-bottom:44px; }
.portfolio-eyebrow { display:inline-flex; align-items:center; gap:7px; background:var(--gray); border:1.5px solid var(--border); color:var(--green2); font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:50px; margin-bottom:14px; }
.portfolio-head h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--navy); letter-spacing:-.5px; margin-bottom:10px; }
.portfolio-head p { color:var(--muted); font-size:.9rem; max-width:520px; margin:0 auto; }
/* filter tabs */
.portfolio-filters { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.pf-tab { padding:7px 18px; border-radius:50px; font-size:.78rem; font-weight:700; cursor:pointer; border:1.5px solid var(--border); color:var(--muted); background:var(--white); transition:.2s; }
.pf-tab.active,.pf-tab:hover { background:var(--green2); color:var(--white); border-color:var(--green2); }
/* grid */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.proj-card { border-radius:20px; border:1.5px solid var(--border); background:var(--white); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s, box-shadow .22s; cursor:pointer; }
.proj-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.proj-card.wide { grid-column:span 2; }
.proj-thumb { height:190px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.proj-card.wide .proj-thumb { height:220px; }
.proj-thumb-icon { font-size:4.5rem; position:relative; z-index:1; opacity:.75; }
.proj-thumb::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.04); }
/* floating device mockup bar */
.proj-thumb-bar { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.92); border-radius:50px; padding:5px 14px; display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; color:var(--navy); z-index:2; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.1); }
.proj-thumb-bar i { color:var(--green2); font-size:.65rem; }
.proj-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.proj-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.proj-tag { display:inline-flex; align-items:center; gap:4px; font-size:.6rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:3px 10px; border-radius:50px; }
.proj-tag.t-design { background:#e6f5ee; color:#005f3d; }
.proj-tag.t-hosting { background:#e6f5ee; color:#005f3d; }
.proj-tag.t-cms { background:#c8f0dc; color:#003322; }
.proj-tag.t-domain { background:#f4faf7; color:#527060; }
.proj-tag.t-system { background:#003322; color:#00c758; }
.proj-tag.t-ecomm { background:#005f3d; color:#00c758; }
.proj-name { font-size:1.05rem; font-weight:800; color:var(--navy); margin-bottom:6px; line-height:1.3; }
.proj-desc { font-size:.82rem; color:var(--muted); line-height:1.75; flex:1; margin-bottom:16px; }
.proj-footer { display:flex; align-items:center; justify-content:space-between; border-top:1.5px solid var(--border); padding-top:14px; }
.proj-stars { color:var(--green); font-size:.75rem; letter-spacing:1px; }
.proj-link { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700; color:var(--green2); text-decoration:none; transition:gap .18s; }
.proj-link:hover { gap:9px; }
.portfolio-cta { text-align:center; margin-top:40px; }
.portfolio-cta a { display:inline-flex; align-items:center; gap:9px; background:var(--green2); color:var(--white); font-weight:800; font-size:.9rem; padding:13px 32px; border-radius:10px; text-decoration:none; transition:background .2s; }
.portfolio-cta a:hover { background:var(--green3); }
@media(max-width:800px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}.proj-card.wide{grid-column:span 2}}
@media(max-width:560px){.portfolio-grid{grid-template-columns:1fr}.proj-card.wide{grid-column:span 1}}

/* -- QUOTE SECTION -- */
.quote-section { padding:60px 0; }
.quote-card { position:relative; background:var(--green2); border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1.2fr; box-shadow:0 24px 80px rgba(0,95,61,.35); }
.quote-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 50%,rgba(0,199,88,.12),transparent 65%); pointer-events:none; }
.quote-card::after { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(0,199,88,.08),transparent 70%); pointer-events:none; }
/* LEFT */
.qc-left { padding:52px 44px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; }
.qc-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(0,199,88,.15); border:1px solid rgba(0,199,88,.3); border-radius:50px; padding:5px 14px; font-size:.72rem; font-weight:800; color:var(--green); letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; width:fit-content; }
.qc-left h2 { font-size:2.1rem; font-weight:900; color:var(--white); letter-spacing:-1px; line-height:1.15; margin-bottom:14px; }
.qc-left h2 span { color:var(--green); }
.qc-left p { color:rgba(255,255,255,.65); font-size:.9rem; line-height:1.6; margin-bottom:28px; }
.qc-services { display:grid; grid-template-columns:repeat(3,auto); gap:6px; margin-bottom:28px; width:fit-content; }
.qc-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:50px; padding:5px 11px; font-size:.7rem; font-weight:700; color:rgba(255,255,255,.7); transition:.2s; letter-spacing:.01em; }
.qc-pill i { color:var(--green); font-size:.65rem; }
.qc-cta { display:inline-flex; align-items:center; gap:10px; background:var(--green); color:#002a1a; font-size:.92rem; font-weight:800; padding:16px 32px; border-radius:12px; text-decoration:none; cursor:pointer; border:none; transition:all .25s; box-shadow:0 8px 32px rgba(0,199,88,.35); letter-spacing:-.2px; width:fit-content; }
.qc-cta:hover { background:#00e066; transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,199,88,.5); }
/* RIGHT — mockup */
.qc-right { padding:44px 36px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; position:relative; z-index:1; }
.qc-mockup { width:100%; max-width:360px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; backdrop-filter:blur(8px); }
.qc-mock-bar { background:rgba(0,0,0,.4); padding:10px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(255,255,255,.06); }
.qc-mock-dot { width:10px; height:10px; border-radius:50%; }
.qc-mock-dot:nth-child(1){background:#ff5f56}.qc-mock-dot:nth-child(2){background:#ffbd2e}.qc-mock-dot:nth-child(3){background:#27c93f}
.qc-mock-url { flex:1; background:rgba(255,255,255,.06); border-radius:4px; height:18px; margin-left:10px; }
.qc-mock-body { padding:20px 18px; display:flex; flex-direction:column; gap:12px; }
.qc-mock-hero { height:80px; background:linear-gradient(135deg,rgba(0,95,61,.8),rgba(0,199,88,.2)); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.qc-mock-hero i { font-size:1.8rem; color:rgba(0,199,88,.6); }
.qc-mock-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qc-mock-block { height:36px; background:rgba(255,255,255,.05); border-radius:6px; }
.qc-mock-line { height:10px; border-radius:4px; background:rgba(255,255,255,.06); }
.qc-mock-line.short { width:60%; }
.qc-mock-btn { height:34px; background:rgba(0,199,88,.25); border-radius:8px; border:1px solid rgba(0,199,88,.3); display:flex; align-items:center; justify-content:center; }
.qc-mock-btn span { font-size:.65rem; font-weight:700; color:var(--green); letter-spacing:.04em; }
.qc-stat-row { display:flex; gap:12px; margin-top:4px; }
.qc-stat { flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:10px; text-align:center; }
.qc-stat-num { font-size:1.1rem; font-weight:900; color:var(--green); }
.qc-stat-lbl { font-size:.62rem; color:rgba(255,255,255,.5); font-weight:600; margin-top:2px; }
@media(max-width:768px){.quote-card{grid-template-columns:1fr}.qc-right{display:none}.qc-left{padding:40px 28px}}

/* -- QUOTE MODAL -- */
.qmodal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s; }
.qmodal-overlay.open { opacity:1; pointer-events:all; }
.qmodal { background:#0d1f17; border:1px solid rgba(0,199,88,.2); border-radius:24px; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; box-shadow:0 32px 100px rgba(0,0,0,.6),0 0 60px rgba(0,199,88,.08); position:relative; transform:translateY(30px) scale(.97); transition:transform .35s cubic-bezier(.22,.68,0,1.2); }
.qmodal-overlay.open .qmodal { transform:translateY(0) scale(1); }
.qmodal-head { padding:28px 32px 20px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.qmodal-title { font-size:1.35rem; font-weight:900; color:var(--white); letter-spacing:-.5px; }
.qmodal-title span { color:var(--green); }
.qmodal-sub { font-size:.8rem; color:rgba(255,255,255,.45); margin-top:3px; }
.qmodal-close { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,.6); font-size:1rem; flex-shrink:0; transition:.2s; }
.qmodal-close:hover { background:rgba(255,82,82,.15); border-color:rgba(255,82,82,.3); color:#ff5252; }
/* progress */
.qmodal-progress { padding:18px 32px 0; }
.qprog-bar { display:flex; align-items:center; gap:0; }
.qprog-step { display:flex; align-items:center; flex:1; }
.qprog-dot { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:rgba(255,255,255,.35); transition:.3s; flex-shrink:0; }
.qprog-dot.done { background:var(--green2); border-color:var(--green); color:var(--green); }
.qprog-dot.active { background:var(--green); border-color:var(--green); color:#002a1a; box-shadow:0 0 12px rgba(0,199,88,.5); }
.qprog-line { flex:1; height:2px; background:rgba(255,255,255,.08); transition:.3s; }
.qprog-line.done { background:var(--green); }
.qprog-labels { display:flex; justify-content:space-between; margin-top:6px; }
.qprog-labels span { font-size:.65rem; font-weight:700; color:rgba(255,255,255,.35); letter-spacing:.03em; }
.qprog-labels span.active { color:var(--green); }
/* body */
.qmodal-body { padding:28px 32px 32px; }
.qstep { display:none; animation:qfadeIn .3s ease; }
.qstep.active { display:block; }
@keyframes qfadeIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.qstep-label { font-size:.72rem; font-weight:800; color:var(--green); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.qstep-title { font-size:1.1rem; font-weight:800; color:var(--white); letter-spacing:-.4px; margin-bottom:20px; }
/* TYPE CARDS */
.qtype-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px; }
.qtype-card { background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.08); border-radius:14px; padding:18px 16px; cursor:pointer; transition:.2s; text-align:left; position:relative; overflow:hidden; }
.qtype-card:hover { border-color:rgba(0,199,88,.4); background:rgba(0,199,88,.06); }
.qtype-card.sel { border-color:var(--green); background:rgba(0,199,88,.1); box-shadow:0 0 0 3px rgba(0,199,88,.12); }
.qtype-card i.qtype-ico { font-size:1.4rem; color:var(--green); margin-bottom:10px; display:block; }
.qtype-card h4 { font-size:.85rem; font-weight:800; color:var(--white); margin-bottom:3px; }
.qtype-price { display:inline-block; background:rgba(0,199,88,.15); border:1px solid rgba(0,199,88,.3); border-radius:50px; padding:2px 10px; font-size:.68rem; font-weight:800; color:var(--green); letter-spacing:.02em; margin-bottom:8px; }
.qtype-card p { font-size:.69rem; color:rgba(255,255,255,.45); line-height:1.45; margin-bottom:8px; }
.qtype-includes { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3px; }
.qtype-includes li { font-size:.67rem; color:rgba(255,255,255,.55); display:flex; align-items:flex-start; gap:5px; }
.qtype-includes li i { color:var(--green); font-size:.6rem; margin-top:2px; flex-shrink:0; }
.qtype-card.sel .qtype-includes li { color:rgba(255,255,255,.75); }
.qtype-sel-check { position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; background:var(--green); display:none; align-items:center; justify-content:center; }
.qtype-sel-check i { font-size:.6rem; color:#002a1a; margin:0; width:auto; }
.qtype-card.sel .qtype-sel-check { display:flex; }
/* FEATURES */
.qfeat-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.qfeat-pill { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1); border-radius:50px; padding:7px 14px; font-size:.75rem; font-weight:600; color:rgba(255,255,255,.65); cursor:pointer; transition:.2s; }
.qfeat-pill i { font-size:.7rem; }
.qfeat-pill:hover { border-color:rgba(0,199,88,.4); color:var(--white); }
.qfeat-pill.sel { background:rgba(0,199,88,.12); border-color:var(--green); color:var(--green); }
/* BUDGET */
.qbudget-row { display:flex; gap:10px; margin-bottom:20px; }
.qbudget-btn { flex:1; background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.08); border-radius:10px; padding:12px 10px; text-align:center; cursor:pointer; transition:.2s; font-size:.78rem; font-weight:700; color:rgba(255,255,255,.65); }
.qbudget-btn:hover { border-color:rgba(0,199,88,.4); color:var(--white); }
.qbudget-btn.sel { border-color:var(--green); background:rgba(0,199,88,.1); color:var(--green); }
.qbudget-btn .bval { display:block; font-size:1rem; font-weight:900; color:var(--green); margin-bottom:2px; }
.qbudget-btn .blbl { display:block; font-size:.72rem; }
.qbudget-btn.sel .bval { color:var(--green); }
/* TIMELINE */
.qtimeline-row { display:flex; gap:8px; margin-bottom:24px; }
.qtl-btn { flex:1; background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 6px; text-align:center; cursor:pointer; transition:.2s; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.6); }
.qtl-btn:hover { border-color:rgba(0,199,88,.35); color:var(--white); }
.qtl-btn.sel { border-color:var(--green); background:rgba(0,199,88,.1); color:var(--green); }
/* FORM */
.qfield { margin-bottom:16px; }
.qfield label { display:block; font-size:.73rem; font-weight:700; color:rgba(255,255,255,.55); letter-spacing:.03em; margin-bottom:6px; text-transform:uppercase; }
.qfield input,.qfield textarea,.qfield select { width:100%; background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1); border-radius:10px; padding:13px 16px; color:var(--white); font-size:.88rem; font-family:inherit; outline:none; transition:.2s; box-sizing:border-box; }
.qfield input:focus,.qfield textarea:focus,.qfield select:focus { border-color:var(--green); background:rgba(0,199,88,.06); box-shadow:0 0 0 3px rgba(0,199,88,.1); }
.qfield textarea { resize:vertical; min-height:80px; }
.qfield-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* FOOTER BUTTONS */
.qmodal-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.qbtn-back { background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.1); border-radius:10px; padding:12px 22px; color:rgba(255,255,255,.6); font-size:.82rem; font-weight:700; cursor:pointer; font-family:inherit; transition:.2s; }
.qbtn-back:hover { background:rgba(255,255,255,.1); color:var(--white); }
.qbtn-next { background:var(--green); border:none; border-radius:10px; padding:13px 30px; color:#002a1a; font-size:.88rem; font-weight:800; cursor:pointer; font-family:inherit; transition:.2s; box-shadow:0 6px 24px rgba(0,199,88,.3); display:flex; align-items:center; gap:8px; }
.qbtn-next:hover { background:#00e066; transform:translateY(-1px); box-shadow:0 8px 30px rgba(0,199,88,.45); }
/* SUCCESS */
.qsuccess { text-align:center; padding:20px 0; }
.qsuccess-icon { width:72px; height:72px; border-radius:50%; background:rgba(0,199,88,.15); border:2px solid rgba(0,199,88,.3); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; animation:popIn .4s cubic-bezier(.22,.68,0,1.4); }
@keyframes popIn { from{scale:0;opacity:0} to{scale:1;opacity:1} }
.qsuccess-icon i { font-size:2rem; color:var(--green); }
.qsuccess h3 { font-size:1.4rem; font-weight:900; color:var(--white); margin-bottom:8px; }
.qsuccess p { color:rgba(255,255,255,.55); font-size:.88rem; line-height:1.6; }
@media(max-width:560px){.qtype-grid{grid-template-columns:1fr 1fr}.qbudget-row{flex-wrap:wrap}.qfield-row{grid-template-columns:1fr}.qmodal-head{padding:20px}.qmodal-body{padding:18px 20px 24px}.qmodal-progress{padding:14px 20px 0}}

/* -- SIGN-IN MODAL -- */
.si-overlay { position:fixed; inset:0; background:rgba(0,40,25,.35); backdrop-filter:blur(10px); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s; }
.si-overlay.open { opacity:1; pointer-events:all; }
.si-modal { background:#fff; border:1px solid #d4ede0; border-radius:20px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,60,35,.12), 0 2px 8px rgba(0,0,0,.06); position:relative; overflow:hidden; transform:translateY(20px) scale(.97); transition:transform .35s cubic-bezier(.22,.68,0,1.2); }
.si-overlay.open .si-modal { transform:translateY(0) scale(1); }
.si-glow { display:none; }
.si-glow2 { display:none; }
.si-modal-top { background:linear-gradient(135deg,#005f3d 0%,#007a4d 100%); padding:28px 28px 24px; }
.si-head { padding:0; position:relative; z-index:1; }
.si-logo-wrap { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.si-logo-icon { width:34px; height:34px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.82rem; }
.si-logo-name { font-size:.95rem; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:-.2px; }
.si-logo-name span { color:#fff; }
.si-title { font-size:1.4rem; font-weight:800; color:#fff; letter-spacing:-.5px; line-height:1.2; }
.si-title span { color:#00c758; }
.si-sub { font-size:.79rem; color:rgba(255,255,255,.6); margin-top:5px; }
.si-close { position:absolute; top:-4px; right:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:7px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,.7); font-size:.8rem; transition:.18s; z-index:2; }
.si-close:hover { background:rgba(255,255,255,.22); color:#fff; }
.si-body { padding:24px 28px 28px; position:relative; z-index:1; }
.si-socials { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; }
.si-soc-btn { display:flex; align-items:center; justify-content:center; gap:7px; background:#f7faf8; border:1.5px solid #d4ede0; border-radius:9px; padding:9px 12px; color:#333; font-size:.79rem; font-weight:600; cursor:pointer; transition:all .18s; font-family:inherit; }
.si-soc-btn:hover { background:#edf7f2; border-color:#a8d9be; color:#005f3d; }
.si-soc-btn i { font-size:.92rem; }
.si-divider { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.si-divider::before, .si-divider::after { content:''; flex:1; height:1px; background:#e8f2ec; }
.si-divider span { font-size:.71rem; color:#8aab97; white-space:nowrap; }
.si-field { margin-bottom:13px; }
.si-label { display:block; font-size:.72rem; font-weight:700; color:#527060; letter-spacing:.3px; text-transform:uppercase; margin-bottom:6px; }
.si-input-wrap { position:relative; }
.si-input { width:100%; background:#f7faf8; border:1.5px solid #cce4d6; border-radius:9px; padding:10px 40px 10px 13px; color:#111; font-size:.86rem; font-family:inherit; outline:none; transition:border .18s, box-shadow .18s; box-sizing:border-box; }
.si-input::placeholder { color:#aac5b5; }
.si-input:focus { border-color:#005f3d; box-shadow:0 0 0 3px rgba(0,95,61,.08); background:#fff; }
.si-input-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#aac5b5; font-size:.8rem; pointer-events:none; }
.si-toggle-pw { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#aac5b5; font-size:.8rem; cursor:pointer; background:none; border:none; padding:0; transition:color .18s; }
.si-toggle-pw:hover { color:#005f3d; }
.si-forgot { text-align:right; margin-top:-4px; margin-bottom:16px; }
.si-forgot a { font-size:.74rem; color:#527060; text-decoration:none; transition:color .18s; }
.si-forgot a:hover { color:#005f3d; }
.si-btn { width:100%; background:#005f3d; color:#fff; font-weight:700; font-size:.9rem; padding:12px; border-radius:9px; border:none; cursor:pointer; font-family:inherit; letter-spacing:-.1px; transition:all .18s; display:flex; align-items:center; justify-content:center; gap:8px; }
.si-btn:hover { background:#004530; }
.si-btn:active { transform:scale(.99); }
.si-footer { text-align:center; margin-top:16px; font-size:.78rem; color:#8aab97; }
.si-footer a { color:#005f3d; text-decoration:none; font-weight:600; }
.si-footer a:hover { text-decoration:underline; }
.nav-right button.sign-in { background:transparent; color:var(--green2); font-weight:700; font-size:.82rem; padding:8px 18px; border-radius:6px; border:1.5px solid var(--green2); cursor:pointer; font-family:inherit; transition:all .2s; }
.nav-right button.sign-in:hover { background:var(--green2); color:var(--white); }

/* -- FOOTER (preserved) -- */
.footer {
  background: linear-gradient(160deg, #004530 0%, #005f3d 100%);
  color: white;
  border-radius: 48px 48px 0 0;
  padding: 64px 0 32px;
  margin-top: 40px;
  position: relative; overflow: hidden;
}
.footer::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,199,88,.18), transparent 70%);
  pointer-events: none;
}
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 44px; }
.footer-col p { margin: 14px 0; opacity: .88; font-size: .9rem; line-height: 1.8; }
.footer-col i { color: #00c758; margin-right: 10px; width: 18px; }
.social-icons a i { margin-right: 0; width: auto; color: inherit; }
.footer-col h4 { font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; opacity: .7; }
.footer-svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }
.footer-svc-grid a { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.8); text-decoration:none; font-size:.78rem; font-weight:500; padding:5px 0; transition:.2s; white-space:nowrap; }
.footer-svc-grid a:hover { color:#00c758; }
.footer-svc-grid a:hover .svc-icon-badge { background:#00c758; }
.footer-svc-grid a:hover .svc-icon-badge i { color:#002a1a; }
.svc-icon-badge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:rgba(0,199,88,.15); border:1px solid rgba(0,199,88,.25); flex-shrink:0; transition:.2s; }
.svc-icon-badge i { color:#00c758; font-size:.65rem; margin:0; width:auto; }
.footer-logo { font-size: 2rem; font-weight: 800; color: white; letter-spacing: -0.5px; }
.footer-logo span { color: #00c758; }
.social-icons { display: flex; gap: 12px; margin-top: 18px; }
.social-icons a {
  color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .22s; text-decoration: none; font-size: .9rem; line-height: 1; flex-shrink: 0;
}
.social-icons a:hover { background: #00c758; color: #002a1a; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,199,88,.3); }
.copyright {
  text-align: center; margin-top: 52px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: .82rem;
}
.copyright span { color: #00c758; }

/* -- BACK TO TOP -- */
.back-top {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:44px; height:44px; border-radius:50%;
  background:#005f3d; color:white;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:1rem;
  box-shadow:0 8px 24px rgba(0,95,61,.35);
  opacity:0; transform:translateY(16px);
  transition:opacity .3s, transform .3s;
}
.back-top.show { opacity:1; transform:none; }
.back-top:hover { background:#1a7a52; transform:translateY(-3px); }

/* -- SECTION SHARED -- */
.section-title-sm { font-size:1.25rem; font-weight:800; color:var(--navy); margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.section-title-sm i { color:var(--green2); font-size:1rem; }
.section-sub { color:var(--muted); font-size:.9rem; margin-bottom:28px; }
.divider { height:1.5px; background:var(--border); margin:0 0 0; }
/* rc plan icon */
.rc-plan-wrap { display:flex; align-items:center; gap:8px; }
.rc-plan-wrap i { color:var(--green); font-size:.85rem; }

/* -- DOMAINS PAGE -- */

/* BREADCRUMB */
.breadcrumb { padding:14px 0; border-bottom:1px solid var(--border); background:var(--white); }
.breadcrumb-inner { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted); }
.breadcrumb-inner a { color:var(--green2); text-decoration:none; font-weight:600; }
.breadcrumb-inner a:hover { text-decoration:underline; }
.breadcrumb-inner i { font-size:.6rem; }

/* DOMAIN HERO */
.dom-hero { background:var(--green2); padding:64px 0 56px; position:relative; overflow:hidden; border-radius:0 0 64px 64px; }
.dom-hero::before { content:''; position:absolute; top:-120px; right:-100px; width:600px; height:500px; border-radius:38% 62% 55% 45%/45% 38% 62% 55%; background:radial-gradient(circle,rgba(0,199,88,.22) 0%,transparent 65%); pointer-events:none; }
.dom-hero::after { content:''; position:absolute; top:-120px; left:-100px; width:600px; height:500px; border-radius:62% 38% 45% 55%/55% 62% 38% 45%; background:radial-gradient(circle,rgba(0,199,88,.22) 0%,transparent 65%); pointer-events:none; }
.dom-hero-bg { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(0,199,88,.16) 1px,transparent 1px); background-size:38px 38px; opacity:.5; }
.dom-hero-inner { position:relative; z-index:1; text-align:center; }
.dom-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(0,199,88,.15); border:1px solid rgba(0,199,88,.3); border-radius:50px; padding:6px 18px; font-size:.7rem; font-weight:800; color:var(--green); letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; }
.dom-hero-inner h1 { font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; color:#fff; letter-spacing:-1.5px; line-height:1.12; margin-bottom:14px; }
.dom-hero-inner h1 span { color:var(--green); }
.dom-hero-inner p { font-size:1rem; color:rgba(255,255,255,.7); max-width:520px; margin:0 auto 36px; }

/* DOMAIN SEARCH BAR */
.dom-search-wrap { max-width:720px; margin:0 auto; }
.dom-search-bar { display:flex; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.25); border:2px solid rgba(0,199,88,.3); }
.dom-search-bar input { flex:1; border:none; outline:none; padding:18px 22px; font-size:1rem; font-family:inherit; color:var(--navy); background:transparent; min-width:0; }
.dom-search-bar input::placeholder { color:#aac4b4; }
.dom-search-bar select { border:none; outline:none; background:#f7faf8; color:var(--navy); font-family:inherit; font-size:.88rem; font-weight:700; padding:0 16px; cursor:pointer; border-left:2px solid var(--border); flex-shrink:0; }
.dom-search-bar button { background:var(--green); color:#002a1a; border:none; padding:0 32px; font-size:.92rem; font-weight:800; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:9px; white-space:nowrap; flex-shrink:0; transition:background .2s; }
.dom-search-bar button:hover { background:#00e066; }
.dom-search-hint { text-align:center; margin-top:14px; font-size:.78rem; color:rgba(255,255,255,.5); }
.dom-search-hint span { color:var(--green); font-weight:700; }
@media(max-width:600px){ .dom-search-bar { flex-direction:column; } .dom-search-bar select,.dom-search-bar button { width:100%; padding:14px 22px; border-left:none; border-top:2px solid var(--border); } }

/* POPULAR TLDs STRIP */
.tld-strip { padding:44px 0 36px; border-bottom:1.5px solid var(--border); background:var(--white); }
.tld-strip-head { text-align:center; margin-bottom:28px; }
.tld-strip-head h2 { font-size:1.5rem; font-weight:800; color:var(--navy); letter-spacing:-.4px; margin-bottom:6px; }
.tld-strip-head p { color:var(--muted); font-size:.88rem; }
.tld-cards { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
.tld-card { border:1.5px solid var(--border); border-radius:14px; padding:20px 10px 16px; text-align:center; background:var(--white); cursor:pointer; transition:all .2s; text-decoration:none; display:block; }
.tld-card:hover { border-color:var(--green2); background:var(--gray); transform:translateY(-3px); box-shadow:var(--shadow); }
.tld-card.featured { border-color:var(--green2); background:var(--gray); }
.tld-card .tld-ext { font-size:1.3rem; font-weight:900; color:var(--green2); letter-spacing:-.5px; margin-bottom:6px; }
.tld-card.featured .tld-ext { color:var(--green2); }
.tld-card .tld-prc { font-size:.82rem; font-weight:800; color:var(--navy); margin-bottom:3px; }
.tld-card .tld-per { font-size:.68rem; color:var(--muted); }
.tld-card .tld-badge-hot { display:inline-block; background:var(--green); color:#002a1a; font-size:.55rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:50px; margin-bottom:7px; }
@media(max-width:900px){ .tld-cards { grid-template-columns:repeat(4,1fr); } }
@media(max-width:560px){ .tld-cards { grid-template-columns:repeat(2,1fr); } }

/* PRICING TABLE */
.pricing-section { padding:64px 0; background:var(--gray); }
.pricing-head { text-align:center; margin-bottom:44px; }
.pricing-eyebrow { display:inline-flex; align-items:center; gap:7px; background:var(--white); border:1.5px solid var(--border); color:var(--green2); font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:50px; margin-bottom:14px; }
.pricing-head h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--navy); letter-spacing:-.5px; margin-bottom:10px; }
.pricing-head p { color:var(--muted); font-size:.9rem; max-width:500px; margin:0 auto; }
.dom-table-wrap { background:var(--white); border-radius:20px; border:1.5px solid var(--border); overflow:hidden; box-shadow:var(--shadow); }
.dom-table { width:100%; border-collapse:collapse; }
.dom-table thead { background:var(--green2); }
.dom-table thead th { padding:14px 20px; text-align:left; font-size:.72rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.8); }
.dom-table thead th:first-child { color:#fff; }
.dom-table thead th.center { text-align:center; }
.dom-table tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
.dom-table tbody tr:last-child { border-bottom:none; }
.dom-table tbody tr:hover { background:var(--gray); }
.dom-table tbody td { padding:16px 20px; font-size:.88rem; color:var(--navy); }
.dom-table tbody td.center { text-align:center; }
.dom-table .dom-ext { font-size:1rem; font-weight:900; color:var(--green2); }
.dom-table .dom-desc { font-size:.75rem; color:var(--muted); margin-top:2px; }
.dom-price-val { font-weight:800; color:var(--navy); }
.dom-price-renew { font-size:.72rem; color:var(--muted); margin-top:2px; }
.dom-tag { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 8px; border-radius:50px; }
.dom-tag.popular { background:#e6f5ee; color:var(--green2); }
.dom-tag.business { background:#003322; color:var(--green); }
.dom-tag.premium { background:#fff3cd; color:#856404; }
.dom-tag.global { background:#e8f4fd; color:#0a58ca; }
.dom-check { color:var(--green2); font-size:.85rem; }
.dom-dash { color:#ccc; font-size:.85rem; }
.dom-btn-sm { display:inline-flex; align-items:center; gap:5px; background:var(--green2); color:#fff; font-size:.72rem; font-weight:700; padding:6px 14px; border-radius:6px; text-decoration:none; transition:background .2s; white-space:nowrap; }
.dom-btn-sm:hover { background:var(--green3); }
@media(max-width:760px){ .dom-table-wrap { overflow-x:auto; } .dom-table { min-width:700px; } }

/* DOMAIN FEATURES GRID */
.dom-features { padding:64px 0; }
.dom-features-head { text-align:center; margin-bottom:44px; }
.dom-feats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dom-feat { background:var(--white); border:1.5px solid var(--border); border-radius:18px; padding:28px 24px; display:flex; flex-direction:column; gap:12px; transition:transform .2s, box-shadow .2s; }
.dom-feat:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.dom-feat-icon { width:48px; height:48px; border-radius:13px; background:var(--gray); color:var(--green2); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.dom-feat h3 { font-size:.95rem; font-weight:800; color:var(--navy); }
.dom-feat p { font-size:.82rem; color:var(--muted); line-height:1.75; }
@media(max-width:760px){ .dom-feats-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .dom-feats-grid { grid-template-columns:1fr; } }

/* TRANSFER SECTION */
.transfer-section { padding:56px 0; background:var(--gray); }
.transfer-card { background:var(--green2); border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; position:relative; }
.transfer-card::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(0,199,88,.13) 1px,transparent 1px); background-size:30px 30px; }
.transfer-left { padding:52px 48px; position:relative; z-index:1; }
.transfer-left .t-eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(0,199,88,.15); border:1px solid rgba(0,199,88,.3); color:var(--green); font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 13px; border-radius:50px; margin-bottom:18px; }
.transfer-left h2 { font-size:1.8rem; font-weight:900; color:#fff; letter-spacing:-.7px; line-height:1.2; margin-bottom:14px; }
.transfer-left h2 span { color:var(--green); }
.transfer-left p { color:rgba(255,255,255,.65); font-size:.9rem; line-height:1.8; margin-bottom:28px; }
.transfer-steps { display:flex; flex-direction:column; gap:14px; margin-bottom:32px; }
.t-step { display:flex; align-items:flex-start; gap:14px; }
.t-step-num { width:32px; height:32px; border-radius:50%; background:rgba(0,199,88,.2); border:1px solid rgba(0,199,88,.4); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:900; color:var(--green); flex-shrink:0; }
.t-step-txt h4 { font-size:.85rem; font-weight:800; color:#fff; margin-bottom:2px; }
.t-step-txt p { font-size:.78rem; color:rgba(255,255,255,.55); line-height:1.5; }
.t-cta { display:inline-flex; align-items:center; gap:9px; background:var(--green); color:#002a1a; font-weight:800; font-size:.9rem; padding:14px 28px; border-radius:10px; text-decoration:none; transition:all .2s; }
.t-cta:hover { background:#00e066; transform:translateY(-2px); }
.transfer-right { display:flex; align-items:center; justify-content:center; padding:40px; position:relative; z-index:1; }
.transfer-visual { background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:28px; width:100%; max-width:320px; backdrop-filter:blur(8px); }
.tv-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.07); }
.tv-row:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.tv-label { font-size:.72rem; color:rgba(255,255,255,.5); font-weight:600; }
.tv-val { font-size:.82rem; font-weight:700; color:#fff; }
.tv-val.green { color:var(--green); }
.tv-icon { width:28px; height:28px; border-radius:7px; background:rgba(0,199,88,.15); display:flex; align-items:center; justify-content:center; color:var(--green); font-size:.72rem; }
@media(max-width:768px){ .transfer-card { grid-template-columns:1fr; } .transfer-right { display:none; } .transfer-left { padding:36px 28px; } }

/* FAQ */
.faq-section { padding:64px 0; }
.faq-head { text-align:center; margin-bottom:44px; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:960px; margin:0 auto; }
.faq-item { border:1.5px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; cursor:pointer; background:var(--white); transition:background .18s; user-select:none; }
.faq-q:hover { background:var(--gray); }
.faq-q h4 { font-size:.88rem; font-weight:700; color:var(--navy); line-height:1.4; }
.faq-q i { color:var(--green2); font-size:.8rem; flex-shrink:0; transition:transform .25s; }
.faq-item.open .faq-q { background:var(--gray); }
.faq-item.open .faq-q i { transform:rotate(45deg); }
.faq-a { display:none; padding:0 22px 18px; font-size:.82rem; color:var(--muted); line-height:1.8; border-top:1px solid var(--border); background:var(--white); }
.faq-item.open .faq-a { display:block; }
@media(max-width:680px){ .faq-grid { grid-template-columns:1fr; } }

/* DOMAIN CTA BANNER */
.dom-cta-section { padding:56px 0 80px; }
.dom-cta-card { background:var(--navy); border-radius:24px; padding:56px 48px; text-align:center; position:relative; overflow:hidden; }
.dom-cta-card::before { content:''; position:absolute; top:-80px; right:-80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(0,199,88,.15),transparent 70%); }
.dom-cta-card::after { content:''; position:absolute; bottom:-60px; left:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(0,199,88,.1),transparent 70%); }
.dom-cta-card h2 { font-size:2rem; font-weight:900; color:#fff; letter-spacing:-.6px; margin-bottom:12px; position:relative; z-index:1; }
.dom-cta-card h2 span { color:var(--green); }
.dom-cta-card p { color:rgba(255,255,255,.55); font-size:.9rem; margin-bottom:28px; position:relative; z-index:1; }
.dom-cta-btns { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }
.dom-cta-btns a.primary { background:var(--green); color:#002a1a; font-weight:800; font-size:.9rem; padding:14px 30px; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .2s; }
.dom-cta-btns a.primary:hover { background:#00e066; transform:translateY(-2px); }
.dom-cta-btns a.secondary { background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); font-weight:700; font-size:.9rem; padding:14px 30px; border-radius:10px; text-decoration:none; border:1px solid rgba(255,255,255,.15); display:inline-flex; align-items:center; gap:8px; transition:all .2s; }
.dom-cta-btns a.secondary:hover { background:rgba(255,255,255,.14); color:#fff; }

/* -- DOMAIN SEARCH RESULTS PANEL -- */
#srPanel { position:relative; z-index:10; padding:0 20px 48px; margin-top:0; }
.sr-panel-card { max-width:720px; margin:0 auto; background:#fff; border-radius:0 0 14px 14px; box-shadow:0 20px 56px rgba(0,0,0,.18); border:2px solid rgba(0,199,88,.3); border-top:none; padding:22px 26px 26px; animation:srFadeIn .3s ease; }
/* Connected state — hero flattens, search bar merges into panel */
.hero.sr-active { border-radius:0 !important; padding-bottom:0 !important; }
.dom-search-wrap.sr-active .dom-search-bar { border-radius:12px 12px 0 0; border-bottom:none; box-shadow:none; }
.dom-search-wrap.sr-active .dom-search-hint { display:none; }
.sr-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #eef2ed; }
.sr-panel-title { font-size:.68rem; font-weight:800; color:#999; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:7px; }
.sr-panel-close { background:transparent; border:1px solid #ddd; color:#888; font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:50px; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; transition:all .2s; }
.sr-panel-close:hover { border-color:#aaa; color:#333; }
/* -- DOMAIN SEARCH RESULTS -- */
.sr-loading { display:flex; align-items:center; gap:10px; color:#555; font-size:.88rem; background:#f5f8f6; border-radius:12px; padding:14px 20px; }
.sr-spinner { width:18px; height:18px; border:2px solid #ddd; border-top-color:var(--green); border-radius:50%; animation:srSpin .7s linear infinite; flex-shrink:0; }
@keyframes srSpin { to{transform:rotate(360deg)} }
.sr-error { color:#c0392b; font-size:.82rem; background:#fef5f5; border:1px solid #f5c6c6; border-radius:10px; padding:10px 16px; display:flex; align-items:center; gap:8px; }
.sr-wrap { animation:srFadeIn .35s ease; }
@keyframes srFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* Main result row */
.sr-main { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-radius:12px; padding:16px 20px; margin-bottom:10px; }
.sr-main-available { background:#f0faf5; border:1.5px solid rgba(0,199,88,.35); }
.sr-main-taken { background:#fff5f5; border:1.5px solid rgba(220,53,69,.25); }
.sr-main-unknown { background:#fffbf0; border:1.5px solid rgba(200,160,0,.25); }
.sr-main-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sr-domain-full { font-size:1.1rem; font-weight:800; color:#111; letter-spacing:-.3px; }
.sr-badge { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:800; padding:4px 12px; border-radius:50px; }
.sr-badge.available { background:rgba(0,199,88,.15); color:var(--green2); border:1px solid rgba(0,199,88,.35); }
.sr-badge.taken { background:#fde8e8; color:#c0392b; border:1px solid #f5b8b8; }
.sr-badge.unknown { background:#fff3cd; color:#856404; border:1px solid #ffc107; }
.sr-main-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sr-renew { font-size:.72rem; color:#999; }
.sr-btn-register { display:inline-flex; align-items:center; gap:7px; background:var(--green); color:#002a1a; font-weight:800; font-size:.84rem; padding:10px 22px; border-radius:9px; text-decoration:none; transition:all .2s; white-space:nowrap; }
.sr-btn-register:hover { background:#00e066; transform:translateY(-1px); }
.sr-btn-taken { display:inline-flex; align-items:center; gap:7px; background:#f0f0f0; color:#aaa; font-weight:700; font-size:.84rem; padding:10px 22px; border-radius:9px; cursor:default; white-space:nowrap; }
/* Alternative TLDs */
.sr-alts { background:#f8faf9; border:1px solid #e8f0eb; border-radius:12px; padding:14px 18px; }
.sr-alts-label { font-size:.68rem; font-weight:800; color:#aaa; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.sr-alt { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #edf2ee; }
.sr-alt:last-child { border-bottom:none; }
.sr-alt-taken { opacity:.5; }
.sr-alt-domain { flex:1; font-size:.88rem; color:#555; }
.sr-alt-domain strong { color:#111; }
.sr-alt-price { font-size:.78rem; font-weight:700; color:var(--green2); margin-right:6px; }
.sr-alt-btn { background:rgba(0,199,88,.1); border:1px solid rgba(0,199,88,.3); color:var(--green2); font-size:.72rem; font-weight:800; padding:4px 14px; border-radius:50px; text-decoration:none; transition:all .2s; white-space:nowrap; }
.sr-alt-btn:hover { background:rgba(0,199,88,.2); }
.sr-alt-na { font-size:.72rem; color:#ccc; }

/* -- CURRENCY PICKER -- */
.nav-currency { position:relative; }
.currency-toggle {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:1.5px solid var(--border);
  color:var(--navy); font-family:inherit; font-size:.78rem; font-weight:700;
  padding:6px 10px; border-radius:8px; cursor:pointer;
  transition:background .18s, border-color .18s;
  white-space:nowrap;
}
.currency-toggle:hover { background:var(--gray); border-color:var(--green2); }
.currency-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:#fff; border:1.5px solid var(--border); border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.12); min-width:190px; z-index:9999;
  overflow:hidden; padding:6px;
}
.currency-dropdown.open { display:block; animation:cdFadeIn .15s ease; }
@keyframes cdFadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.currency-dropdown button {
  display:flex; align-items:center; gap:9px; width:100%;
  background:transparent; border:none; border-radius:8px;
  font-family:inherit; font-size:.82rem; padding:9px 10px;
  cursor:pointer; text-align:left; color:var(--navy);
  transition:background .15s;
}
.currency-dropdown button:hover,
.currency-dropdown button.active { background:var(--gray); }
.currency-dropdown button.active .cd-code { color:var(--green2); }
.cd-flag { font-size:.95rem; flex-shrink:0; }
.cd-code { font-weight:800; font-size:.8rem; min-width:32px; color:var(--navy); }
.cd-name { font-size:.72rem; color:var(--muted); }
.cd-rate-note {
  font-size:.62rem; color:#bbb; text-align:center;
  padding:4px 8px 2px; border-top:1px solid var(--border); margin-top:4px;
}