/*
Theme Name: PhotoForm Modern
Theme URI: https://photoform.eu/
Author: Thunderstorm Solutions AS
Description: A modern, responsive one-page WordPress theme for Photoform, using the Photoform logo palette and photonics-inspired visual language.
Version: 1.0.0
Text Domain: photoform-modern
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
  --deep: #044630;
  --deep-2: #023526;
  --green: #168c33;
  --bright: #20ca5a;
  --acid: #54ff60;
  --ink: #0b241b;
  --paper: #f4f7f2;
  --muted: #9eb3a8;
  --line: rgba(255,255,255,.12);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--deep-2);
  color: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.site-shell { overflow: hidden; background: var(--deep); }

.site-header {
  position: fixed;
  z-index: 50;
  top: 0; left: 0; right: 0;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(28px, calc((100vw - var(--max))/2));
  background: rgba(4,70,48,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: block; width: 198px; height: 58px; overflow: hidden; }
.brand img, .site-footer img { width: 100%; height: 100%; object-fit: contain; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 13px; font-weight: 650; letter-spacing: .02em; }
.nav a { text-decoration: none; opacity: .82; transition: .25s ease; }
.nav a:hover { opacity: 1; color: var(--acid); }
.nav-cta { border: 1px solid rgba(84,255,96,.5); padding: 11px 17px; border-radius: 999px; }
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 11px; }
.menu-toggle span { display: block; height: 1.5px; background: #fff; margin: 7px 0; }

.section-pad { max-width: var(--max); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.hero { min-height: 100svh; padding-top: 170px; padding-bottom: 95px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 72px; }
.eyebrow, .section-index { font-size: 11px; font-weight: 760; letter-spacing: .19em; text-transform: uppercase; color: var(--acid); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.pulse-dot { width: 7px; height: 7px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 0 6px rgba(84,255,96,.08), 0 0 24px rgba(84,255,96,.75); }
.hero h1 { font-size: clamp(52px, 6.5vw, 94px); line-height: .94; letter-spacing: -.058em; margin: 0; max-width: 850px; font-weight: 670; }
.hero h1 span { color: var(--acid); }
.hero-lede { margin: 34px 0 0; color: #c6d5cc; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; max-width: 690px; }
.hero-actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.button { text-decoration: none; padding: 14px 20px; border-radius: 999px; font-size: 13px; font-weight: 730; transition: .25s ease; }
.button-primary { background: var(--acid); color: var(--ink); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(84,255,96,.18); }
.button-ghost { border: 1px solid rgba(255,255,255,.22); color: #fff; }
.button-ghost:hover { border-color: var(--acid); }

.hero-visual { min-height: 560px; display: flex; align-items: center; justify-content: center; }
.visual-card { width: min(100%, 500px); aspect-ratio: .88; position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: 34px; background:
  radial-gradient(circle at 55% 42%, rgba(84,255,96,.16), transparent 29%),
  linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 50px 100px rgba(0,0,0,.2);
  overflow: hidden;
}
.surface-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at center, #000 10%, transparent 75%); }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(84,255,96,.3); left: 50%; top: 47%; transform: translate(-50%,-50%); }
.orbit::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 25px rgba(84,255,96,.8); }
.orbit-a { width: 65%; aspect-ratio:1; animation: spin 16s linear infinite; }
.orbit-b { width: 45%; aspect-ratio:1; border-color: rgba(32,202,90,.35); animation: spinReverse 12s linear infinite; }
.orbit-c { width: 25%; aspect-ratio:1; border-color: rgba(255,255,255,.18); }
.orbit-a::after { top: 12%; right: 13%; }
.orbit-b::after { bottom: 4%; left: 27%; background:var(--bright); }
.orbit-c::after { top: 50%; right:-4px; }
.scan-line { position:absolute; z-index:3; top:-15%; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,var(--acid),transparent); box-shadow:0 0 28px var(--acid); animation: scan 5.5s ease-in-out infinite; opacity:.8; }
.laser-node { position:absolute; border-radius:50%; width:5px; height:5px; background:#fff; box-shadow:0 0 18px var(--acid); }
.node-1 { left:20%; top:22%; }.node-2 { right:16%; top:67%; }.node-3 { left:28%; bottom:14%; }
.visual-caption { position:absolute; left:28px; right:28px; bottom:28px; display:flex; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#b8c8bf; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spinReverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes scan { 0%,100%{top:13%;opacity:.2} 50%{top:79%;opacity:1} }

.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:24px; padding:18px 28px; overflow:hidden; white-space:nowrap; color:#b7c8bf; font-size:10px; letter-spacing:.18em; font-weight:700; }
.trust-strip i { width:4px; height:4px; border-radius:50%; background:var(--bright); }

.split-section { padding-top: 150px; padding-bottom: 150px; display:grid; grid-template-columns: 1fr 3fr; gap:80px; border-bottom:1px solid var(--line); }
.section-content h2, .section-heading h2, .focus-panel h2, .why-grid h2, .status-copy h2, .company-card h2, .contact-inner h2 { margin:0; font-size:clamp(42px,5.5vw,74px); line-height:1; letter-spacing:-.045em; font-weight:650; }
.large-copy { font-size:clamp(24px,3vw,40px); line-height:1.3; letter-spacing:-.025em; margin:32px 0 0; max-width:900px; color:#e7eee9; }

.technology-section { padding-top:150px; padding-bottom:150px; }
.section-heading { max-width:820px; }
.section-heading h2 { margin-top:22px; }
.section-heading p { font-size:19px; color:#c6d5cc; line-height:1.6; margin-top:26px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:66px; }
.feature-card { position:relative; min-height:240px; padding:26px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(255,255,255,.035); overflow:hidden; transition:.3s ease; }
.feature-card:hover { transform:translateY(-5px); border-color:rgba(84,255,96,.42); background:rgba(255,255,255,.055); }
.feature-number { color:var(--bright); font-size:11px; font-weight:800; letter-spacing:.14em; }
.feature-card h3 { font-size:25px; line-height:1.17; letter-spacing:-.025em; max-width:250px; margin:64px 0 0; font-weight:620; }
.feature-mark { position:absolute; right:-42px; bottom:-42px; width:118px; height:118px; border-radius:50%; border:1px solid rgba(84,255,96,.22); box-shadow:0 0 0 18px rgba(84,255,96,.025),0 0 0 36px rgba(84,255,96,.015); }
.statement { margin-top:26px; border-left:2px solid var(--acid); padding:18px 0 18px 28px; max-width:920px; font-size:clamp(20px,2.2vw,30px); line-height:1.4; color:#e4ece6; }

.focus-section { padding-top:0; padding-bottom:150px; display:grid; grid-template-columns:1.18fr .82fr; min-height:650px; }
.focus-panel { background:var(--paper); color:var(--ink); padding:72px; border-radius:34px 0 0 34px; display:flex; flex-direction:column; justify-content:center; }
.focus-tag { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.18em; margin-bottom:26px; }
.focus-panel p { margin:32px 0 0; font-size:19px; line-height:1.75; color:#385246; max-width:720px; }
.focus-graphic { min-height:100%; position:relative; background:linear-gradient(145deg,#0a603f,#033c2b); border-radius:0 34px 34px 0; overflow:hidden; }
.ring { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(84,255,96,.24); }
.ring-1{width:70%;aspect-ratio:1}.ring-2{width:48%;aspect-ratio:1}.ring-3{width:27%;aspect-ratio:1}.ring-core{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);background:var(--acid);box-shadow:0 0 50px var(--acid)}
.crosshair{position:absolute;background:rgba(255,255,255,.13)}.x1{left:50%;top:13%;bottom:13%;width:1px}.x2{top:50%;left:13%;right:13%;height:1px}

.why-section { padding-top:150px; padding-bottom:150px; border-top:1px solid var(--line); }
.why-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:90px; margin-top:38px; align-items:start; }
.why-grid p { font-size:clamp(21px,2.5vw,32px); line-height:1.5; margin:0; color:#d9e5de; letter-spacing:-.015em; }

.status-section { padding-top:150px; padding-bottom:150px; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:end; background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0)); }
.status-copy h2 { margin-top:22px; }
.status-copy p { font-size:19px; line-height:1.7; color:#c5d4cb; margin-top:28px; }
.status-track { padding-bottom:26px; }
.track-line { height:3px; background:rgba(255,255,255,.14); position:relative; border-radius:999px; }
.track-line span { display:block; width:72%; height:100%; background:linear-gradient(90deg,var(--bright),var(--acid)); box-shadow:0 0 25px rgba(84,255,96,.22); }
.track-line::after { content:""; position:absolute; left:72%; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 8px rgba(84,255,96,.08); }
.track-labels { display:flex; justify-content:space-between; margin-top:18px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#a8bbb0; }

.company-section { padding-top:30px; padding-bottom:150px; }
.company-card { border:1px solid rgba(84,255,96,.24); border-radius:30px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:70px; background:radial-gradient(circle at 83% 30%,rgba(84,255,96,.09),transparent 24%); }
.company-card h2 { margin-top:22px; }
.company-details { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.company-details strong { font-size:28px; letter-spacing:-.02em; }
.company-details span { color:var(--acid); margin-top:8px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.company-details p { color:#bfd0c6; line-height:1.65; font-size:17px; margin:26px 0 0; }

.contact-section { background:var(--acid); color:var(--ink); }
.contact-inner { max-width:var(--max); margin:0 auto; padding:120px 28px 130px; }
.contact-inner .section-index { color:var(--green); }
.contact-inner h2 { margin-top:24px; }
.contact-email { display:inline-flex; align-items:center; gap:22px; margin-top:36px; text-decoration:none; color:var(--ink); font-size:clamp(30px,5vw,72px); font-weight:650; letter-spacing:-.045em; border-bottom:2px solid rgba(11,36,27,.45); padding-bottom:8px; }
.contact-email span { font-size:.7em; transition:.25s ease; }.contact-email:hover span{transform:translate(4px,-4px)}

.site-footer { max-width:var(--max); margin:0 auto; padding:44px 28px 58px; display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:40px; background:var(--deep); }
.site-footer img { height:58px; }
.footer-copy { display:flex; gap:30px; color:#9fb5aa; font-size:12px; }
.site-footer a { color:#c9d7cf; font-size:12px; text-decoration:none; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .nav { position:fixed; inset:88px 0 auto 0; background:#033c2b; padding:28px; display:none; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; gap:45px; padding-top:150px; }
  .hero-visual { min-height:430px; }
  .visual-card { max-width:500px; }
  .split-section { grid-template-columns:1fr; gap:32px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .focus-section { grid-template-columns:1fr; }
  .focus-panel { border-radius:30px 30px 0 0; padding:54px; }
  .focus-graphic { min-height:450px; border-radius:0 0 30px 30px; }
  .why-grid, .status-section, .company-card { grid-template-columns:1fr; gap:42px; }
  .site-footer { grid-template-columns:1fr; }
  .site-footer img { width:210px; }
}

@media (max-width: 640px) {
  .site-header { height:76px; padding:0 18px; }
  .brand { width:160px; }
  .nav { inset:76px 0 auto 0; }
  .section-pad { padding-left:20px; padding-right:20px; }
  .hero { min-height:auto; padding-top:132px; padding-bottom:75px; }
  .hero h1 { font-size:clamp(48px,14vw,68px); }
  .hero-lede { font-size:16px; }
  .hero-visual { min-height:360px; }
  .visual-caption { left:20px; right:20px; bottom:20px; flex-direction:column; gap:7px; }
  .trust-strip { justify-content:flex-start; overflow-x:auto; }
  .split-section, .technology-section, .why-section, .status-section { padding-top:100px; padding-bottom:100px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:200px; }
  .feature-card h3 { margin-top:48px; }
  .focus-section { padding-bottom:100px; }
  .focus-panel { padding:40px 28px; }
  .focus-panel p { font-size:17px; }
  .focus-graphic { min-height:340px; }
  .company-section { padding-bottom:100px; }
  .company-card { padding:36px 26px; }
  .contact-inner { padding:90px 20px; }
  .contact-email { font-size:clamp(25px,8vw,42px); }
  .site-footer { padding-left:20px; padding-right:20px; }
  .footer-copy { flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* WordPress integration */
body.admin-bar .site-header { top: 32px; }
.custom-logo-link { display:block; width:100%; height:100%; }
.custom-logo-link img { width:100%; height:100%; object-fit:contain; }
.wp-content-shell { min-height:70vh; padding-top:170px; padding-bottom:120px; }
.wp-article { max-width:860px; margin:0 auto 72px; }
.wp-article h1 { font-size:clamp(42px,6vw,78px); line-height:1; letter-spacing:-.045em; margin:0 0 32px; }
.wp-article h1 a { text-decoration:none; }
.entry-content { color:#d5e2da; font-size:18px; line-height:1.75; }
.entry-content a { color:var(--acid); }
.entry-content img { max-width:100%; height:auto; border-radius:18px; }
.entry-content h2,.entry-content h3 { color:#fff; }
@media (max-width:782px) { body.admin-bar .site-header { top:46px; } }
@media (max-width:600px) { body.admin-bar .site-header { top:0; } }
.brand > a { display:block; width:100%; height:100%; }