:root {
  --bg: #090a0d;
  --panel: #111318;
  --panel-light: #171a20;
  --text: #f4f3ef;
  --muted: #a1a4ad;
  --line: rgba(255,255,255,.12);
  --orange: #ff6a1a;
  --yellow: #ffd338;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.site-shell { overflow: hidden; }
.site-header { width: min(var(--max), calc(100% - 48px)); height: 88px; margin: 0 auto; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--line); position:relative; z-index:5; }
.brand { display:inline-flex; align-items:center; gap:12px; }
.brand-mark { width:37px; height:27px; position:relative; display:inline-block; }
.brand-mark span { position:absolute; width:24px; height:24px; top:1px; border-radius:50%; }
.brand-mark span:first-child { left:0; background:var(--orange); }
.brand-mark span:last-child { left:13px; background:var(--yellow); mix-blend-mode:screen; }
.brand-name { font:700 22px 'Space Grotesk',sans-serif; letter-spacing:-1.2px; }
.brand-name span { color:#ffc52b; }
.main-nav { display:flex; align-items:center; gap:34px; font-size:13px; color:#d4d4d6; }
.main-nav a:not(.nav-cta):hover, .footer-links a:hover { color:var(--yellow); }
.nav-cta { border:1px solid rgba(255,255,255,.22); border-radius:5px; padding:11px 15px; color:white; }
.nav-cta span { color:var(--yellow); margin-left:9px; }
.menu-toggle { display:none; background:transparent; border:0; }
.section { width:min(var(--max), calc(100% - 48px)); margin:0 auto; }
.hero { min-height:660px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; position:relative; padding-top:45px; padding-bottom:100px; }
.hero-copy { position:relative; z-index:2; padding-bottom:15px; }
.eyebrow { color:#c7c7cb; font-size:10px; font-weight:700; letter-spacing:2.2px; margin:0 0 25px; }
.eyebrow span:not(.status-dot) { color:#777b84; margin-left:7px; }
.status-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--yellow); box-shadow:0 0 14px rgba(255,211,56,.55); margin-right:8px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:'Space Grotesk',sans-serif; }
h1 { font-size:clamp(45px,6vw,76px); line-height:1.04; letter-spacing:-4.5px; margin:0 0 25px; font-weight:600; }
.gradient-text { background:linear-gradient(100deg,var(--orange) 3%,#ff9a24 47%,var(--yellow) 100%); color:transparent; -webkit-background-clip:text; background-clip:text; }
.hero-lede { max-width:470px; color:#aeb0b8; font-size:16px; line-height:1.8; margin-bottom:32px; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.button { border:0; display:inline-flex; justify-content:center; align-items:center; gap:24px; min-height:49px; padding:0 20px; border-radius:5px; font-size:12px; font-weight:700; cursor:pointer; transition:transform .2s, filter .2s; }
.button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.button-primary { color:#101010; background:linear-gradient(110deg,var(--orange),var(--yellow)); }
.button span { font-size:18px; }
.text-link { color:#e1e1e4; font-size:12px; }
.text-link span { color:var(--yellow); margin-left:8px; }
.hero-note { display:flex; align-items:center; gap:12px; color:#777b84; font-size:10px; margin-top:56px; }
.note-line { width:29px; height:1px; background:var(--orange); }
.hero-art { height:445px; position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.hero-art:before { content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(255,121,24,.12),rgba(255,211,56,.035) 48%,transparent 72%); filter:blur(14px); }
.sun { position:absolute; width:220px; height:220px; border-radius:50%; filter:drop-shadow(0 0 42px rgba(255,125,20,.13)); }
.sun-orange { background:linear-gradient(135deg,#ff4f14,#ff8b18); transform:translate(-58px,-8px); }
.sun-yellow { background:linear-gradient(135deg,#ffe75a,#ffbd21); transform:translate(57px,19px); mix-blend-mode:screen; opacity:.96; }
.orbit { position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; transform:rotate(-27deg); }
.orbit-one { width:390px; height:170px; }
.orbit-two { width:310px; height:390px; transform:rotate(42deg); border-color:rgba(255,181,46,.18); }
.hero-art-caption { position:absolute; bottom:12px; width:100%; display:flex; justify-content:space-between; align-items:center; color:#777b84; font-size:9px; letter-spacing:1.5px; }
.caption-line { height:1px; width:55px; background:linear-gradient(90deg,var(--orange),var(--yellow)); }
.spark { position:absolute; color:var(--yellow); font-size:24px; }
.spark-one { right:14%; top:19%; }.spark-two { left:14%; bottom:24%; color:var(--orange); font-size:19px; }.spark-three { right:21%; bottom:20%; font-size:40px; }
.hero-bottom { position:absolute; bottom:27px; left:0; right:0; border-top:1px solid var(--line); padding-top:17px; display:flex; justify-content:space-between; color:#777b84; font-size:9px; letter-spacing:1.7px; }
.hero-bottom b { color:var(--yellow); font-size:15px; margin-left:9px; }
.trust-strip { min-height:70px; display:flex; justify-content:center; align-items:center; gap:clamp(15px,3.2vw,46px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0d0e12; color:#898c94; font-size:9px; letter-spacing:1.7px; flex-wrap:wrap; padding:16px 24px; }
.trust-strip i { width:4px; height:4px; background:var(--orange); border-radius:50%; }
.services-section { padding-top:120px; padding-bottom:125px; }
.section-heading { max-width:650px; }
.section-heading h2,.about-copy h2,.contact-copy h2 { font-size:clamp(36px,4.5vw,56px); letter-spacing:-2.7px; line-height:1.1; margin-bottom:22px; font-weight:600; }
.section-intro { color:var(--muted); max-width:510px; font-size:14px; line-height:1.85; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:53px; }
.service-card { position:relative; min-height:340px; background:var(--panel); border:1px solid var(--line); padding:25px 25px 27px; border-radius:8px; }
.service-card.featured { background:linear-gradient(155deg,#191713,#121317 62%); border-color:rgba(255,174,39,.4); }
.card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }
.service-number { font-size:10px; color:#777b84; letter-spacing:1px; }
.card-icon { width:35px; height:35px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--yellow); font-size:18px; }
.service-card h3 { font-size:20px; letter-spacing:-.6px; margin-bottom:12px; }
.service-card p { font-size:12px; color:var(--muted); line-height:1.8; min-height:67px; }
.service-card ul { padding:0; list-style:none; margin:18px 0 0; border-top:1px solid var(--line); padding-top:15px; }
.service-card li { color:#c6c7cb; font-size:11px; margin:7px 0; }
.service-card li:before { content:"↗"; color:var(--orange); margin-right:9px; }
.featured-label { position:absolute; bottom:0; left:25px; font-size:8px; color:var(--yellow); letter-spacing:1.5px; transform:translateY(25px); }
.pricing-note { color:#747882; font-size:11px; margin:34px 0 0; }
.portfolio-section { background:#101115; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.portfolio-inner { padding-top:115px; padding-bottom:110px; }
.portfolio-heading { max-width:780px; }
.project-card { display:grid; grid-template-columns:1fr .88fr; gap:44px; align-items:center; margin-top:48px; padding:24px; background:#17191e; border:1px solid var(--line); border-radius:10px; }
.project-preview { min-height:330px; background:#e8edf0; color:#14252c; border-radius:5px; overflow:hidden; position:relative; display:block; text-decoration:none; }
.browser-bar { height:30px; display:flex; align-items:center; gap:5px; padding:0 11px; background:#f9fafb; border-bottom:1px solid #d8dfe2; }
.browser-bar>span { width:5px;height:5px;border-radius:50%;background:#bbc3c8; }
.browser-bar div { margin-left:auto; font-size:7px; letter-spacing:1.2px; color:#7e8c91; }
.live-site-frame { height:360px; overflow:hidden; background:#fff; position:relative; }
.live-site-frame iframe { display:block; width:100%; height:700px; border:0; background:#fff; pointer-events:none; }
.preview-open-label { position:absolute; right:12px; bottom:12px; z-index:2; background:rgba(9,10,13,.9); color:#fff; border:1px solid rgba(255,192,41,.6); border-radius:30px; padding:9px 12px; font-size:8px; letter-spacing:1px; }
.project-live-preview:hover .preview-open-label { background:linear-gradient(100deg,var(--orange),var(--yellow)); color:#111; }
.project-live-link { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--yellow); font-size:13px; font-weight:700; text-decoration:none; margin:0 0 20px; }
.project-live-link span { font-size:18px; }
.project-live-link small { width:100%; color:#b7b8bd; font-size:10px; font-weight:500; }
.project-live-link:hover { color:#fff; }
.project-type { color:var(--yellow); font-size:9px; letter-spacing:1.7px; margin-bottom:8px; }
.project-details h3 { font-size:31px; letter-spacing:-1.5px; margin-bottom:15px; }
.project-details>p:not(.project-type) { font-size:13px; line-height:1.8; color:var(--muted); }
.project-tags { display:flex; flex-wrap:wrap; gap:7px; margin:23px 0; }
.project-tags span { border:1px solid var(--line); color:#c6c7cb; padding:6px 9px; border-radius:4px; font-size:9px; }
.project-status { font-size:8px; letter-spacing:1.1px; color:#b7b8bd; }
.portfolio-footnote { color:#777b84; font-size:10px; margin:14px 0 0; }
.about-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(45px,9vw,120px); align-items:center; padding-top:125px; padding-bottom:130px; }
.about-graphic { min-height:360px; position:relative; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:radial-gradient(circle at 50% 43%,rgba(255,143,30,.09),transparent 55%),#101115; overflow:hidden; }
.about-graphic:before,.about-graphic:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.09); border-radius:50%; width:290px; height:290px; }
.about-graphic:after { width:220px; height:220px; border-color:rgba(255,192,41,.18); }
.mini-sun { width:128px; height:128px; position:absolute; border-radius:50%; }
.mini-orange { background:linear-gradient(140deg,#ff5117,#ff8b1b); transform:translate(-34px,-4px); }
.mini-yellow { background:linear-gradient(140deg,#ffe95c,#ffb51f); transform:translate(34px,12px); mix-blend-mode:screen; }
.about-graphic-label { position:absolute; bottom:20px; left:22px; color:#777b84; font-size:8px; letter-spacing:1.6px; line-height:1.7; }
.about-copy .eyebrow { margin-bottom:21px; }
.about-copy>p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.9; max-width:550px; }
.about-points { margin-top:30px; border-top:1px solid var(--line); }
.about-points>div { display:flex; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.about-points>div>span { font-size:10px; color:var(--orange); padding-top:2px; }
.about-points p { margin:0; display:flex; flex-direction:column; gap:3px; }
.about-points b { font-size:12px; font-weight:600; }
.about-points small { font-size:11px; color:#8f929a; }
.contact-section { background:#111216; border-top:1px solid var(--line); }
.contact-inner { display:grid; grid-template-columns:1fr .8fr; gap:clamp(45px,10vw,140px); padding-top:115px; padding-bottom:115px; }
.contact-copy h2 { font-size:clamp(43px,5vw,65px); }
.contact-copy>p:not(.eyebrow) { max-width:390px; color:var(--muted); font-size:14px; line-height:1.9; }
.contact-form { display:flex; flex-direction:column; gap:8px; }
.contact-form label { margin-top:10px; font-size:10px; color:#d9d9dc; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; color:var(--text); background:#0b0c10; border:1px solid rgba(255,255,255,.14); border-radius:4px; padding:13px 14px; outline:none; font-size:12px; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:rgba(255,191,45,.75); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#696d76; }
.contact-form select { color:#b7bac1; }
.contact-form select option { background:#111318; }
.contact-form textarea { resize:vertical; }
.submit-button { align-self:flex-start; margin-top:12px; }
.form-note,.form-status { font-size:10px; line-height:1.6; color:#777b84; margin:8px 0 0; }
.form-status { color:var(--yellow); }
.site-footer { width:min(var(--max),calc(100% - 48px)); margin:0 auto; min-height:105px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:24px 0; }
.footer-brand .brand-mark { transform:scale(.8); transform-origin:left center; width:31px; }
.footer-brand .brand-name { font-size:18px; }
.site-footer>p { color:#777b84; font-size:10px; margin:0; }
.footer-links { display:flex; gap:19px; font-size:10px; color:#c4c5ca; }
.copyright { width:100%; border-top:1px solid var(--line); padding-top:15px; font-size:9px; color:#696d76; }
@media (max-width: 800px) {
  .site-header { height:76px; }
  .main-nav { gap:18px; }
  .hero { grid-template-columns:1fr; padding-top:80px; padding-bottom:90px; }
  .hero-art { height:350px; margin-top:10px; }
  .sun { width:175px; height:175px; }
  .sun-orange { transform:translate(-47px,-5px); }.sun-yellow { transform:translate(46px,13px); }
  .orbit-one { width:310px; height:140px; }.orbit-two { width:250px; height:320px; }
  .hero-bottom { bottom:20px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:auto; padding-bottom:28px; }
  .service-card p { min-height:0; }
  .featured-label { position:static; display:block; margin-top:20px; transform:none; }
  .project-card { grid-template-columns:1fr; gap:28px; }
  .about-section { grid-template-columns:1fr; gap:45px; }
  .about-graphic { min-height:300px; }
  .contact-inner { grid-template-columns:1fr; gap:35px; }
}
@media (max-width: 560px) {
  .site-header,.section,.site-footer { width:calc(100% - 36px); }
  .brand-name { font-size:20px; }
  .menu-toggle { display:flex; flex-direction:column; gap:5px; padding:10px; }
  .menu-toggle span { width:22px; height:2px; background:white; display:block; }
  .main-nav { display:none; position:absolute; top:66px; left:0; right:0; padding:18px; flex-direction:column; align-items:stretch; gap:17px; background:#111318; border:1px solid var(--line); border-radius:8px; }
  .main-nav.open { display:flex; }
  .nav-cta { text-align:center; }
  h1 { font-size:clamp(43px,12vw,60px); letter-spacing:-2.8px; }
  .hero { padding-top:65px; }
  .hero-lede { font-size:14px; }
  .hero-actions { gap:18px; flex-wrap:wrap; }
  .hero-note { margin-top:37px; align-items:flex-start; line-height:1.6; }
  .hero-art { height:300px; }
  .hero-bottom { font-size:7px; letter-spacing:1px; }
  .trust-strip { gap:12px; font-size:7px; letter-spacing:1px; }
  .trust-strip i { width:3px;height:3px; }
  .services-section,.portfolio-inner,.about-section,.contact-inner { padding-top:82px; padding-bottom:85px; }
  .section-heading h2,.about-copy h2 { letter-spacing:-1.8px; }
  .project-card { padding:13px; }
  .project-preview { min-height:285px; }
  .live-site-frame { height:320px; }
  .live-site-frame iframe { height:680px; }
  .preview-content { padding:25px 20px; height:255px; }
  .preview-headline { font-size:30px; }
  .project-details h3 { font-size:27px; }
  .site-footer { justify-content:space-between; }
  .site-footer>p { order:3; width:100%; }
  .footer-links { gap:12px; }
}


/* Contact form submission feedback */
.submit-button:disabled { opacity: 0.7; cursor: wait; }
.form-status { margin-top: 1rem; line-height: 1.6; }
.form-status.success { color: #a8f0b1; }


/* Official SunSaber logo header update */
.brand { gap: 13px; flex-shrink: 0; }
.brand-logo-image { display:block; width:58px; height:48px; object-fit:contain; }
.brand-name { white-space:nowrap; font-size:22px; letter-spacing:-1px; }
@media (max-width: 640px) { .brand-logo-image { width:47px; height:40px; } .brand-name { font-size:20px; } .site-header { height:76px; } }