/* templatein7 · build 2026-08-27-b · rebuilt from verified reference CSS/HTML facts */

:root{
  --page-bg:#ffffff;
  --panel-tint:#f7f9fb;
  --ink:#202632;
  --ink-soft:#5a6472;
  --ink-faint:#8993a1;
  --line:#e7ebf0;
  --accent-teal:#0f8f7f;
  --accent-teal-deep:#0b6b5f;
  --accent-navy:#233a7a;
  --accent-orange:#e88a34;
  --dark:#20242b;
  --radius-flat:4px;
  --radius-soft:8px;
  --shadow-faint:0 1px 3px rgba(20,30,45,.14);
  --shadow-panel:6px 0 20px rgba(20,30,45,.14);
  --face:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --frame:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--face);
  background:var(--page-bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--accent-navy);text-decoration:none;}
a:hover{color:var(--ink-faint);}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-weight:800;line-height:1.25;margin:0 0 .5em;color:var(--ink);}
p{margin:0 0 1em;}
.frame{max-width:var(--frame);margin:0 auto;padding:0 24px;}

/* ---------- Masthead ---------- */
.masthead{height:68px;position:relative;z-index:50;}
.masthead .frame{display:flex;align-items:center;justify-content:space-between;height:100%;}
.brand-lockup{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--ink);}
.brand-lockup img{height:34px;width:auto;border-radius:var(--radius-flat);}
.nav-trigger{
  display:none;width:40px;height:40px;border:none;background:transparent;cursor:pointer;
  position:relative;z-index:70;
}
.nav-trigger i,.nav-trigger i::before,.nav-trigger i::after{
  content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--ink);
}
.nav-trigger i{top:50%;transform:translateY(-50%);}
.nav-trigger i::before{top:-8px;}
.nav-trigger i::after{top:8px;}
.primary-nav{display:flex;}
.primary-nav a{
  font-size:1.1rem;font-weight:700;color:var(--ink);
  padding:0 16px;height:68px;display:flex;align-items:center;
}
.primary-nav a:hover{color:var(--accent-teal-deep);}

/* ---------- Intro / hero ---------- */
.intro{padding:52px 0 40px;position:relative;overflow:hidden;}
.intro-blob{
  position:absolute;width:620px;height:620px;
  border-radius:42% 58% 60% 40% / 45% 40% 60% 55%;
  background:linear-gradient(135deg,var(--accent-teal),var(--accent-navy));
  opacity:.12;top:-210px;right:-150px;transform:rotate(18deg);z-index:0;
}
.intro-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr;gap:40px;align-items:center;}
.intro h1{font-size:clamp(2rem,4vw,2.9rem);}
.intro .lede{color:var(--ink-soft);font-size:1.15rem;max-width:58ch;margin-top:12px;}
.cta-button{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:var(--radius-flat);
  font-weight:800;font-size:1.2rem;
  background:var(--accent-teal);color:#fff;border:none;
  box-shadow:var(--shadow-faint);margin-top:22px;cursor:pointer;
}
.cta-button:hover{background:var(--accent-teal-deep);color:#fff;}
.intro-media img{border-radius:var(--radius-soft);width:100%;object-fit:cover;aspect-ratio:4/3;box-shadow:var(--shadow-faint);}

/* ---------- Layout: main + sidebar ---------- */
.layout{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start;padding-bottom:20px;}
.main-col{min-width:0;}
.side-col{min-width:0;}

/* ---------- Screenshots ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:8px 0 30px;}
.gallery-grid img{border-radius:var(--radius-flat);box-shadow:var(--shadow-faint);}

/* ---------- Spec table (special page) ---------- */
.spec-panel{margin:6px 0 28px;overflow-x:auto;}
.spec-panel table{width:100%;border-collapse:collapse;}
.spec-panel th,.spec-panel td{border:1px solid var(--line);padding:12px 14px;text-align:left;font-size:.95rem;}
.spec-panel th{background:var(--panel-tint);width:34%;color:var(--ink-soft);font-weight:700;}
.spec-panel td{font-weight:700;}

/* ---------- Content block ---------- */
.content-block h2{font-size:1.6rem;margin-top:1.6em;}
.content-block h3{font-size:1.2rem;margin-top:1.2em;}
.content-block p{color:var(--ink-soft);}
.content-block figure{margin:1.2em 0;}
.content-block figure img{border-radius:var(--radius-flat);box-shadow:var(--shadow-faint);}
.content-block table{width:100%;border-collapse:collapse;margin:1.2em 0;}
.content-block table th,.content-block table td{border:1px solid var(--line);padding:10px 12px;text-align:left;font-size:.93rem;}
.content-block table th{background:var(--panel-tint);}
.content-block ul{padding-left:1.3em;list-style:disc;margin:0 0 1.2em;}
.content-block ol{padding-left:1.3em;margin:0 0 1.2em;}
.content-block li{margin-bottom:.5em;color:var(--ink-soft);}

/* ---------- Secondary / support link ---------- */
.support-link{
  display:inline-block;padding:10px 18px;border:1px solid var(--accent-orange);
  color:var(--accent-orange);font-weight:700;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.03em;border-radius:6px;box-shadow:var(--shadow-faint);
}
.support-link:hover{background:var(--accent-orange);color:#fff;}

/* ---------- Sidebar widgets ---------- */
.widget-box{border:1px solid var(--line);border-radius:var(--radius-soft);padding:20px;margin-bottom:24px;}
.widget-box h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:14px;font-weight:800;}
.widget-list{display:grid;gap:14px;}
.widget-item{display:flex;gap:12px;}
.widget-item img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-flat);flex:0 0 auto;}
.widget-item .w-title{font-weight:700;font-size:.9rem;line-height:1.35;}
.widget-item .w-date{font-size:.76rem;color:var(--ink-faint);margin-top:4px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:#c7cdd6;padding:42px 0 20px;margin-top:14px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:26px;}
.footer-col h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;}
.footer-col ul{display:grid;gap:8px;}
.footer-col a{color:#c7cdd6;font-size:.9rem;}
.footer-col a:hover{color:#fff;}
.footer-about p{color:#8892a0;font-size:.88rem;max-width:34ch;}
.footer-contact li{color:#8892a0;font-size:.88rem;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);margin-top:26px;padding-top:16px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.8rem;color:#8892a0;
}

/* ---------- Floating back-to-top ---------- */
.floating-top{
  position:fixed;right:22px;bottom:22px;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent-teal);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:var(--shadow-faint);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:60;
}
.floating-top.show{opacity:1;visibility:visible;transform:translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .layout{grid-template-columns:1fr;}
  .side-col{order:3;}
  .intro-grid{grid-template-columns:1fr;}
  .intro-media{order:-1;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:780px){
  .nav-trigger{display:block;}
  .primary-nav{
    position:fixed;top:0;left:0;bottom:0;width:260px;
    background:#fff;box-shadow:var(--shadow-panel);
    flex-direction:column;align-items:flex-start;
    padding:84px 22px 20px;gap:0;
    transform:translateX(-100%);transition:transform .25s ease;z-index:60;
  }
  .primary-nav.open{transform:translateX(0);}
  .primary-nav a{height:auto;width:100%;padding:13px 0;border-bottom:1px solid var(--line);}
  .footer-grid{grid-template-columns:1fr;}
}